AI game creator

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

No:21160

←

Prev Next

→

パックマン
Developer User9363｜Date and time 23/10/13 21:59:34
Build time 99.128 sec｜Game capacity 2.868KB｜

Script

了解しました。以下にパックマンのゲームを実装したHTMLファイルの例を示します。

このHTMLファイルをブラウザで開くと、パックマンとゴーストが表示されます。矢印キーを押すことでパックマンを移動させることができます。また、ゴーストはランダムに移動します。ゲームボードのサイズや程度の設定、パックマンやゴーストの位置やデザインなどは必要に応じて変更してください。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。以下にパックマンのゲームを実装したHTMLファイルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pacman Game</title>
  <style>
    #game-board {
      width: 600px;
      height: 400px;
      background-color: #000;
      position: relative;
    }
    
    #pacman {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: yellow;
      position: absolute;
      left: 0;
      top: 0;
      transition: all 0.2s ease-in-out;
    }
    
    .ghost {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      transition: all 0.2s ease-in-out;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    window.addEventListener('DOMContentLoaded', (event) => {
      // ゲームボードの要素を取得
      const gameBoard = document.querySelector('#game-board');
      
      // パックマンの要素を作成
      const pacman = document.createElement('div');
      pacman.id = 'pacman';
      pacman.innerHTML = '👻';
      gameBoard.appendChild(pacman);
      
      // ゴーストの要素を作成
      const ghost = document.createElement('div');
      ghost.className = 'ghost';
      ghost.innerHTML = '👻';
      gameBoard.appendChild(ghost);
      
      // パックマンの初期位置
      let pacmanX = 0;
      let pacmanY = 0;
      
      // 矢印キーのイベントリスナーを追加
      document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowRight') {
          pacmanX += 40;
        } else if (event.key === 'ArrowLeft') {
          pacmanX -= 40;
        } else if (event.key === 'ArrowDown') {
          pacmanY += 40;
        } else if (event.key === 'ArrowUp') {
          pacmanY -= 40;
        }
        
        pacman.style.left = pacmanX + 'px';
        pacman.style.top = pacmanY + 'px';
      });
      
      // ゴーストの初期位置
      let ghostX = 400;
      let ghostY = 200;
      
      // ゴーストの移動処理
      setInterval(() => {
        const randomX = Math.floor(Math.random() * 3) - 1;
        const randomY = Math.floor(Math.random() * 3) - 1;
        ghostX += randomX * 40;
        ghostY += randomY * 40;
        
        ghost.style.left = ghostX + 'px';
        ghost.style.top = ghostY + 'px';
      }, 1000);
    });
  </script>
</body>
</html>
```