A game in which equilateral triangles become redder and redder.'s game

Click here for free DL of the app version that can save data.

No:1458

119

←

Prev Next

→

A game in which equilateral triangles become redde..ALL
Developer sayaensm｜Date and time 23/6/18 16:50:35
Build time 25.415 sec｜Game capacity 2.018KB｜

Script

【ゲームの概要】画面中央に正三角形が表示され、下から上に向かってサイズが小さくなっていきます。画面上部にある矩形をスマホのタップで伸ばし、正三角形が通り過ぎるようにします。正三角形が矩形に触れる前に伸ばしてゴールすると、次のステージに進めます。正三角形に触れるとゲームオーバーになります。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>正三角形ゲーム</title>
	<style>
		canvas { 
			display: block; 
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>

// 初期値の設定
		var size = 100;
		var color = "rgb(255, 0, 0)";

// 正三角形を描く
		function drawTriangle() {
			context.beginPath();
			context.moveTo(150, 0);
			context.lineTo(250, 250);
			context.lineTo(50, 250);
			context.closePath();
			context.fillStyle = color;
			context.fill();
		}

// 色を変える
		function changeColor() {
			var red = Math.floor(Math.random() * 256);
			var green = Math.floor(Math.random() * 256);
			var blue = Math.floor(Math.random() * 256);
			color = "rgb(" + red + ", " + green + ", " + blue + ")";
		}

// ゲームループ
		function gameLoop() {
			// キャンバスをクリアする
			context.clearRect(0, 0, canvas.width, canvas.height);

// 正三角形を描く
			drawTriangle();

// 矩形を描く
			context.beginPath();
			context.rect(0, 0, size, 10);
			context.fillStyle = "#000000";
			context.fill();

// サイズを変える
			size -= 0.1;

// 色を変える
			changeColor();

if(size < 0) {
				// ゲームオーバー
				alert("Game Over!");
			}
			else {
				// 次のフレームを呼ぶ
				requestAnimationFrame(gameLoop);
			}
		}

// ゲームスタート
		gameLoop();
	</script>
</body>
</html>

【ゲームの概要】
画面中央に正三角形が表示され、下から上に向かってサイズが小さくなっていきます。
画面上部にある矩形をスマホのタップで伸ばし、正三角形が通り過ぎるようにします。
正三角形が矩形に触れる前に伸ばしてゴールすると、次のステージに進めます。
正三角形に触れるとゲームオーバーになります。