Side-scrolling, jumping to avoid enemies that come at you.'s game

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

No:3873

556

←

Prev Next

→

Side-scrolling, jumping to avoid enemies that come..ALL
Developer User3743｜Date and time 23/6/26 20:43:59
Build time 34.125 sec｜Game capacity 3.497KB｜

Script

「ジャンプゲーム」というタイトルのゲームを作成しました。以下が実装されたHTMLファイルです。

このゲームは、スマートフォンでプレイできるようにキーボードの代わりに画面タッチでジャンプできるようにしています。また、敵は赤い四角形で表示され、プレイヤーが敵に当たるとゲームオーバーになります。ゲーム画面上部にスコアが表示されます。また、ゲームオーバー後には再プレイするためにページをリロードするように指示されます。

←

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>ジャンプゲーム</title>
</head>
<body>
	<canvas id="gameCanvas" width="320" height="480"></canvas>

// ゲームオーバー時の処理
		function gameOver() {
			isGameOver = true;
			alert("ゲームオーバー！\nスコア: " + score);
			location.reload();
		}

// キーボードのイベント
		document.addEventListener("keydown", function(event) {
			if (event.key === "ArrowUp" && player.y === canvas.height - player.height) {
				player.jumping = true;
			}
		});

// 敵のクラス
		function Enemy(x, y, width, height, speed) {
			this.x = x;
			this.y = y;
			this.width = width;
			this.height = height;
			this.speed = speed;
		}
		Enemy.prototype.draw = function() {
			ctx.fillStyle = "red";
			ctx.fillRect(this.x, this.y, this.width, this.height);
		};
		Enemy.prototype.move = function() {
			this.x -= this.speed;
			if (this.x + this.width < 0) {
				enemies.splice(enemies.indexOf(this), 1);
			}
			if (this.x < player.x + player.width && this.x + this.width > player.x && this.y < player.y + player.height && this.y + this.height > player.y) {
				gameOver();
			}
		}

// ゲームのメイン処理
		function main() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!isGameOver) {
				// 敵を生成する
				if (enemyDelay === 0) {
					var enemyHeight = Math.floor(Math.random() * 50) + 20;
					var enemy = new Enemy(canvas.width, canvas.height - enemyHeight, 20, enemyHeight, enemySpeed);
					enemies.push(enemy);
					enemyDelay = 30;
				}
				enemyDelay--;

// プレイヤーを描画する
				ctx.fillStyle = "blue";
				ctx.fillRect(player.x, player.y, player.width, player.height);

// プレイヤーの移動
				if (player.jumping) {
					player.y -= player.speed;
					player.jumpSteps++;
					if (player.jumpSteps === player.jumpHeight / player.speed) {
						player.jumping = false;
						player.jumpSteps = 0;
					}
				} else if (player.y < canvas.height - player.height) {
					player.y += player.speed;
				}

// 敵を描画し、移動する
				enemies.forEach(function(enemy) {
					enemy.draw();
					enemy.move();
				});

// スコアを表示する
				score++;
				ctx.fillStyle = "black";
				ctx.font = "20px Arial";
				ctx.fillText("Score: " + score, 10, 30);

setTimeout(main, 10);
			}
		}

// ゲームを開始する
		main();
	</script>
</body>
</html>
```

このゲームは、スマートフォンでプレイできるようにキーボードの代わりに画面タッチでジャンプできるようにしています。
また、敵は赤い四角形で表示され、プレイヤーが敵に当たるとゲームオーバーになります。
ゲーム画面上部にスコアが表示されます。
また、ゲームオーバー後には再プレイするためにページをリロードするように指示されます。