小学生でも作れる！HTMLで「鬼たたきゲーム」を作ろう！

小学生でも作れる！HTMLで「鬼たたきゲーム」を作ろう！
📌 どんなゲーム？
🧠 ChatGPTへのお願い（プロンプト）
💾 ゲームの作り方（メモ帳でできるよ！）
💡 レベルアップのアイデア！

小学生でも作れる！HTMLで「鬼たたきゲーム」を作ろう！

こんにちは！今回は、パソコンのメモ帳とChatGPTを使って、かんたんに作れる「鬼たたきゲーム」を紹介します！

このゲームでは、鬼（👹）をハンマー（🔨）でたたくよ！プログラミング初心者でも楽しく作れるから、自由研究にもピッタリ！
完成するとこんなアプリになります→oninohatake

📌 どんなゲーム？

4×4のマスに鬼（👹）がランダムに登場！
鬼をクリックすると「💥」が出て得点が入る！
ハンマー型のカーソルで遊べる！
制限時間は20秒！
最後にスコアと評価が表示される！

🧠 ChatGPTへのお願い（プロンプト）

まず、ChatGPTにこんなふうにお願いしました：

matlab

鬼たたきゲームを作ってください。鬼は4×4のマスの中に出現します。クリックはハンマー型のポインタでお願いします。外部画像を使わず絵文字で作成してください。鬼の絵文字👹はマスの中いっぱいになるようにフォントサイズを400%にしてください。ゲーム時間は20秒、スコアと成功数を表示し、評価コメントもお願いします。スタートボタンもつけてください。

これで、ChatGPTがコードを作ってくれます！

💾 ゲームの作り方（メモ帳でできるよ！）

① メモ帳を開こう

Windowsなら「スタート」→「メモ帳」
Macなら「テキストエディット」→「プレーンテキスト」に設定！

② コードをコピー＆貼り付け！

下のコードを全部コピーして、メモ帳に貼り付けよう：

html

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>たたけ！鬼の畑👊</title>

  <style>

    body {

      text-align: center;

      font-family: sans-serif;

      background-color: #fefbd8;

      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text x="0" y="24" font-size="24">🔨</text></svg>') 16 16, auto;

    }

    h1 {

      font-size: 2em;

    }

    #field {

      display: grid;

      grid-template-columns: repeat(4, 100px);

      grid-gap: 10px;

      justify-content: center;

      margin-top: 20px;

    }

    .hole {

      width: 100px;

      height: 100px;

      background: #bada55;

      font-size: 400%;

      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text x="0" y="24" font-size="24">🔨</text></svg>') 16 16, auto;

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: 10px;

    }

    button {

      margin-top: 20px;

      font-size: 1.2em;

      padding: 10px 20px;

    }

    #info {

      margin-top: 10px;

    }

  </style>

</head>

<body>

  <h1>たたけ！鬼の畑👊</h1>

  <div id="score">スコア: 0 叩いた回数: 0</div>

  <div id="field"></div>

  <div id="info"></div>

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

    const enemy = "👹";

    let score = 0;

    let hitCount = 0;

    let timeLimit = 20;

    let timer, showTimer;

    let currentHole = -1;
    const field = document.getElementById("field");

    const scoreBoard = document.getElementById("score");

    const info = document.getElementById("info");
    for (let i = 0; i < 16; i++) {

      const div = document.createElement("div");

      div.className = "hole";

      div.dataset.index = i;

      div.onclick = () => hit(i);

      field.appendChild(div);

    }
    function updateScore() {

      scoreBoard.textContent = `スコア: ${score} 叩いた回数: ${hitCount}`;

    }
    function showEnemy() {

      clearEnemy();

      currentHole = Math.floor(Math.random() * 16);

      const hole = field.children[currentHole];

      hole.textContent = enemy;

    }
    function clearEnemy() {

      if (currentHole !== -1) {

        const hole = field.children[currentHole];

        hole.textContent = "";

        currentHole = -1;

      }

    }
    function hit(index) {

      if (index === currentHole) {

        score += 10;

        hitCount++;

        updateScore();

        const hole = field.children[currentHole];

        hole.textContent = "💥";

        setTimeout(() => {

          if (hole.textContent === "💥") hole.textContent = "";

        }, 200);

        currentHole = -1;

      }

    }
    function startGame() {

      score = 0;

      hitCount = 0;

      updateScore();

      info.textContent = "";

      runGame();

    }
    function runGame() {

      let time = timeLimit;

      timer = setInterval(() => {

        time--;

        if (time <= 0) {

          clearInterval(timer);

          clearInterval(showTimer);

          clearEnemy();

          endGame();

        }

      }, 1000);
      showTimer = setInterval(() => {

        clearEnemy();

        showEnemy();

      }, 2400); // 鬼の出現スピード（ゆっくり）

    }