小学生でもつくれる！「1〜16クリックゲーム」の作り方【メモ帳だけでOK】

AI・プログラミング

小学生でもつくれる！「1〜16クリックゲーム」の作り方【メモ帳だけでOK】

こんにちは！今回は、パソコンとメモ帳だけで作れる
楽しい「1から16を順番にクリックするゲーム」の作り方を紹介します！

ゲームを作るってむずかしそう…？
だいじょうぶ！ChatGPTにお願いすれば、すぐにゲームができちゃうよ✨

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

 ChatGPTにお願いしよう！

まず、ChatGPTにこのように伝えてください：

 ChatGPTへのプロンプト（お願いする言葉）

４×４で１から１６の数字をランダムに並べて、１から順にクリックしていくゲームを作ってください。
制限時間は２０秒で、クリックできた数を最後に表示してください。
メモ帳だけで動くように、HTMLとJavaScriptで作ってください。

ChatGPTが作ってくれたコードをコピーしよう！

ChatGPTが下のような**プログラム（コード）**を出してくれます。
ぜんぶコピーしてください。

👇 ここからコピー！👇

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1〜16クリックゲーム</title>
<style>
body { font-family: sans-serif; text-align: center; }
#buttons {
display: grid;
grid-template-columns: repeat(4, 60px);
gap: 10px;
width: max-content;
margin: 0 auto;
}
.btn {
width: 60px; height: 60px;
font-size: 20px; background-color: #f0f0f0;
}
#startBtn { margin: 10px; padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body>
<h1>1〜16クリックゲーム</h1>
<p>1から順に押してね！<br>制限時間：20秒</p>
<button id="startBtn">スタート</button>
<p>タイマー：<span id="timer">20</span>秒</p>
<div id="buttons"></div>
<p id="result"></p>

<script>
const startBtn = document.getElementById("startBtn");
const buttonsDiv = document.getElementById("buttons");
const timerDisplay = document.getElementById("timer");
const result = document.getElementById("result");

let expected = 1;
let timeLeft = 20;
let timer;
let gameStarted = false;

function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
}

function createButtons() {
const nums = Array.from({length: 16}, (_, i) => i + 1);
shuffle(nums);
buttonsDiv.innerHTML = "";
nums.forEach(n => {
const btn = document.createElement("button");
btn.textContent = n;
btn.className = "btn";
btn.onclick = () => handleClick(n, btn);
buttonsDiv.appendChild(btn);
});
}

function handleClick(n, btn) {
if (!gameStarted) return;
if (n === expected) {
btn.disabled = true;
btn.style.backgroundColor = "#a0ffa0";
expected++;
if (expected > 16) {
endGame(true);
}
}
}

function startGame() {
expected = 1;
timeLeft = 20;
timerDisplay.textContent = timeLeft;
result.textContent = "";
gameStarted = true;
createButtons();
clearInterval(timer);
timer = setInterval(() => {
timeLeft--;
timerDisplay.textContent = timeLeft;
if (timeLeft <= 0) {
endGame(false);
}
}, 1000);
}

function endGame(success) {
clearInterval(timer);
gameStarted = false;
result.textContent = success
? `クリア！ぜんぶ押せたね！`
: `時間切れ！${expected - 1}個 正解したよ！`;
}

startBtn.onclick = startGame;
</script>
</body>
</html>

👆 ここまでコピー！👆

💾 3. メモ帳に貼りつけて、ゲームを保存しよう！

🧾 手順：

  1. パソコンで「メモ帳（Notepad）」を開く

  2. コピーしたコードをそのまま貼りつける

  3. 「ファイル」→「名前を付けて保存」をクリック

  4. ファイル名を click_game.html にする

  5. 「ファイルの種類」は 「すべてのファイル」 にしてね

  6. 「保存」ボタンをクリック！

ブラウザでひらいてあそぼう！

保存したファイル click_game.html をダブルクリックすると、
ゲームがブラウザ（ChromeやEdgeなど）で開くよ！

できたらこうなる！遊び方

  • 1〜16の数字がランダムに並ぶ

  • 「スタート」ボタンを押すと、ゲームスタート！

  • 1から順にクリックしていこう！

  • 20秒以内に何個押せるかな？

 おわりに

このゲームは、ChatGPTとメモ帳だけでつくれるかんたんなプログラミングです！
すこしずつコードを変えて、自分だけのゲームにもできるよ！

コメント

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