数をかぞえよう！ゲームを作ってみよう！

こんにちは！今日は「数をかぞえるゲーム」を作る方法を紹介するよ！
動物の数を数えて、正解できたら嬉しいゲームです。さっそく始めてみよう！

完成したものを確認しよう→数をかぞえるゲーム

必要なもの

パソコン（または、インターネットが使えるPC）
メモ帳（Windowsのメモ帳やMacのテキストエディットを使うよ）
インターネット（ChatGPTに助けてもらうために使います！）

ChatGPTにお願いしよう！

まずは、ChatGPT（チャットジーピーティー）にお願いして、ゲームのプログラムを作ってもらうよ。
以下のように聞いてみよう：

プロンプト：

ChatGPTがプログラムを作ってくれるよ！できたら、そのコードをコピーしよう。

メモ帳に貼り付けて保存しよう！

プログラムができたら、次はそれをメモ帳に貼り付けて保存するよ。
手順：

メモ帳（またはテキストエディット）を開くよ。
ChatGPTがくれたプログラムコードをコピー（Ctrl + C）して、メモ帳に貼り付け（Ctrl + V）するよ。
ファイルメニューから「名前を付けて保存」を選んで、名前を「count_game.html」にして保存するよ。
- 注意！ 保存する場所はわかりやすいところにしてね！（たとえばデスクトップ）

ゲームを開いてみよう！

保存できたら、そのファイルをダブルクリックして、ブラウザで開こう！
すると、動物の数をかぞえるゲームが始まるよ！問題が出てきて、数字を入力して「こたえる」ボタンを押すと、正解かどうかがわかるよ。

10問終了したらスコアを確認！

ゲームが終わると、あなたのスコアが表示されるよ！
「パーフェクト！」「よくできました！」など、評価もしてくれるから、楽しく点数をチェックしてね！

もう一度やりたくなったら？

ゲームが終わったら、「もういちどやる」というボタンが表示されるよ。
このボタンを押すと、ゲームがリセットされて、また最初からやり直せるんだ！

もっと良くするための提案

動物を増やす：いろんな動物（例えば、象や犬、猫など）を加えてみよう！
難易度を上げる：動物の数を増やして、もっと難しくしてみよう！
スコア表示を増やす：「何問正解したか」を表示して、もっとやる気を出させよう！

作ったプログラム

こちらが実際に作ったプログラムです。どんな感じで動くか見てみよう！

html

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>数をかぞえよう！</title>

  <style>

    body { font-family: sans-serif; text-align: center; background: #f0f8ff; }

    .animals { font-size: 40px; line-height: 60px; margin: 20px; }

    input { font-size: 20px; width: 50px; text-align: center; }

    button { font-size: 20px; padding: 10px 20px; margin: 10px; }

    #scoreArea { font-size: 24px; margin-top: 20px; }

  </style>

</head>

<body>

  <h1>動物をかぞえよう！</h1>

  <div class="animals" id="animalArea"></div>

  <p id="question">問題を読み込み中...</p>

  <input type="number" id="answer" placeholder="？">

  <button onclick="checkAnswer()">こたえる</button>

  <p id="result"></p>

  <div id="scoreArea"></div>

  <button id="retryBtn" onclick="resetGame()" style="display:none;">もういちどやる</button>
  <script>

    const animalList = [

      { name: "牛", emoji: "🐄", unit: "頭" },

      { name: "鶏", emoji: "🐔", unit: "匹" },

      { name: "豚", emoji: "🐖", unit: "頭" },

      { name: "ひつじ", emoji: "🐑", unit: "匹" }

    ];
    let animals = [];

    let targetAnimal = "";

    let correctCount = 0;

    let currentQuestion = 0;

    let score = 0;
    function createAnimals() {

      animals = [];

      const animalArea = document.getElementById("animalArea");

      animalArea.innerHTML = "";

      const counts = {};
      for (let i = 0; i < 20; i++) {

        const a = animalList[Math.floor(Math.random() * animalList.length)];

        animals.push(a);

        counts[a.name] = (counts[a.name] || 0) + 1;

        animalArea.innerHTML += a.emoji + " ";

      }
      const target = animalList[Math.floor(Math.random() * animalList.length)];

      targetAnimal = target.name;

      correctCount = counts[targetAnimal] || 0;

      document.getElementById("question").textContent = `${target.name}は何${target.unit}いるかな？`;

    }
    function checkAnswer() {

      const userAnswer = Number(document.getElementById("answer").value);

      const result = document.getElementById("result");
      if (userAnswer === correctCount) {

        result.textContent = "🎉せいかい！";

        result.style.color = "green";

        score++;

      } else {

        result.textContent = `❌ざんねん！ せいかいは ${correctCount} でした`;

        result.style.color = "red";

      }
      currentQuestion++;

      if (currentQuestion >= 10) {

        showScore();

      } else {

        setTimeout(() => {

          result.textContent = "";

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

          createAnimals();

        }, 1500);

      }

    }
    function showScore() {

      document.getElementById("question").textContent = "";

      document.getElementById("animalArea").innerHTML = "";

      document.getElementById("result").textContent = "";

      document.getElementById("answer").style.display = "none";

      document.querySelector("button").style.display = "none";
      const scoreArea = document.getElementById("scoreArea");

      let evaluation = "";

      if (score === 10) {

        evaluation = "🌟 パーフェクト！すごい！";

      } else if (score >= 7) {

        evaluation = "👍 よくできました！";

      } else if (score >= 4) {

        evaluation = "🙂 がんばったね！";

      } else {

        evaluation = "📘 またちょうせんしてね！";

      }
      scoreArea.innerHTML = `あなたのスコアは <strong>${score} / 10</strong><br>${evaluation}`;

      document.getElementById("retryBtn").style.display = "inline-block";

    }
    function resetGame() {

      currentQuestion = 0;

      score = 0;

      document.getElementById("answer").style.display = "inline-block";

      document.querySelector("button").style.display = "inline-block";

      document.getElementById("retryBtn").style.display = "none";

      document.getElementById("scoreArea").innerHTML = "";

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

      createAnimals();

    }