Fight with charge shots's game

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

No:2046

4344

←

Prev Next

→

Fight with charge shots
Developer User3025｜Date and time 23/6/19 22:38:06
Build time 60.822 sec｜Game capacity 4.169KB｜

Script

シューティングゲームを実装しました。以下がプログラムの例です。

このゲームは、プレイヤーが移動してスペースキーで弾を発射して敵と戦うシューティングゲームです。プレイヤーと弾は🚀と💥の絵文字で表現され、敵は👾の絵文字で表現されます。スマホでも操作ができるように、画面タップで左右移動、画面を長押しで弾の発射ができるようにすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

シューティングゲームを実装しました。以下がプログラムの例です。

<!DOCTYPE html>
<html>
<head>
	<title>シューティングゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: black;
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #1e1e1e;
			border: 1px solid #ccc;
			box-shadow: 0 0 5px #ccc;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

var player = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			radius: 20,
			moveSpeed: 5,
			shootSpeed: 10,
			shootTimer: 0,
			character: "🚀"
		};

var bullets = [];
		var enemies = [];

// ユーティリティ関数
		function drawCharacter(x, y, character) {
			ctx.font = "30px Arial";
			ctx.textBaseline = "middle";
			ctx.textAlign = "center";
			ctx.fillStyle = "white";
			ctx.fillText(character, x, y);
		}

// イベントリスナーの登録
		document.addEventListener("keydown", function(e) {
			if (e.keyCode === 37) { // 左矢印キー
				player.x -= player.moveSpeed;
			} else if (e.keyCode === 39) { // 右矢印キー
				player.x += player.moveSpeed;
			} else if (e.keyCode === 32) { // スペースキー
				if (player.shootTimer <= 0) {
					bullets.push({
						x: player.x,
						y: player.y - player.radius,
						radius: 5,
						speed: player.shootSpeed,
						character: "💥"
					});
					player.shootTimer = 10;
				}
			}
		});

// ゲームループ
		var gameIntervalId = setInterval(function() {
			// プレイヤーの描画
			drawCharacter(player.x, player.y, player.character);

// 弾の移動と描画
			for (var i = 0; i < bullets.length; i++) {
				bullets[i].y -= bullets[i].speed;
				drawCharacter(bullets[i].x, bullets[i].y, bullets[i].character);

// 弾が画面外に出たら削除
				if (bullets[i].y < 0) {
					bullets.splice(i, 1);
					i--;
				}
			}

// 敵の移動と描画
			for (var i = 0; i < enemies.length; i++) {
				enemies[i].y += 5;
				drawCharacter(enemies[i].x, enemies[i].y, enemies[i].character);

// 敵が画面外に出たら削除
				if (enemies[i].y > canvas.height + enemies[i].radius) {
					enemies.splice(i, 1);
					i--;
				}
			}

// 敵を生成
			if (Math.random() < 0.05) {
				enemies.push({
					x: Math.floor(Math.random() * canvas.width),
					y: -30,
					radius: 20,
					character: "👾"
				});
			}

// 当たり判定
			for (var i = 0; i < bullets.length; i++) {
				for (var j = 0; j < enemies.length; j++) {
if(!bullets[i] || !enemies[j]) continue;
					var dx = bullets[i].x - enemies[j].x;
					var dy = bullets[i].y - enemies[j].y;
					var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < bullets[i].radius + enemies[j].radius) {
						bullets.splice(i, 1);
						i--;
						enemies.splice(j, 1);
						j--;
					}
				}
			}

// ショットタイマーを更新
			if (player.shootTimer > 0) {
				player.shootTimer--;
			}

// ゲームオーバー判定
			for (var i = 0; i < enemies.length; i++) {
				var dx = player.x - enemies[i].x;
				var dy = player.y - enemies[i].y;
				var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < player.radius + enemies[i].radius) {
					clearInterval(gameIntervalId);
					alert("Game Over!");
				}
			}
		}, 20);
	</script>
</body>
</html>