AI game creator

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

No:3847

1146

←

Prev Next

→

Train de GO
Developer User3720｜Date and time 23/6/26 18:58:17
Build time 42.131 sec｜Game capacity 3.988KB｜

Script

「電車deGO」というゲームを作成しました。以下のHTMLコードを1枚のファイルに保存して、ブラウザで実行することでプレーできます。ゲームの説明と操作方法は画面上に表示されます。

このゲームは、電車を操作して障害物を避けつつ、スコアを稼いでいくゲームです。画面をタップすると電車が上方向に移動し、離すと自動的に落ちていきます。障害物にぶつかるとゲームオーバーとなり、スコアが表示されます。再度画面をタップすることでゲームをリスタートできます。絵文字を使用し、スマホでも遊びやすいように配慮しました。

←

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>電車deGO</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #eee;
			font-family: sans-serif;
		}
		canvas {
			display: block;
			margin: auto;
			background-color: #fff;
			border: 2px solid black;
		}
		#score {
			text-align: center;
			font-size: 24px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="480"></canvas>
	<div id="score"></div>

// ゲームの初期化
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		let scoreEl = document.getElementById("score");
		let score = 0;
		let trainX = canvas.width / 2 - TRAIN_WIDTH / 2;
		let trainY = canvas.height - TRAIN_HEIGHT;
		let obstacles = [];
		let gameover = false;

// 描画処理
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 新しい障害物を生成
			if (obstacles.length === 0 || obstacles[obstacles.length - 1].x < canvas.width - OBSTACLE_GAP) {
				obstacles.push({
					x: canvas.width,
					y: Math.floor(Math.random() * (canvas.height - OBSTACLE_GAP - OBSTACLE_HEIGHT)),
				});
			}

// 障害物を描画
			obstacles.forEach(obstacle => {
				ctx.fillStyle = "#f00";
				ctx.fillRect(obstacle.x, 0, OBSTACLE_WIDTH, obstacle.y);
				ctx.fillRect(obstacle.x, obstacle.y + OBSTACLE_GAP, OBSTACLE_WIDTH, canvas.height - obstacle.y - OBSTACLE_GAP);
				obstacle.x -= OBSTACLE_SPEED;

// 衝突判定
				if (trainX + TRAIN_WIDTH >= obstacle.x && trainX <= obstacle.x + OBSTACLE_WIDTH &&
					(trainY <= obstacle.y + OBSTACLE_HEIGHT || trainY + TRAIN_HEIGHT >= obstacle.y + OBSTACLE_GAP)) {
					gameOver();
				}

// スコア加算
				if (trainX > obstacle.x + OBSTACLE_WIDTH && !obstacle.scored) {
					score += SCORE_INCREAMENT;
					obstacle.scored = true;
					scoreEl.innerText = `Score: ${score}`;
				}
			});

// 電車を描画
			ctx.fillStyle = "#00f";
			ctx.fillRect(trainX, trainY, TRAIN_WIDTH, TRAIN_HEIGHT);
			trainY -= TRAIN_SPEED;

// ゲームオーバー処理
			if (trainY <= 0) {
				gameOver();
			}

// アニメーションフレームの呼び出し
			if (!gameover) {
				requestAnimationFrame(draw);
			}
		}

// ゲームオーバー処理
		function gameOver() {
			gameover = true;
			scoreEl.innerText = `Score: ${score} ${GAMEOVER_IMAGE}`;
		}

// タップされた時の処理
		canvas.addEventListener("click", () => {
			if (!gameover) {
				trainY += 40;
				if (trainY > canvas.height - TRAIN_HEIGHT) {
					trainY = canvas.height - TRAIN_HEIGHT;
				}
			} else {
				reset();
			}
		});

// リセット処理
		function reset() {
			score = 0;
			trainX = canvas.width / 2 - TRAIN_WIDTH / 2;
			trainY = canvas.height - TRAIN_HEIGHT;
			obstacles = [];
			gameover = false;
			draw();
			scoreEl.innerText = `Score: ${score}`;
		}

// ゲームの開始
		reset();
	</script>
</body>
</html>
```