🌈【メモ帳だけでOK】色を覚える「色記憶ゲーム」を作ろう！【小学生でもできる！】

AI・プログラミング
2025.04.25

🌈【メモ帳だけでOK】色を覚える「色記憶ゲーム」を作ろう！【小学生でもできる！】

こんにちは！今日は、色を記憶して当てる楽しい脳トレゲームをつくってみましょう！
使うのは、パソコンとメモ帳だけ。とっても簡単です😊

◆ どんなゲーム？

  • カラフルな色が一瞬だけ表示される

  • そのあと「どの色だった？」と質問される

  • 正しい色を選ぶとスコアアップ！

👦「赤、青、緑…あれ？どれだったっけ？」
👧「わかった！緑だー！」

記憶力＆集中力アップ間違いなし！

色記憶ゲーム

◆ 準備するもの

✅ パソコン
✅ メモ帳（WindowsにあるやつでOK）
✅ ChatGPT（コードのお助け）

◆ ChatGPTへのお願いの仕方

「子ども向けの色記憶ゲームを、HTMLとJavaScriptだけで作ってください。最初に色が1つ表示され、数秒後に消えて、どの色だったか選ぶクイズ形式にしてください。初心者でもメモ帳で保存して遊べるようにお願いします。」

◆ ゲームコードはこちら！（メモ帳に貼るだけ）

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>色記憶ゲーム</title>
<style>
body {
text-align: center;
font-family: sans-serif;
margin-top: 50px;
}
#colorBox {
width: 150px;
height: 150px;
margin: 20px auto;
border: 2px solid #333;
}
button {
font-size: 1.2em;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
#score {
font-size: 1.5em;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>色記憶チャレンジ！</h1>
<div id="score">スコア：0</div>
<div id="colorBox"></div>
<div id="buttons" style="display: none;">
<button onclick="checkAnswer('red')">赤</button>
<button onclick="checkAnswer('green')">緑</button>
<button onclick="checkAnswer('blue')">青</button>
<button onclick="checkAnswer('yellow')">黄色</button>
</div>
<button onclick="startGame()">ゲームスタート！</button><script>
const colors = [‘red’, ‘green’, ‘blue’, ‘yellow’];
let correctColor = ”;
let score = 0;function startGame() {
score = 0;
document.getElementById(“score”).textContent = “スコア：0”;
nextRound();
}

function nextRound() {
correctColor = colors[Math.floor(Math.random() * colors.length)];
const colorBox = document.getElementById(“colorBox”);
const buttons = document.getElementById(“buttons”);

colorBox.style.backgroundColor = correctColor;
buttons.style.display = “none”;

// 1.5秒で色を消す
setTimeout(() => {
colorBox.style.backgroundColor = “white”;
buttons.style.display = “block”;
}, 1500);
}

function checkAnswer(selectedColor) {
if (selectedColor === correctColor) {
alert(“せいかい！🎉”);
score++;
} else {
alert(`ちがうよ！せいかいは「${colorName(correctColor)}」でした`);
}
document.getElementById(“score”).textContent = `スコア：${score}`;
nextRound();
}

function colorName(color) {
switch(color) {
case ‘red’: return ‘赤’;
case ‘green’: return ‘緑’;
case ‘blue’: return ‘青’;
case ‘yellow’: return ‘黄色’;
}
}
</script>
</body>
</html>

◆ あそびかた

  1. メモ帳を開く

  2. 上のコードをコピーして貼りつける

  3. 「irokioku.html」という名前で保存

  4. ファイルをダブルクリックして、すぐに遊べる！

◆ アレンジしてみよう！

  • 色の数をふやす（オレンジ、むらさき など）

  • 難易度モードをつける（表示時間を短くする）

  • 音をつけてもっと楽しく！

👇ChatGPTにこんなふうに聞いてみよう！

「もっとたくさんの色を使って」
「タイマーをつけて時間制にして」

◆ まとめ

  • 色をおぼえて、選んで、楽しく脳トレ！

  • メモ帳だけでこんなにおもしろいゲームが作れる！

  • プログラミングがはじめてでもOK！

コメント

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