【簡単にシューティングゲームを作ろう！】

【簡単にシューティングゲームを作ろう！】
ゲームの内容
ChatGPTにどんな質問をしたのか？
作成したプログラム
ゲームをカスタマイズしてみよう！

【簡単にシューティングゲームを作ろう！】

こんにちは！今日は「シューティングゲーム」を作る方法を紹介するよ。難しそうに思うかもしれないけれど、実はとっても簡単に作れるんだよ。今回は、HTMLとJavaScriptを使って、プレイヤーが敵を撃つゲームを作ってみたよ。しかも、小学生でも理解できるように、ひとつひとつ丁寧に説明するから安心してね。

こんなゲームができるよシューティングゲーム

ゲームの内容

このシューティングゲームでは、プレイヤーが画面下の青い四角（プレイヤー）を動かして、スペースキーで弾を撃つことができるよ。敵（赤い四角）は上から下に向かって落ちてくるんだ。そして、敵に弾を当てると敵が消えるんだよ！

ChatGPTにどんな質問をしたのか？

まず、シューティングゲームを作りたかったので、ChatGPTに次のような質問をしました：

プロンプト:

HTMLとJavaScriptを使って、簡単なシューティングゲームを作りたい。プレイヤーが左右に動き、スペースキーで弾を撃つことができ、敵は上から下に落ちてきて、弾が敵に当たったら敵が消えるようにしてほしい。ゲームオーバー後にリセットボタンでゲームを再スタートできるようにしてほしい。

この質問に対して、ChatGPTはすぐにゲームのコードを提供してくれました。以下がそのコードだよ！

作成したプログラム

以下がシューティングゲームのコードです。コピーして、HTMLファイルとして保存して、ブラウザで開けば、すぐにプレイできるよ！

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>シューティングゲーム</title>

<style>

body { margin: 0; background-color: black; }

canvas { display: block; margin: 0 auto; background-color: #222; }

.game-over { color: white; font-size: 30px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; }

.instructions { color: white; font-size: 20px; text-align: center; position: absolute; top: 20px; width: 100%; }

.reset-btn { display: block; margin: 20px auto; padding: 10px 20px; font-size: 20px; background-color: #444; color: white; border: none; cursor: pointer; }

.reset-btn:hover { background-color: #666; }

</style>

</head>

<body>

<canvas id=“gameCanvas” width=“800” height=“600”></canvas>
<div class=“instructions”>
<p>← →: プレイヤーを動かす</p>
<p>スペース: 弾を発射</p>
<p>ゲームオーバー後、リセットボタンを押して再スタート</p>
</div>
<div id=“gameOver” class=“game-over”>ゲームオーバー！もう一度プレイしてください。</div>
<button id=“resetButton” class=“reset-btn” style=“display: none;”>リセット</button>

let player = {
x: canvas.width / 2,
y: canvas.height – 50,
width: 50,
height: 50,
speed: 8 // プレイヤーの移動速度が速くなりました
};

const bullets = [];
const enemies = [];
let gameOver = false;

function createEnemy() {
const enemyWidth = 40;
const enemyHeight = 40;
const x = Math.random() * (canvas.width – enemyWidth);
const y = -enemyHeight;
enemies.push({ x, y, width: enemyWidth, height: enemyHeight, speed: 2 }); // 敵の移動速度は元に戻しました
}

function updateGame() {
if (gameOver) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update player position
if (player.x < 0) player.x = 0;
if (player.x + player.width > canvas.width) player.x = canvas.width – player.width;

// Update bullets
bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
if (bullet.y < 0) bullets.splice(index, 1);

// Collision detection with enemies
enemies.forEach((enemy, enemyIndex) => {
if (bullet.x < enemy.x + enemy.width && bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height && bullet.y + bullet.height > enemy.y) {
enemies.splice(enemyIndex, 1);
bullets.splice(index, 1);
}
});
});

// Update enemies
enemies.forEach((enemy, index) => {
enemy.y += enemy.speed;
if (enemy.y + enemy.height > canvas.height) {
gameOver = true;
gameOverMessage.style.display = ‘block’;
resetButton.style.display = ‘block’;
}
});

// Draw player
ctx.fillStyle = ‘blue’;
ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw bullets
ctx.fillStyle = ‘white’;
bullets.forEach(bullet => ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height));

// Draw enemies
ctx.fillStyle = ‘red’;
enemies.forEach(enemy => ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height));

requestAnimationFrame(updateGame);
}

resetButton.addEventListener(‘click’, () => {
// Reset game
gameOver = false;
player.x = canvas.width / 2;
player.y = canvas.height – 50;
enemies.length = 0;
bullets.length = 0;
gameOverMessage.style.display = ‘none’;
resetButton.style.display = ‘none’;
updateGame();
});