【割り算タイムアタック】メモ帳で作る30秒チャレンジゲーム！

AI・プログラミング
2025.04.25

【割り算タイムアタック】メモ帳で作る30秒チャレンジゲーム！

こんにちは！今日は、割り算の練習が楽しくなる「割り算タイムアタック」ゲームを作ってみましょう😊
使うのは、パソコンとメモ帳だけ！作って・保存して・クリックで即あそべる！

◆ どんなゲーム？

  • 割り切れる割り算の問題がランダムに出る（例：36 ÷ 6 = ?）

  • 制限時間は30秒！

  • 正解するたびにスコアアップ💯

  • 割り算タイムアタック

◆ ChatGPTへのプロンプト例

小学生向けの「割り算タイムアタック」ゲームをHTMLとJavaScriptで作ってください。1〜9の数で割れるようにして、答えは整数にしてください。30秒以内に何問解けたかスコアを出し、メモ帳に貼って保存してデスクトップで遊べるようにしてください。

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

html
<!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() {
num2 = Math.floor(Math.random() * 9) + 1;
let result = Math.floor(Math.random() * 9) + 1;
num1 = num2 * result;
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. 「wari_game.html」という名前でUTF-8で保存！

  4. 保存したファイルをダブルクリック！すぐにブラウザであそべます✨

◆ まとめ

  • 割り算の「わる × わられる＝こたえ」が自然に身につく

  • 制限時間で集中力UP！

  • メモ帳でかんたんに作れるから、自分だけの算数アプリがすぐ完成🎉

コメント

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