【九九タイムアタック】メモ帳で作れる！かけ算ランダムクイズゲーム！

こんにちは！今日は、九九（かけ算）を楽しく覚えられる「九九タイムアタック」ゲームを作ってみましょう！
パソコンとメモ帳があればOK！クリックで答えるだけだから小学生でも安心🎉

◆ どんなゲーム？
◆ ChatGPTへのお願いのしかた（プロンプト）
◆ コード（メモ帳に貼って保存）
◆ あそびかた
◆ まとめ

◆ どんなゲーム？

ランダムに九九の問題が出る（例：3 × 6 = ?）
制限時間30秒で何問解けるかチャレンジ！
点数がリアルタイムで表示される💯
かけ算ランダムクイズゲーム

「九九タイムアタック」ゲーム

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

「小学生向けの九九ランダムクイズをHTMLとJavaScriptで作ってください。制限時間30秒で何問正解できるかスコアを出してください。メモ帳で保存して遊べるようにしてください。」

◆ コード（メモ帳に貼って保存）

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() {

      num1 = Math.floor(Math.random() * 9) + 1;

      num2 = Math.floor(Math.random() * 9) + 1;

      document.getElementById("question").textContent = `${num1} × ${num2} = `;

      document.getElementById("answer").value = "";

      document.getElementById("answer").focus();

    }