Hurry up with the appeasement of the howsk!!!! 🤬💢game's game

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

No:3635

439

←

Prev Next

→

Hurry up with the appeasement of the howsk!!!! 🤬💢g..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/25 22:50:26
Build time 62.512 sec｜Game capacity 5.886KB｜

Script

は、『スペースインベーダー』です。以下が実装のコードです。

以上がスペースインベーダーのゲームです。キー操作で自機を動かし、スペースキーで弾を発射します。インベーダーを全滅させるか、自機のライフが0になるとゲームオーバーです。スマホでもプレイ可能です。

←

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 type="text/css">
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<script>
		// Canvasの設定
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = 320;
		canvas.height = 480;
		document.body.appendChild(canvas);

// ゲームの状態
		var score = 0;
		var lives = 3;
		var gameover = false;

// インベーダーの設定
		var invaders = [];
		var invader_size = 20;
		var invader_speed = 5;
		var invader_rows = 5;
		var invader_cols = 10;
		var invader_padding = 5;
		var invader_color = "green";
		for (var col = 0; col < invader_cols; col++) {
			for (var row = 0; row < invader_rows; row++) {
				var invader = {
					x: col * (invader_size + invader_padding) + invader_padding,
					y: row * (invader_size + invader_padding) + invader_padding,
					width: invader_size,
					height: invader_size
				};
				invaders.push(invader);
			}
		}

// 自機の設定
		var player = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			width: 20,
			height: 30,
			color: "red",
			speed: 10
		};

// 弾の設定
		var bullets = [];
		var bullet_width = 5;
		var bullet_height = 10;
		var bullet_speed = 10;

// キー操作の処理
		var keysDown = {};
		document.addEventListener("keydown", function (e) {
		    keysDown[e.keyCode] = true;
		}, false);
		document.addEventListener("keyup", function (e) {
		    delete keysDown[e.keyCode];
		}, false);

// インベーダーを描画する関数
		function drawInvaders() {
			for (var i = 0; i < invaders.length; i++) {
				var invader = invaders[i];
				ctx.fillStyle = invader_color;
				ctx.fillRect(invader.x, invader.y, invader.width, invader.height);
			}
		}

// 自機を描画する関数
		function drawPlayer() {
			ctx.fillStyle = player.color;
			ctx.fillRect(player.x, player.y, player.width, player.height);
		}

// 弾を描画する関数
		function drawBullets() {
			for (var i = 0; i < bullets.length; i++) {
				var bullet = bullets[i];
				ctx.fillStyle = "blue";
				ctx.fillRect(bullet.x, bullet.y, bullet_width, bullet_height);
			}
		}

// インベーダーの移動処理
		function moveInvaders() {
			for (var i = 0; i < invaders.length; i++) {
				var invader = invaders[i];
				if (invader.x + invader.width > canvas.width || invader.x < 0) {
					invader_speed = -invader_speed;
					for (var j = 0; j < invaders.length; j++) {
						invaders[j].y += 10;
					}
					break;
				}
				invader.x += invader_speed;
			}
		}

// 自機の移動処理
		function movePlayer() {
			if (38 in keysDown) { // up
				player.y -= player.speed;
			}
			if (40 in keysDown) { // down
				player.y += player.speed;
			}
			if (37 in keysDown) { // left
				player.x -= player.speed;
			}
			if (39 in keysDown) { // right
				player.x += player.speed;
			}

if (player.x < 0) {
				player.x = 0;
			} else if (player.x + player.width > canvas.width) {
				player.x = canvas.width - player.width;
			}
			if (player.y < 0) {
				player.y = 0;
			} else if (player.y + player.height > canvas.height) {
				player.y = canvas.height - player.height;
			}
		}

// 弾の移動処理
		function moveBullets() {
			for (var i = 0; i < bullets.length; i++) {
				var bullet = bullets[i];
				bullet.y -= bullet_speed;
				if (bullet.y < 0) {
					bullets.splice(i, 1);
					i--;
				}
			}
		}

// 衝突判定の処理
		function checkCollisions() {
			for (var i = 0; i < bullets.length; i++) {
				var bullet = bullets[i];
				for (var j = 0; j < invaders.length; j++) {
					var invader = invaders[j];
					if (bullet.x + bullet_width > invader.x && bullet.x < invader.x + invader.width
							&& bullet.y + bullet_height > invader.y && bullet.y < invader.y + invader.height) {
						bullets.splice(i, 1);
						i--;
						invaders.splice(j, 1);
						score += 10;
						if (invaders.length == 0) {
							gameover = true;
						}
						break;
					}
				}
			}

for (var i = 0; i < invaders.length; i++) {
				var invader = invaders[i];
				if (player.x + player.width > invader.x && player.x < invader.x + invader.width
						&& player.y + player.height > invader.y && player.y < invader.y + invader.height) {
					lives--;
					if (lives == 0) {
						gameover = true;
					} else {
						player.x = canvas.width / 2;
						player.y = canvas.height - 50;
					}
					break;
				}
			}
		}

// スコアと残りライフのテキストを描画する関数
		function drawText() {
			ctx.fillStyle = "#000";
			ctx.font = "20px Arial";
			ctx.fillText("Score: " + score, 10, 30);
			ctx.fillText("Lives: " + lives, canvas.width - 90, 30);
		}

// ゲームオーバーのテキストを描画する関数
		function drawGameover() {
			ctx.fillStyle = "#000";
			ctx.font = "50px Arial";
			ctx.fillText("Game Over", canvas.width / 2 - 140, canvas.height / 2);
			ctx.font = "30px Arial";
			ctx.fillText("Score: " + score, canvas.width / 2 - 60, canvas.height / 2 + 40);
		}

// メインの関数
		function main() {
			if (!gameover) {
				ctx.clearRect(0, 0, canvas.width, canvas.height);

moveInvaders();
				movePlayer();
				moveBullets();
				checkCollisions();

drawInvaders();
				drawPlayer();
				drawBullets();
				drawText();

requestAnimationFrame(main);
			} else {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				drawGameover();
			}
		}

main();
	</script>
</body>
</html>

以上がスペースインベーダーのゲームです。キー操作で自機を動かし、スペースキーで弾を発射します。インベーダーを全滅させるか、自機のライフが0になるとゲームオーバーです。スマホでもプレイ可能です。