AI game creator

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

No:37037

←

Prev Next

→

Pac-Man
Developer User16966｜Date and time 24/1/20 0:13:00
Build time 28.784 sec｜Game capacity 6.508KB｜

Script

To play the Pac-Man game, open a web browser and save the above code in a text file with a `.html` extension. Double-click the file to open it in the browser, and you will be able to play the game using the arrow keys on your keyboard. The objective is to eat all the dots on the game board without getting caught by the ghosts. Have fun playing Pac-Man!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      padding: 20px;
      background-color: black;
      position: relative;
    }

.pacman {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: yellow;
      position: absolute;
      transition: left 0.2s ease-in-out, top 0.2s ease-in-out;
    }

.ghost {
      width: 20px;
      height: 20px;
      background-color: red;
      position: absolute;
      transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
    }

.wall {
      width: 20px;
      height: 20px;
      background-color: blue;
      position: absolute;
    }

.dot {
      width: 5px;
      height: 5px;
      background-color: white;
      position: absolute;
      border-radius: 50%;
      top: 50%;
      left: 50%;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Store game state
    let pacman = { top: 220, left: 200, direction: 'right' };
    let score = 0;

// Generate game board
    const gameBoard = document.getElementById('game-board');

for (let row = 0; row < BOARD_SIZE; row++) {
      for (let column = 0; column < BOARD_SIZE; column++) {
        const cell = document.createElement('div');
        cell.setAttribute('class', 'wall');
        cell.style.top = row * 50 + 'px';
        cell.style.left = column * 50 + 'px';
        gameBoard.appendChild(cell);
      }
    }

// Add dots to the game board
    for (let i = 0; i < TOTAL_DOTS; i++) {
      const dot = document.createElement('div');
      dot.setAttribute('class', 'dot');
      dot.style.top = Math.floor(Math.random() * (BOARD_SIZE - 2) + 1) * 50 + 'px';
      dot.style.left = Math.floor(Math.random() * (BOARD_SIZE - 2) + 1) * 50 + 'px';
      gameBoard.appendChild(dot);
    }

// Move Pac-Man function
    function movePacman(direction) {
      const pacmanElement = document.getElementById('pacman');

switch (direction) {
        case 'left':
          if (pacman.left >= 50) {
            pacman.left -= 50;
          }
          break;
        case 'up':
          if (pacman.top >= 50) {
            pacman.top -= 50;
          }
          break;
        case 'right':
          if (pacman.left < (BOARD_SIZE - 1) * 50) {
            pacman.left += 50;
          }
          break;
        case 'down':
          if (pacman.top < (BOARD_SIZE - 1) * 50) {
            pacman.top += 50;
          }
          break;
      }

pacmanElement.style.left = pacman.left + 'px';
      pacmanElement.style.top = pacman.top + 'px';
    }

// Move ghosts function
    function moveGhosts() {
      const ghosts = document.getElementsByClassName('ghost');

Array.from(ghosts).forEach((ghost, index) => {
        switch (GHOSTS[index].direction) {
          case 'left':
            if (GHOSTS[index].left >= 50) {
              GHOSTS[index].left -= 50;
            } else {
              GHOSTS[index].direction = 'right';
            }
            break;
          case 'right':
            if (GHOSTS[index].left < (BOARD_SIZE - 1) * 50) {
              GHOSTS[index].left += 50;
            } else {
              GHOSTS[index].direction = 'left';
            }
            break;
        }

ghost.style.left = GHOSTS[index].left + 'px';
      });
    }

// Check collision function
    function checkCollision() {
      const pacmanElement = document.getElementById('pacman');
      const ghosts = document.getElementsByClassName('ghost');
      const dots = document.getElementsByClassName('dot');

// Check collision with ghosts
      Array.from(ghosts).forEach(ghost => {
        if (
          pacmanElement.style.top === ghost.style.top &&
          pacmanElement.style.left === ghost.style.left
        ) {
          endGame();
        }
      });

// Check collision with dots
      Array.from(dots).forEach(dot => {
        if (
          pacmanElement.style.top === dot.style.top &&
          pacmanElement.style.left === dot.style.left
        ) {
          dot.remove();
          score++;
          checkGameStatus();
        }
      });
    }

// Check game status function
    function checkGameStatus() {
      if (score === TOTAL_DOTS) {
        endGame('Congratulations! You won!');
      }
    }

// End game function
    function endGame(message = 'Game Over!') {
      clearInterval(gameInterval);
      alert(message);
    }

// Event listeners
    document.addEventListener('keydown', function (event) {
      switch (event.keyCode) {
        case KEY_CODE_LEFT:
          movePacman('left');
          break;
        case KEY_CODE_UP:
          movePacman('up');
          break;
        case KEY_CODE_RIGHT:
          movePacman('right');
          break;
        case KEY_CODE_DOWN:
          movePacman('down');
          break;
      }

checkCollision();
    });

// Render Pac-Man
    const pacmanElement = document.createElement('div');
    pacmanElement.setAttribute('id', 'pacman');
    pacmanElement.setAttribute('class', 'pacman');
    pacmanElement.style.left = pacman.left + 'px';
    pacmanElement.style.top = pacman.top + 'px';
    gameBoard.appendChild(pacmanElement);

// Render ghosts
    GHOSTS.forEach(ghost => {
      const ghostElement = document.createElement('div');
      ghostElement.setAttribute('id', ghost.id);
      ghostElement.setAttribute('class', 'ghost');
      ghostElement.style.top = ghost.top + 'px';
      ghostElement.style.left = ghost.left + 'px';
      gameBoard.appendChild(ghostElement);
    });

// Game loop
    const gameInterval = setInterval(moveGhosts, 500);
  </script>
</body>
</html>
```