Once through the tunnel, I found myself in a snowy country.'s game

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

No:1970

883

←

Prev Next

→

Once through the tunnel, I found myself in a snowy..ALL
Developer User3163｜Date and time 23/6/19 15:38:26
Build time 41.544 sec｜Game capacity 3.329KB｜

Script

。プレイヤーはスマホの画面をタップすることで、雪国を走るスノーモービルを操作します。途中トンネルやジャンプ台が現れ、それを上手く避けながら走り抜けることが目的です。障害物を避けるたびにスコアが加算され、より高いスコアを目指してプレイすることができます。絵文字や効果音を多めに使用して、より楽しい雰囲気を演出しましょう。以下は実際のプログラム例です。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Snowmobile Game</title>
	<style>
		canvas {
			border: 2px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<script>
		// canvasの設定
		var canvas = document.getElementById("gameCanvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

// ゲームの変数
		var ctx = canvas.getContext("2d");
		var snowmobile = {
			x: canvas.width / 2,
			y: canvas.height - 100,
			width: 50,
			height: 100,
			speed: 8,
			jump: 20,
			isJumping: false
		};
		var tunnel = {
			x: 0,
			y: 0,
			width: 100,
			height: canvas.height
		};
		var jumpPad = {
			x: 0,
			y: 0,
			width: 50,
			height: 50
		};
		var score = 0;

// イベントリスナー
		document.addEventListener("click", function() {
			if (!snowmobile.isJumping) {
				snowmobile.isJumping = true;
				snowmobile.y -= snowmobile.jump;
				setTimeout(function() {
					snowmobile.y += snowmobile.jump;
					snowmobile.isJumping = false;
				}, 500);
			}
		});

// ゲームのループ
		function loop() {
			// canvasのクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 地面の描画
			ctx.fillStyle = "white";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "gray";
			ctx.fillRect(tunnel.x, tunnel.y, tunnel.width, tunnel.height);

// スコアの表示
			ctx.fillStyle = "black";
			ctx.font = "30px Arial";
			ctx.fillText("Score: " + score, canvas.width - 200, 50);

// 障害物の移動
			tunnel.x -= snowmobile.speed;
			jumpPad.x -= snowmobile.speed;

// 障害物の再生成
			if (tunnel.x + tunnel.width < 0) {
				tunnel.x = canvas.width;
				score++;
			}
			if (jumpPad.x + jumpPad.width < 0) {
				jumpPad.x = canvas.width + Math.floor(Math.random() * 300) + 100;
				jumpPad.y = Math.floor(Math.random() * (canvas.height - jumpPad.height - 100)) + 50;
			}

// スノーモービルの描画
			ctx.fillStyle = "red";
			ctx.fillRect(snowmobile.x, snowmobile.y, snowmobile.width, snowmobile.height);

// 障害物の描画
			ctx.fillStyle = "blue";
			ctx.fillRect(jumpPad.x, jumpPad.y, jumpPad.width, jumpPad.height);

// 当たり判定
			if (snowmobile.x + snowmobile.width > jumpPad.x && snowmobile.x < jumpPad.x + jumpPad.width && 
				snowmobile.y + snowmobile.height > jumpPad.y && snowmobile.y < jumpPad.y + jumpPad.height) {
				snowmobile.y -= 50;
			}
			if (snowmobile.x + snowmobile.width > tunnel.x && snowmobile.x < tunnel.x + tunnel.width && 
				snowmobile.y + snowmobile.height > tunnel.y && snowmobile.y < tunnel.y + tunnel.height) {
				alert("Game Over! Score: " + score);
				location.reload();
			}

// ループ
			window.requestAnimationFrame(loop);
		}
		loop();
	</script>
</body>
</html>
```