The fire is also cooler when the mind is completely subdued's game

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

No:3616

7116

←

Prev Next

→

The fire is also cooler when the mind is completel..ALL
Developer User3694｜Date and time 23/6/25 21:14:01
Build time 45.265 sec｜Game capacity 4.132KB｜

Script

1枚のhtmlファイルで、JavaScriptを含むゲームを実装します。簡易的なシューティングゲームを作ります。

このゲームは、キーボードで自機を移動させ、スペースキーで弾を発射することができます。ランダムに現れる敵を倒すことでスコアを稼ぎます。しかし、敵が画面下に到達するとゲームオーバーとなります。スコアが表示され、再度プレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

1枚のhtmlファイルで、JavaScriptを含むゲームを実装します。簡易的なシューティングゲームを作ります。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>シューティングゲーム</title>
	<style>
		body {
			margin: 0 auto;
			background-color: black;
			color: white;
			font-size: 24px;
			text-align: center;
			user-select: none;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: white;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="500" height="500"></canvas>
	<script>
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");
		const playerSize = 50;
		const bulletSize = 10;
		const enemySize = 40;
		let playerX = canvas.width / 2 - playerSize / 2;
		let playerY = canvas.height - playerSize;
		let bullets = [];
		let enemies = [];
		let score = 0;
		let gameOver = false;
		
		function drawPlayer() {
			ctx.fillStyle = "yellow";
			ctx.fillRect(playerX, playerY, playerSize, playerSize);
		}
		
		function drawBullet(bullet) {
			ctx.fillStyle = "blue";
			ctx.fillRect(bullet.x, bullet.y, bulletSize, bulletSize);
		}
		
		function drawEnemy(enemy) {
			ctx.font = "30px serif";
			ctx.fillText("👾", enemy.x, enemy.y + enemySize);
		}
		
		function movePlayer(event) {
			if (event.key === "ArrowLeft") {
				playerX -= 10;
			} else if (event.key === "ArrowRight") {
				playerX += 10;
			} else if (event.key === "ArrowUp") {
				playerY -= 10;
			} else if (event.key === "ArrowDown") {
				playerY += 10;
			}
			
			if (playerX < 0) { playerX = 0; }
			if (playerX + playerSize > canvas.width) { playerX = canvas.width - playerSize; }
			if (playerY < 0) { playerY = 0; }
			if (playerY + playerSize > canvas.height) { playerY = canvas.height - playerSize; }
		}
		
		function shoot() {
			bullets.push({x: playerX + playerSize / 2 - bulletSize / 2, y: playerY});
		}
		
		function createEnemy() {
			enemies.push({x: Math.random() * (canvas.width - enemySize), y: 0, speed: Math.random() * 3 + 1});
		}
		
		function updateBullets() {
			for (let i = 0; i < bullets.length; i++) {
				bullets[i].y -= 10;
			}
			bullets = bullets.filter(bullet => bullet.y > 0);
		}
		
		function updateEnemies() {
			for (let i = 0; i < enemies.length; i++) {
				enemies[i].y += enemies[i].speed;
				if (enemies[i].y > canvas.height) {
					gameOver = true;
				}
			}
			enemies = enemies.filter(enemy => enemy.y + enemySize < canvas.height);
		}
		
		function checkCollisions() {
			for (let i = 0; i < bullets.length; i++) {
				for (let j = 0; j < enemies.length; j++) {
					if (bullets[i].x < enemies[j].x + enemySize && bullets[i].x + bulletSize > enemies[j].x && bullets[i].y < enemies[j].y + enemySize && bullets[i].y + bulletSize > enemies[j].y) {
						bullets.splice(i, 1);
						enemies.splice(j, 1);
						score++;
					}
				}
			}
		}
		
		function drawScore() {
			ctx.font = "30px serif";
			ctx.fillText(`Score: ${score}`, 10, 30);
		}
		
		function drawGameOver() {
			ctx.font = "50px serif";
			ctx.fillText("Game Over", canvas.width / 2 - 150, canvas.height / 2 - 50);
			ctx.font = "30px serif";
			ctx.fillText(`Score: ${score}`, canvas.width / 2 - 50, canvas.height / 2 + 30);
		}
		
		window.addEventListener("keydown", movePlayer);
		window.addEventListener("keyup", event => {if (event.key === " ") { shoot(); }});
		
		setInterval(() => {
			if (!gameOver) {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				drawPlayer();
				updateBullets();
				bullets.forEach(drawBullet);
				updateEnemies();
				enemies.forEach(drawEnemy);
				checkCollisions();
				drawScore();
				if (Math.random() < 0.1) { createEnemy(); }
			} else {
				drawGameOver();
			}
		}, 30);
	</script>
</body>
</html>
```