Survive the game by operating a rocket and avoiding enemies's game

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

No:2488

155

←

Prev Next

→

Survive the game by operating a rocket and avoidin..ALL
Developer User3382｜Date and time 23/6/21 17:41:01
Build time 45.517 sec｜Game capacity 3.765KB｜

Script

このゲームは、プレイヤーがロケットを操作して、敵を避けながら生き残るゲームです。スマホでも遊べます。ロケットは、矢印キーまたはWASDキーで動かすことができます。敵が接触するとゲームオーバーになります。スコアが表示され、プレイヤーが生き残った時間が長いほど高得点になります。また、絵文字が多めに使われています。

←

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>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas></canvas>
	<script>
		const canvas = document.querySelector("canvas");
		const ctx = canvas.getContext("2d");

const player = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			size: 20,
			speed: 5
		};

let enemies = [];

function createEnemy() {
			const enemy = {
				x: Math.random() * canvas.width,
				y: 0 - Math.random() * canvas.height,
				size: 20,
				speed: Math.random() * 3 + 2
			};
			enemies.push(enemy);
		}

let score = 0;

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

// player
			ctx.fillStyle = "yellow";
			ctx.fillRect(player.x - player.size / 2, player.y - player.size / 2, player.size, player.size);

// enemies
			ctx.fillStyle = "red";
			for (let i = 0; i < enemies.length; i++) {
				const enemy = enemies[i];
				ctx.fillRect(enemy.x - enemy.size / 2, enemy.y - enemy.size / 2, enemy.size, enemy.size);
				enemy.y += enemy.speed;
				if (enemy.y > canvas.height + enemy.size) {
					enemies.splice(i, 1);
				}
				if (enemy.x > player.x - player.size / 2 && enemy.x < player.x + player.size / 2 && enemy.y > player.y - player.size / 2 && enemy.y < player.y + player.size / 2) {
					alert("GameOver!\nスコア: " + score);
					location.reload();
				}
			}

score += 1;
			ctx.fillStyle = "white";
			ctx.font = "20px Arial";
			ctx.fillText("スコア: " + score, 10, 30);

// input
			if (input.right) {
				player.x += player.speed;
			}
			if (input.left) {
				player.x -= player.speed;
			}
			if (input.up) {
				player.y -= player.speed;
			}
			if (input.down) {
				player.y += player.speed;
			}

// boundary
			if (player.x < player.size / 2) {
				player.x = player.size / 2;
			}
			if (player.x > canvas.width - player.size / 2) {
				player.x = canvas.width - player.size / 2;
			}
			if (player.y < player.size / 2) {
				player.y = player.size / 2;
			}
			if (player.y > canvas.height - player.size / 2) {
				player.y = canvas.height - player.size / 2;
			}

// create enemy
			if (Math.random() < 0.1) {
				createEnemy();
			}

requestAnimationFrame(update);
		}

const input = {
			right: false,
			left: false,
			up: false,
			down: false
		};

document.addEventListener("keydown", function(event) {
			switch (event.key) {
				case "ArrowRight":
				case "d":
					input.right = true;
					break;
				case "ArrowLeft":
				case "a":
					input.left = true;
					break;
				case "ArrowUp":
				case "w":
					input.up = true;
					break;
				case "ArrowDown":
				case "s":
					input.down = true;
					break;
			}
		});

document.addEventListener("keyup", function(event) {
			switch (event.key) {
				case "ArrowRight":
				case "d":
					input.right = false;
					break;
				case "ArrowLeft":
				case "a":
					input.left = false;
					break;
				case "ArrowUp":
				case "w":
					input.up = false;
					break;
				case "ArrowDown":
				case "s":
					input.down = false;
					break;
			}
		});

requestAnimationFrame(update);
	</script>
</body>
</html>