🧠【メモ帳で作れる】記憶力クイズゲームを作ろう！【楽しく脳トレ】

未分類

🧠【メモ帳で作れる】記憶力クイズゲームを作ろう！【楽しく脳トレ】

こんにちは！今回は遊びながら記憶力をきたえるクイズゲームを、パソコンとメモ帳だけで作ります！

◆ どんなゲーム？

  • 数字が一瞬だけ表示される

  • そのあと、何の数字だったかを思い出して入力！

  • 正解すればスコアアップ！全問正解できるかな？😄

  • 記憶力クイズゲーム

◆ 準備するもの

✅ パソコン
✅ メモ帳（Windows標準のやつでOK）
✅ ChatGPT（コードを作ってくれる）

◆ ChatGPTへのお願いのしかた

「数字を記憶するゲームをHTMLとJavaScriptだけで作ってください。数字が一瞬だけ表示されて、プレイヤーが入力して当てる形式でお願いします。メモ帳で保存して遊べる形で、初心者や子供でもわかりやすく。」

◆ メモ帳に貼るだけ！記憶力クイズのコード

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>記憶力クイズゲーム</title>
<style>
body {
font-family: sans-serif;
text-align: center;
margin-top: 100px;
}
#number, #question {
font-size: 2em;
margin: 20px;
}
input {
font-size: 1.5em;
padding: 10px;
width: 150px;
}
button {
font-size: 1.2em;
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
#score {
font-size: 1.5em;
margin: 20px;
}
</style>
</head>
<body>
<h1>記憶力チャレンジ！</h1>
<div id="score">スコア：0</div>
<div id="number"></div>
<div id="question" style="display:none;">
数字を入力してください：<br>
<input type="text" id="answer" maxlength="5">
<br>
<button onclick="checkAnswer()">こたえる！</button>
</div>
<button onclick="startGame()">ゲームスタート！</button>

<script>
let currentNumber = "";
let score = 0;

function startGame() {
score = 0;
document.getElementById("score").textContent = "スコア：0";
nextRound();
}

function nextRound() {
// 3〜5桁のランダムな数字を作成
const length = Math.floor(Math.random() * 3) + 3;
currentNumber = "";
for (let i = 0; i < length; i++) {
currentNumber += Math.floor(Math.random() * 10);
}

// 数字を表示 → 一瞬後に非表示
const numberDiv = document.getElementById("number");
numberDiv.textContent = currentNumber;
document.getElementById("question").style.display = "none";
document.getElementById("answer").value = "";

setTimeout(() => {
numberDiv.textContent = "";
document.getElementById("question").style.display = "block";
document.getElementById("answer").focus();
}, 1500); // 1.5秒で消える
}

function checkAnswer() {
const userAnswer = document.getElementById("answer").value;
if (userAnswer === currentNumber) {
score++;
alert("正解！🎉");
} else {
alert(`ざんねん！正解は「${currentNumber}」でした`);
}
document.getElementById("score").textContent = `スコア：${score}`;
nextRound();
}
</script>
</body>
</html>

◆ あそびかた

  1. メモ帳にコードをコピー＆ペースト

  2. 「kiokuquiz.html」として保存（文字コードはUTF-8）

  3. ファイルをダブルクリックして開く

  4. 「ゲームスタート！」を押して、数字を記憶 → 回答！

◆ アレンジしてみよう！

  • 表示時間をもっと短く

  • 桁数をランダムで増やす

  • 正解連続数でボーナス表示🎁

アレンジしたい内容があれば、ChatGPTに聞いてみてね👇

「もっと難しいバージョンにして」
「ひらがなを覚えるゲームにしたい」
「画像を記憶するゲームにしたい」

◆ まとめ

  • ゲームをしながら記憶力アップ！🧠

  • メモ帳だけで、オリジナルクイズが作れる！

  • プログラミングがわからなくても、ChatGPTで大丈夫！

コメント

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