小学生でもできる！ChatGPTとメモで作る「サメサメパニック」ゲーム

AI・プログラミング

小学生でもできる！ChatGPTとメモで作る「サメサメパニック」ゲーム

こんにちは！今回は、パソコンで「サメサメパニック」という楽しいゲームを作ってみよう！ゲームは「サメが穴から出てきたらタッチしてスコアを上げよう！」という簡単なルールだよ。ゲームの作り方をひとつずつ説明するから、みんなもぜひ挑戦してみてね。

完成するとこんなアプリになります→samesamepanic

ChatGPTに質問してみよう

まず、ChatGPTにこのように質問してみよう！これを「プロンプト」っていうんだよ。

プロンプト（質問）

ワニワニパニックのようなゲームをHTMLとJavaScriptで作ってください。
すべてサメの絵文字にして、「サメサメパニック」という名前にしてください。
遊び方を表示して、スタートボタン、スコア、ミス、評価も画面に表示してください。
メモ帳で使えるようにお願いします。

これをChatGPTに送ると、ゲームを作るためのプログラム（コード）がもらえるよ。

メモ帳でゲームを作ろう！

メモ帳を開こう

パソコンの「スタートメニュー」から「メモ帳」を開いてね。

コードを貼り付けよう

次に、ChatGPTからもらったコードをコピーして、メモ帳に貼り付けよう。コードが長いけど、ちゃんと貼り付けてね。

ファイルを保存しよう

  1. メモ帳のメニューから「ファイル」→「名前を付けて保存」をクリックしてね。

  2. 「ファイルの種類」を「すべてのファイル」に変更。

  3. ファイル名を samesame.html にして、好きな場所に保存してね。

ゲームを開こう！

保存した samesame.html をダブルクリックすると、ブラウザ（インターネットの画面）が開いてゲームが始まるよ！遊んでみてね。

ChatGPTが作ったプログラム

以下はChatGPTが作ってくれたプログラムだよ。これをメモ帳にコピーして保存しよう。

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サメサメパニック</title>
<style>
body { text-align: center; font-family: sans-serif; background: #e0f7fa; }
.hole {
display: inline-block;
width: 100px;
height: 100px;
background: #b2ebf2;
margin: 10px;
position: relative;
border-radius: 10px;
font-size: 40px;
line-height: 100px;
cursor: pointer;
}
#howto {
margin: 10px;
padding: 10px;
background: #e0ffff;
border-radius: 10px;
}
#controls {
margin-top: 15px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: darkblue;
}
</style>
</head>
<body>
<h1>サメサメパニック</h1><div id=“howto”>
<p>🕹️ <strong>遊び方：</strong></p>
<p>穴から出てくるサメ（🦈）をクリックしてスコアを増やそう！</p>
<p>30秒で何匹たたけるかチャレンジ！</p>
</div>

<p>⏱️ 残り時間: <span id=“timer”>30</span> 秒</p>
<p>🎯 スコア: <span id=“score”>0</span>（OK: <span id=“ok”>0</span> / MISS: <span id=“miss”>0</span>）</p>

<div id=“game”>
<div class=“hole”></div>
<div class=“hole”></div>
<div class=“hole”></div>
<div class=“hole”></div>
<div class=“hole”></div>
<div class=“hole”></div>
</div>

<div id=“controls”>
<button onclick=“startGame()”>▶️ スタート</button>
</div>

<div id=“result”></div>

<script>
const holes = document.querySelectorAll(‘.hole’);
const timerEl = document.getElementById(‘timer’);
const scoreEl = document.getElementById(‘score’);
const okEl = document.getElementById(‘ok’);
const missEl = document.getElementById(‘miss’);
const resultEl = document.getElementById(‘result’);

const monster = ‘🦈’;
let score = 0;
let ok = 0;
let miss = 0;
let time = 30;
let gameInterval;
let currentHole = null;
let missChecker;

function showShark() {
holes.forEach(hole => hole.textContent = ”);
currentHole = holes[Math.floor(Math.random() * holes.length)];
currentHole.textContent = monster;
currentHole.onclick = () => {
if (currentHole.textContent !== ”) {
score++;
ok++;
updateScore();
currentHole.textContent = ”;
}
};

clearTimeout(missChecker);
missChecker = setTimeout(() => {
if (currentHole && currentHole.textContent !== ”) {
miss++;
updateScore();
currentHole.textContent = ”;
}
}, 800);
}

function updateScore() {
scoreEl.textContent = score;
okEl.textContent = ok;
missEl.textContent = miss;
}

function getEvaluation(score) {
if (score >= 20) return “🌟 サメマスター！すごい！”;
if (score >= 10) return “👍 ナイスタッチ！”;
return “🦈 もっとサメを捕まえよう！”;
}

function startGame() {
clearInterval(gameInterval);
clearTimeout(missChecker);
score = 0;
ok = 0;
miss = 0;
time = 30;
updateScore();
timerEl.textContent = time;
holes.forEach(hole => hole.textContent = ”);
resultEl.textContent = ”;
active = true;

gameInterval = setInterval(() => {
if (time <= 0) {
clearInterval(gameInterval);
resultEl.innerHTML = `🎖️ 評価：${getEvaluation(score)}<br>合計 ${score} 点（OK: ${ok} / MISS: ${miss}）`;
active = false;
} else {
time–;
timerEl.textContent = time;
showShark();
}
}, 1000);
}
</script>
</body>
</html>

まとめ

これで「サメサメパニック」のゲームが完成！どれだけサメをたたけるか、家族やお友達と競ってみよう！もし、もっと難しくしたいときは、ゲームの時間を短くしたり、サメが出る速さを早くすることもできるよ。

このように、プログラムを少しずつ書いていくことで、楽しくプログラミングを学べるよ！次はどんなゲームを作ってみたい？もしアイデアがあったら、またChatGPTに聞いてみようね！

コメント

タイトルとURLをコピーしました