【足し算タイムアタック】30秒で何問とける？メモ帳で作れるかんたん算数ゲーム！

AI・プログラミング
2025.04.25

【足し算タイムアタック】30秒で何問とける？メモ帳で作れるかんたん算数ゲーム！

こんにちは！今回は、足し算の練習がゲーム感覚でできる「足し算タイムアタック」ゲームを作ってみましょう！
メモ帳とパソコンがあれば、誰でもつくれてすぐ遊べるよ🎮

◆ どんなゲーム？

  • 1〜50までの数字で足し算の問題が出てくる

  • 制限時間は30秒！できるだけ多くとこう！

  • スコアは自動でカウント、最後に点数が出る！

  • 足し算タイムアタック

◆ ChatGPTへのお願いのしかた（プロンプト）

「小学生向けの足し算タイムアタックゲームをHTMLとJavaScriptで作ってください。1〜50の数字でランダムに足し算の問題を出し、制限時間30秒で何問解けたかスコアを表示してください。メモ帳に貼って保存し、デスクトップで遊べるようにしてください。」

◆ メモ帳に貼るコード（UTF-8で保存）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>足し算タイムアタック</title>
<style>
body {
text-align: center;
font-family: sans-serif;
padding-top: 50px;
}
#question {
font-size: 2em;
margin-bottom: 20px;
}
input {
font-size: 1.5em;
width: 100px;
text-align: center;
}
button {
font-size: 1.2em;
margin-top: 10px;
}
#score, #timer {
font-size: 1.3em;
margin: 10px;
}
</style>
</head>
<body>
<h1>足し算タイムアタック</h1>
<div id="timer">のこり：30秒</div>
<div id="score">スコア：0</div>
<div id="question">？ ＋ ？ = </div>
<input type="number" id="answer" autofocus />
<br>
<button onclick="checkAnswer()">こたえる！</button>
<br><br>
<button onclick="startGame()">ゲームスタート！</button><script>
let num1, num2;
let score = 0;
let timeLeft = 30;
let timerId;function startGame() {
score = 0;
timeLeft = 30;
document.getElementById(“score”).textContent = “スコア：0”;
document.getElementById(“timer”).textContent = “のこり：30秒”;
nextQuestion();
timerId = setInterval(countdown, 1000);
}function countdown() {
timeLeft–;
document.getElementById(“timer”).textContent = `のこり：${timeLeft}秒`;
if (timeLeft <= 0) {
clearInterval(timerId);
alert(“時間切れ！スコア：” + score + “点”);
document.getElementById(“question”).textContent = “？ ＋ ？ = “;
}
}

function nextQuestion() {
num1 = Math.floor(Math.random() * 50) + 1;
num2 = Math.floor(Math.random() * 50) + 1;
document.getElementById(“question”).textContent = `${num1} ＋ ${num2} = `;
document.getElementById(“answer”).value = “”;
document.getElementById(“answer”).focus();
}

function checkAnswer() {
const userAnswer = Number(document.getElementById(“answer”).value);
if (userAnswer === num1 + num2) {
score++;
document.getElementById(“score”).textContent = `スコア：${score}`;
}
nextQuestion();
}
</script>
</body>
</html>

◆ あそびかた

  1. メモ帳を開く

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

  3. 名前を「add_game.html」にして、文字コードはUTF-8で保存！

  4. ダブルクリックでブラウザが開き、すぐに遊べる🎉

◆ まとめ

  • 足し算が自然と速くなる✨

  • 制限時間で集中力もつく！

  • メモ帳だけでOK！パソコンで簡単に遊べる！

コメント

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