AI game creator

Click here for free DL of the app version that can save data.

No:42687

←

Prev Next

→

もぐらたたき
Developer User18862｜Date and time 24/2/12 18:21:37
Build time 7.799 sec｜Game capacity 2.057KB｜

Script

了解です。以下に「もぐらたたき」のゲームの実装例を示します。

このプログラムは、「もぐらたたき」のゲームを実装しています。9つの穴が表示され、穴の中からランダムな場所にもぐらが現れます。もぐらをクリックするとスコアが加算されます。もぐらは1秒後に消え、次のもぐらが出現します。上記のプログラムをHTMLファイルに保存し、ブラウザで開くとプレイできる「もぐらたたき」のゲームが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

了解です。以下に「もぐらたたき」のゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>もぐらたたき</title>
  <style>
    #container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .hole {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    function randomIndex() {
      return Math.floor(Math.random() * 9);
    }

function setMole() {
      const holes = Array.from(document.getElementsByClassName('hole'));
      const index = randomIndex();
      holes[index].textContent = '🐹';
      holes[index].addEventListener('click', hitMole);

// もぐらを表示してから1秒後に消す
      setTimeout(() => {
        holes[index].textContent = '';
        holes[index].removeEventListener('click', hitMole);
        setMole();
      }, 1000);
    }

function hitMole() {
      const scoreElem = document.getElementById('score');
      scoreElem.textContent = Number(scoreElem.textContent) + 1;
    }

function init() {
      for (let i = 0; i < 9; i++) {
        const hole = document.createElement('div');
        hole.classList.add('hole');
        document.getElementById('container').appendChild(hole);
      }

setMole();
    }

init();
  </script>
</body>
</html>
```

このプログラムは、「もぐらたたき」のゲームを実装しています。9つの穴が表示され、穴の中からランダムな場所にもぐらが現れます。もぐらをクリックするとスコアが加算されます。もぐらは1秒後に消え、次のもぐらが出現します。

上記のプログラムをHTMLファイルに保存し、ブラウザで開くとプレイできる「もぐらたたき」のゲームが表示されます。