AI game creator

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

No:51577

117

←

Prev Next

→

Pac-Man
Developer Winnerweiner2113｜Date and time 24/3/13 10:25:26
Build time 8.74 sec｜Game capacity 2.147KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man Game</title>
  <style>
    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #game {
      width: 320px;
      height: 320px;
      display: grid;
      grid-template-columns: repeat(10, 32px);
      grid-template-rows: repeat(10, 32px);
    }
    .cell {
      width: 32px;
      height: 32px;
      border: 1px solid black;
      background-color: #0079c6;
    }
    .pacman {
      background-image: url('pacman.png');
      background-size: cover;
    }
    .ghost {
      background-image: url('ghost.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="game"></div>
  <script>
    const gameBoard = document.getElementById('game');
    let pacmanPosition = 44;
    let ghostPosition = 55;

function movePacman(direction) {
      const newPosition = pacmanPosition + direction;
      if (newPosition < 0 || newPosition > 99) return;
      pacmanPosition = newPosition;
      render();
    }

document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowUp') movePacman(-10);
      if (event.key === 'ArrowDown') movePacman(10);
      if (event.key === 'ArrowLeft') movePacman(-1);
      if (event.key === 'ArrowRight') movePacman(1);
    });

setInterval(() => {
      const directions = [-10, 10, -1, 1];
      const randomDirection = directions[Math.floor(Math.random() * directions.length)];
      const newGhostPosition = ghostPosition + randomDirection;
      if (newGhostPosition >= 0 && newGhostPosition < 100) {
        ghostPosition = newGhostPosition;
        render();
      }
    }, 1000);

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