AI game creator

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

No:46771

←

Prev Next

→

Pac-Man
Developer User20233｜Date and time 24/2/26 0:48:34
Build time 8.469 sec｜Game capacity 1.865KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
    }
    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid black;
    }
    #pacman {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    let pacmanPosition = 0;
    const boardSize = 15;
    
    const renderGameBoard = () => {
      const gameBoard = document.getElementById('game-board');
      for (let i = 0; i < boardSize * boardSize; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        if (i === pacmanPosition) {
          cell.id = 'pacman';
        }
        gameBoard.appendChild(cell);
      }
    };
    
    const movePacman = (direction) => {
      document.getElementById('pacman').removeAttribute('id');
      if (direction === 'right' && pacmanPosition % boardSize !== boardSize - 1) {
        pacmanPosition++;
      } else if (direction === 'left' && pacmanPosition % boardSize !== 0) {
        pacmanPosition--;
      } else if (direction === 'down' && pacmanPosition + boardSize < boardSize * boardSize) {
        pacmanPosition += boardSize;
      } else if (direction === 'up' && pacmanPosition - boardSize >= 0) {
        pacmanPosition -= boardSize;
      }
      document.getElementById('game-board').children[pacmanPosition].id = 'pacman';
    };
    
    renderGameBoard();
    
    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowRight') {
        movePacman('right');
      } else if (event.key === 'ArrowLeft') {
        movePacman('left');
      } else if (event.key === 'ArrowDown') {
        movePacman('down');
      } else if (event.key === 'ArrowUp') {
        movePacman('up');
      }
    });
  </script>
</body>
</html>