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

No:4689

2383

←

Prev Next

→

Alligator Panic🐊.
Developer User3788｜Date and time 23/6/28 17:18:37
Build time 24.868 sec｜Game capacity 2.068KB｜

Script

了解です！ワニワニパニックのゲームを作成します。以下が実装例です。

ワニワニパニック

このHTMLファイルをブラウザで開くと、ワニワニパニックのゲームをプレイすることができます。ワニが表示されたセルをクリックすると、アラートが表示されてゲームがリセットされます。ワニは3秒ごとに自動的に移動します。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です！ワニワニパニックのゲームを作成します。以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ワニワニパニック</title>
  <meta charset="UTF-8">
  <style>
    #gameBoard {
      display: grid;
      grid-template-columns: repeat(15, 40px);
      grid-template-rows: repeat(10, 40px);
    }
    .cell {
      width: 40px;
      height: 40px;
      font-size: 32px;
      text-align: center;
      line-height: 40px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>ワニワニパニック</h1>
  <div id="gameBoard"></div>
  <script>
    // ゲームボードの初期化
    const gameBoard = document.getElementById('gameBoard');
    const cells = [];
    for (let i = 0; i < 150; i++) {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      cells.push(cell);
      gameBoard.appendChild(cell);
    }

// ワニの位置
    let waniPos = Math.floor(150 * Math.random());

// ワニがクリックされた時の処理
    cells[waniPos].addEventListener('click', function() {
      alert('ワニをつかまえた！');
      resetGame();
    });

// ワニが移動する関数
    function moveWani() {
      const newPos = Math.floor(150 * Math.random());
      cells[waniPos].textContent = '';
      cells[newPos].textContent = '🐊';
      waniPos = newPos;
    }

// ゲームのリセット
    function resetGame() {
      for (const cell of cells) {
        cell.textContent = '';
      }
      waniPos = Math.floor(150 * Math.random());
      cells[waniPos].textContent = '🐊';
    }

// ワニの自動移動（3秒ごとに移動する）
    setInterval(moveWani, 3000);
  </script>
</body>
</html>
```