🔺【メモ帳でOK】形を覚える「形記憶ゲーム」を作ろう！【図形クイズで脳トレ】

こんにちは！今回は、「どの形だったか」当てるゲームをつくります。
図形を見てすぐ消える…さて、何だったか覚えてる？😄
パソコンとメモ帳だけでつくれるよ！

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

◆ どんなゲーム？

三角・四角・丸などの形が1つ表示される
数秒後に消える
どの形だったか選んで当てよう！

👦「さっきの…丸だったっけ？」
👧「ちがうよ、四角だよー！」

形記憶ゲーム

◆ 必要なもの

✅ パソコン
✅ メモ帳（Windowsにあるやつ）
✅ ChatGPT（コードを聞く）

◆ ChatGPTへのお願いの仕方（プロンプト）

「子ども向けの図形記憶ゲームをHTMLとJavaScriptだけで作ってください。三角・丸・四角の形が一瞬表示され、数秒後に消えたあと、どの形だったかを選ぶクイズ形式にしてください。メモ帳で保存して遊べるようにして、初心者にもわかりやすいコードにしてください。」

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

html

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>形記憶ゲーム</title>

  <style>

    body {

      text-align: center;

      font-family: sans-serif;

      margin-top: 50px;

    }

    #shapeCanvas {

      margin: 20px auto;

      border: 2px solid #333;

      background-color: white;

    }

    button {

      font-size: 1.2em;

      padding: 10px 20px;

      margin: 10px;

      cursor: pointer;

    }

    #score {

      font-size: 1.5em;

      margin-bottom: 20px;

    }

  </style>

</head>

<body>

  <h1>形記憶ゲーム</h1>

  <div id="score">スコア：0</div>

  <canvas id="shapeCanvas" width="200" height="200"></canvas>

  <div id="buttons" style="display:none;">

    <button onclick="checkAnswer('circle')">まる</button>

    <button onclick="checkAnswer('square')">しかく</button>

    <button onclick="checkAnswer('triangle')">さんかく</button>

  </div>

  <button onclick="startGame()">ゲームスタート！</button>
  <script>

    const canvas = document.getElementById("shapeCanvas");

    const ctx = canvas.getContext("2d");

    let correctShape = "";

    let score = 0;
    function startGame() {

      score = 0;

      document.getElementById("score").textContent = "スコア：0";

      nextRound();

    }
    function drawShape(shape) {

      ctx.clearRect(0, 0, 200, 200);

      ctx.fillStyle = "skyblue";

      ctx.beginPath();
      if (shape === "circle") {

        ctx.arc(100, 100, 50, 0, Math.PI * 2);

        ctx.fill();

      } else if (shape === "square") {

        ctx.fillRect(50, 50, 100, 100);

      } else if (shape === "triangle") {

        ctx.moveTo(100, 40);

        ctx.lineTo(50, 150);

        ctx.lineTo(150, 150);

        ctx.closePath();

        ctx.fill();

      }

    }
    function nextRound() {

      const shapes = ["circle", "square", "triangle"];

      correctShape = shapes[Math.floor(Math.random() * shapes.length)];
      drawShape(correctShape);

      document.getElementById("buttons").style.display = "none";
      // 1.5秒後に消える

      setTimeout(() => {

        ctx.clearRect(0, 0, 200, 200);

        document.getElementById("buttons").style.display = "block";

      }, 1500);

    }
    function checkAnswer(selected) {

      if (selected === correctShape) {

        alert("せいかい！🎉");

        score++;

      } else {

        alert(`ざんねん！せいかいは「${shapeName(correctShape)}」でした`);

      }

      document.getElementById("score").textContent = `スコア：${score}`;

      nextRound();

    }

function shapeName(shape) { if (shape === "circle") return "まる"; if (shape === "square") return "しかく"; if (shape === "triangle") return "さんかく"; } </script> </body> </html>