AI game creator

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

No:38377

←

Prev Next

→

Pac-Man
Developer User17384｜Date and time 24/1/24 19:15:05
Build time 17.59 sec｜Game capacity 4.342KB｜

Script

Sure! Here's an example of a simple Pac-Man game implemented as a single HTML file using JavaScript:

To use this code, you will need to provide an image file named 'emozi_all/pacman.png' in the same directory as the HTML file. You can adjust the game configuration, such as the board size and layout, as needed.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Pac-Man game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man Game</title>
  <style>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 240px;
      height: 240px;
    }

.cell {
      width: 20px;
      height: 20px;
    }

.pacman {
      width: 20px;
      height: 20px;
      background-image: url('pacman.png');
    }

.dot {
      width: 8px;
      height: 8px;
      background-color: #FFC300;
      border-radius: 50%;
      margin: 6px;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Game state
    let pacmanPosition = { x: pacmanInitialPosition.x, y: pacmanInitialPosition.y };
    let dotsCount = 0;

// Render the game board
    function renderBoard() {
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = '';

for (let y = 0; y < boardSize; y++) {
        for (let x = 0; x < boardSize; x++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');

if (x === pacmanPosition.x && y === pacmanPosition.y) {
            const pacman = document.createElement('div');
            pacman.classList.add('pacman');
            cell.appendChild(pacman);
          } else {
            if (boardLayout[y][x] == '#') {
              cell.style.backgroundColor = '#000000';
            } else {
              const dot = document.createElement('div');
              dot.classList.add('dot');
              cell.appendChild(dot);
              dotsCount++;
            }
          }

gameBoard.appendChild(cell);
        }
      }
    }

// Handle key events to move the Pac-Man
    function handleKeyEvents(event) {
      let nextPosition = { x: pacmanPosition.x, y: pacmanPosition.y };

switch (event.key) {
        case 'ArrowUp':
          nextPosition.y = Math.max(0, pacmanPosition.y - 1);
          break;
        case 'ArrowDown':
          nextPosition.y = Math.min(boardSize - 1, pacmanPosition.y + 1);
          break;
        case 'ArrowLeft':
          nextPosition.x = Math.max(0, pacmanPosition.x - 1);
          break;
        case 'ArrowRight':
          nextPosition.x = Math.min(boardSize - 1, pacmanPosition.x + 1);
          break;
      }

if (boardLayout[nextPosition.y][nextPosition.x] !== '#') {
        pacmanPosition = nextPosition;
        const currentCell = document.querySelector('.pacman').parentNode;
        currentCell.innerHTML = '';

const nextCell = document.createElement('div');
        nextCell.classList.add('pacman');
        currentCell.appendChild(nextCell);

eatDot(nextPosition);
      }

if (dotsCount === 0) {
        alert('You won!');
        resetGame();
      }
    }

// Check if Pac-Man eats a dot
    function eatDot(position) {
      if (boardLayout[position.y][position.x] === '.') {
        boardLayout[position.y] =
          boardLayout[position.y].substring(0, position.x) +
          ' ' +
          boardLayout[position.y].substring(position.x + 1);

dotsCount--;

const dot = document.querySelector('.pacman').parentNode.querySelector('.dot');
        dot.parentNode.removeChild(dot);
      }
    }

// Reset the game
    function resetGame() {
      pacmanPosition = { x: pacmanInitialPosition.x, y: pacmanInitialPosition.y };
      dotsCount = 0;
      boardLayout.forEach((row, index) => {
        boardLayout[index] = row.replace(/ /g, '.');
      });
      renderBoard();
    }

// Initialize the game
    function initializeGame() {
      document.addEventListener('keydown', handleKeyEvents);
      renderBoard();
    }

// Start the game
    initializeGame();
  </script>
</body>
</html>
```

To use this code, you will need to provide an image file named 'pacman.png' in the same directory as the HTML file. You can adjust the game configuration, such as the board size and layout, as needed.