以下がJavaScriptを使ったインベーダーゲームの実装例です。1つのHTMLファイルにすべてのコードを書いているため、単一のファイルで実行可能です。なお、ゲーム本体の詳細な実装方法については省略させていただきますので、ご了承ください。
```html
<!DOCTYPE html>
<html>
<head>
<title>インベーダーゲーム</title>
</head>
<body>
<canvas id="game-canvas" width="600" height="400"></canvas>
<script>
// 定数定義
const PLAYER_SIZE = 20; // プレイヤーの大きさ
const PLAYER_MOVE_SPEED = 5; // プレイヤーの移動速度
const BULLET_MOVE_SPEED = 10; // 弾の移動速度
const ENEMY_SIZE = 30; // 敵の大きさ
const ENEMY_MOVE_SPEED = 3; // 敵の移動速度
const ENEMY_INTERVAL = 500; // 敵の出現間隔
// 変数定義
let playerX = 250; // プレイヤーの初期位置
let bullets = []; // 弾の配列
let enemies = []; // 敵の配列
let score = 0; // 得点
// ゲーム画面の初期設定
let canvas = document.getElementById('game-canvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// マウスイベントのリスナー登録
canvas.addEventListener('mousemove', function(event) {
playerX = event.offsetX - PLAYER_SIZE / 2;
});
canvas.addEventListener('click', function(event) {
let bulletX = playerX + PLAYER_SIZE / 2;
let bulletY = canvas.height - PLAYER_SIZE;
let bullet = {x: bulletX, y: bulletY};
bullets.push(bullet);
});
// ゲームループの開始
setInterval(function() {
// ゲーム画面の初期化
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// プレイヤーの描画
ctx.fillStyle = 'white';
ctx.fillRect(playerX, canvas.height - PLAYER_SIZE, PLAYER_SIZE, PLAYER_SIZE);
// 弾の移動と描画
for (let i = 0; i < bullets.length; i++) {
let bullet = bullets[i];
ctx.fillStyle = 'red';
ctx.fillRect(bullet.x, bullet.y, 5, 10);
bullet.y -= BULLET_MOVE_SPEED;
}
// 敵の出現と移動
if (Math.random() * 1000 < ENEMY_INTERVAL) {
let enemyX = Math.random() * (canvas.width - ENEMY_SIZE);
let enemyY = 0;
let enemy = {x: enemyX, y: enemyY};
enemies.push(enemy);
}
for (let i = 0; i < enemies.length; i++) {
let enemy = enemies[i];
ctx.fillStyle = 'green';
ctx.fillRect(enemy.x, enemy.y, ENEMY_SIZE, ENEMY_SIZE);
enemy.y += ENEMY_MOVE_SPEED;
}
// 衝突判定
for (let i = 0; i < bullets.length; i++) {
let bullet = bullets[i];
for (let j = 0; j < enemies.length; j++) {
let enemy = enemies[j];
if (bullet.x >= enemy.x && bullet.x <= enemy.x + ENEMY_SIZE && bullet.y >= enemy.y && bullet.y <= enemy.y + ENEMY_SIZE) {
bullets.splice(i, 1);
enemies.splice(j, 1);
score++;
break;
}
}
}
// スコアの表示
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('Score: ' + score, 10, 30);
}, 30); // ゲームループの実行間隔
</script>
</body>
</html>
```
ジョークとして、敵機に「JavaScriptはやめましょう」と書いておくことをおすすめします。
