Shooting Game in 3D rectangular's game

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

No:3649

1263

←

Prev Next

→

Shooting Game in 3D rectangular
Developer User3655｜Date and time 23/6/25 23:48:32
Build time 54.284 sec｜Game capacity 4.657KB｜

Script

ではございませんが、スマホで遊べるシンプルなスペースインベーダーゲームを作成しました。以下がそのHTMLファイルのコードです。

このゲームは、スマホ上でタッチ操作でプレイヤーを動かし、画面上部から現れる敵を倒すというシンプルなゲームです。また、JavaScriptでキャンバスを操作してゲームを実装しています。そのため、上記のHTMLファイルを直接フォルダ内に保存してindex.htmlとして開くことで、ゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

ではございませんが、スマホで遊べるシンプルなスペースインベーダーゲームを作成しました。以下がそのHTMLファイルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>スペースインベーダー</title>
	<style>
	canvas {
		display: block;
		margin: 0 auto;
	}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="400"></canvas>
	<script>
	// 設定値
	var enemyRowCount = 3;
	var enemyColumnCount = 5;
	var enemyWidth = 30;
	var enemyHeight = 20;
	var enemyPadding = 10;
	var enemyOffsetTop = 30;
	var enemyOffsetLeft = 30;
	var playerWidth = 30;
	var playerHeight = 20;
	var playerX = (300-playerWidth)/2;
	var bulletRadius = 3;
	var bulletSpeed = 5;
	var fireInterval = 300;

// ゲーム要素の初期設定
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var enemies = [];
	var bullets = [];
	var player = {
		x: playerX,
		y: canvas.height - playerHeight - 10
	};

// 敵の初期設定
	for (var c=0; c<enemyColumnCount; c++) {
		enemies[c] = [];
		for (var r=0; r<enemyRowCount; r++) {
			enemies[c][r] = { x: 0, y: 0, isAlive: true };
		}
	}

// ゲームループ
	function gameLoop() {
		// 画面をクリア
		ctx.clearRect(0, 0, canvas.width, canvas.height);

// 敵を描画
		for (var c=0; c<enemyColumnCount; c++) {
			for (var r=0; r<enemyRowCount; r++) {
				if (enemies[c][r].isAlive) {
					var enemyX = (c*(enemyWidth+enemyPadding))+enemyOffsetLeft;
					var enemyY = (r*(enemyHeight+enemyPadding))+enemyOffsetTop;
					enemies[c][r].x = enemyX;
					enemies[c][r].y = enemyY;
					ctx.beginPath();
					ctx.rect(enemyX, enemyY, enemyWidth, enemyHeight);
					ctx.fillStyle = "#000";
					ctx.fill();
					ctx.closePath();
				}
			}
		}

// プレイヤーを描画
		ctx.beginPath();
		ctx.rect(player.x, player.y, playerWidth, playerHeight);
		ctx.fillStyle = "#000";
		ctx.fill();
		ctx.closePath();

// 弾を描画
		for (var i=0; i<bullets.length; i++) {
			var bullet = bullets[i];
			ctx.beginPath();
			ctx.arc(bullet.x, bullet.y, bulletRadius, 0, Math.PI*2);
			ctx.fillStyle = "#000";
			ctx.fill();
			ctx.closePath();
		}

// 弾の移動と当たり判定
		for (var i=0; i<bullets.length; i++) {
			var bullet = bullets[i];
			bullet.y -= bulletSpeed;
			for (var c=0; c<enemyColumnCount; c++) {
				for (var r=0; r<enemyRowCount; r++) {
					var enemy = enemies[c][r];
					if (enemy.isAlive) {
						if (bullet.x > enemy.x && bullet.x < enemy.x+enemyWidth && bullet.y > enemy.y && bullet.y < enemy.y+enemyHeight) {
							bullet.isAlive = false;
							enemy.isAlive = false;
						}
					}
				}
			}
		}

// 敵の攻撃
		for (var c=0; c<enemyColumnCount; c++) {
			for (var r=0; r<enemyRowCount; r++) {
				var enemy = enemies[c][r];
				if (enemy.isAlive) {
					if (Math.random() < 0.01) {
						bullets.push({ x: enemy.x+enemyWidth/2, y: enemy.y+enemyHeight+2, isAlive: true });
					}
				}
			}
		}

// 弾の削除
		bullets = bullets.filter(function(bullet) {
			return bullet.isAlive;
		});

// プレイヤーの移動
		if (touchX) {
			player.x = touchX - playerWidth/2;
		}

// プレイヤーの攻撃
		if (fireTimer > fireInterval) {
			fireTimer = 0;
			bullets.push({ x: player.x+playerWidth/2, y: player.y, isAlive: true });
		}
		fireTimer++;

// ゲームオーバー判定
		for (var c=0; c<enemyColumnCount; c++) {
			for (var r=0; r<enemyRowCount; r++) {
				if (enemies[c][r].isAlive && enemies[c][r].y > canvas.height-enemyHeight-playerHeight-10) {
					alert("ゲームオーバー");
					location.reload();
				}
			}
		}

// 10ミリ秒後に再度ゲームループを呼び出す
		setTimeout(gameLoop, 10);
	}

// キャンバスのタッチイベントの処理
	var touchX = null;
	canvas.addEventListener("touchstart", function(e) {
		touchX = e.touches[0].clientX;
	}, false);
	canvas.addEventListener("touchmove", function(e) {
		touchX = e.touches[0].clientX;
	}, false);
	canvas.addEventListener("touchend", function(e) {
		touchX = null;
	}, false);

// プレイヤーの攻撃タイマー
	var fireTimer = fireInterval;

// ゲーム開始
	gameLoop();
	</script>
</body>
</html>