2D action game that lets you rewind time's game

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

No:1044

286

←

Prev Next

→

2D action game that lets you rewind time
Developer User3193｜Date and time 23/6/18 0:38:07
Build time 40.064 sec｜Game capacity 5.229KB｜

Script

Controls: Move with the four-way controller、Spacebar to attack、Rewind time with the Z key.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>時間を巻き戻せる2Dアクションゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div>操作方法：十字キーで移動、スペースキーで攻撃、Zキーで時間を巻き戻す</div>
	<script>
		const canvas = document.getElementById("canvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

const ctx = canvas.getContext("2d");

// キャラクター画像を読み込む
		const playerImg = new Image();
		playerImg.src = "player.png";

// 敵画像を読み込む
		const enemyImg = new Image();
		enemyImg.src = "enemy.png";

// 時間軸を管理する変数
		let frameCount = 0;
		const MAX_FRAME_COUNT = 100;

// ゲームオーバーフラグ
		let gameOver = false;

// ゲームの状態を表すクラス
		class GameState {
			constructor() {
				this.playerX = 100;
				this.playerY = canvas.height - 200;
				this.enemies = [];
				this.bullets = [];
				this.score = 0;
			}

update() {
				// キャラクターの更新
				if (Key.isDown(Key.LEFT)) {
					this.playerX -= 5;
				}
				if (Key.isDown(Key.RIGHT)) {
					this.playerX += 5;
				}
				if (Key.isDown(Key.SPACE)) {
					const bullet = new Bullet(this.playerX + 50, this.playerY + 10);
					this.bullets.push(bullet);
				}

// 敵の生成
				if (frameCount % 50 === 0) {
					const enemy = new Enemy(canvas.width, Math.random() * (canvas.height - 100) + 50);
					this.enemies.push(enemy);
				}

// キャラクターと敵の当たり判定
				this.enemies.forEach(enemy => {
					if (isCollided(this.playerX, this.playerY, 100, 100, enemy.x, enemy.y, 100, 100)) {
						gameOver = true;
					}
				});

// 弾と敵の当たり判定
				this.bullets.forEach((bullet, i) => {
					this.enemies.forEach((enemy, j) => {
						if (isCollided(bullet.x, bullet.y, 20, 20, enemy.x, enemy.y, 100, 100)) {
							this.bullets.splice(i, 1);
							this.enemies.splice(j, 1);
							this.score += 10;
						}
					});
				});

// 弾の移動
				this.bullets.forEach((bullet, i) => {
					bullet.update();
					if (bullet.x > canvas.width) {
						this.bullets.splice(i, 1);
					}
				});

// 敵の移動
				this.enemies.forEach((enemy, i) => {
					enemy.update();
					if (enemy.x < -100) {
						this.enemies.splice(i, 1);
					}
				});

// スコア表示
				ctx.fillStyle = "white";
				ctx.font = "bold 24px Arial";
				ctx.fillText("Score：" + this.score, 20, 40);
			}

draw() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);

// キャラクターの描画
				ctx.drawImage(playerImg, this.playerX, this.playerY);

// 弾の描画
				this.bullets.forEach(bullet => {
					ctx.fillStyle = "red";
					ctx.fillRect(bullet.x, bullet.y, 20, 20);
				});

// 敵の描画
				this.enemies.forEach(enemy => {
					ctx.drawImage(enemyImg, enemy.x, enemy.y);
				});

// 時間の表示
				const remainingFrames = MAX_FRAME_COUNT - frameCount;
				let frameString = "";
				if (remainingFrames >= 0) {
					frameString = "+" + remainingFrames;
				} else {
					frameString = "-" + (-remainingFrames);
				}
				ctx.fillStyle = "white";
				ctx.font = "bold 24px Arial";
				ctx.fillText("Time：" + frameString, canvas.width - 150, 40);

// ゲームオーバーの判定
				if (gameOver) {
					ctx.fillStyle = "black";
					ctx.fillRect(0, 0, canvas.width, canvas.height);
					ctx.fillStyle = "white";
					ctx.font = "bold 48px Arial";
					ctx.fillText("Game Over", canvas.width / 2 - 120, canvas.height / 2);
					clearInterval(gameLoop);
				}
			}

rewind() {
				// 時間の巻き戻し
				frameCount -= 30;
				if (frameCount < 0) {
					frameCount = 0;
				}

// ゲームオーバーの解除
				gameOver = false;
			}
		}

// 弾のクラス
		class Bullet {
			constructor(x, y) {
				this.x = x;
				this.y = y;
			}

update() {
				this.x += 20;
			}
		}

// 敵のクラス
		class Enemy {
			constructor(x, y) {
				this.x = x;
				this.y = y;
			}

update() {
				this.x -= 10;
			}
		}

// 当たり判定
		function isCollided(ax, ay, aw, ah, bx, by, bw, bh) {
			return ax < bx + bw && ay < by + bh && bx < ax + aw && by < ay + ah;
		}

// キーボード入力のクラス
		class Key {
			static isDown(keyCode) {
				return keys[keyCode];
			}
		}

// キーコードの定義
		const keys = {
			LEFT: 37,
			UP: 38,
			RIGHT: 39,
			DOWN: 40,
			SPACE: 32,
			Z: 90
		};

// キーボード入力のイベントリスナー
		document.addEventListener("keydown", e => {
			keys[e.keyCode] = true;

if (e.keyCode === keys.Z) {
				gameState.rewind();
			}
		});

document.addEventListener("keyup", e => {
			keys[e.keyCode] = false;
		});

// ゲームのループ処理
		let gameState = new GameState();
		const gameLoop = setInterval(() => {
			gameState.update();
			gameState.draw();

frameCount++;
			if (frameCount > MAX_FRAME_COUNT) {
				frameCount = MAX_FRAME_COUNT;
			}
		}, 30);
	</script>
</body>
</html>