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

No:26422

←

Prev Next

→

Pac-Man
Developer User11165｜Date and time 23/11/30 14:50:43
Build time 115.511 sec｜Game capacity 4.754KB｜

Script

Pac-Man Game

To play the game, you would need to prepare the pictograms for `emozi_all/play.png`, `emozi_rabbit.png`, `emozi_apple.png`, and `emozi_all/ghost.png` and place them in the same directory as the HTML file. This implementation creates a simple Pac-Man game using a game board represented by a grid of cells. The player can control Pac-Man using arrow keys and Pac-Man's objective is to eat all the food on the board while avoiding the ghosts. The game keeps track of the score, and there are power pellets that activate for a limited time, allowing Pac-Man to eat the ghosts. The game ends if Pac-Man collides with a ghost.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pac-Man Game</title>
  <style>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
    }

.cell {
      width: 20px;
      height: 20px;
      border: 1px solid black;
      background-color: #000;
    }

.pacman {
      background-image: url('pacman.png');
      background-size: cover;
    }

.food {
      background-image: url('food.png');
      background-size: cover;
    }

.power-pellet {
      background-image: url('power_pellet.png');
      background-size: cover;
    }

.ghost {
      background-image: url('ghost.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>Pac-Man Game</h1>
  <div id="game-board"></div>

const gameBoard = document.getElementById('game-board');
    let pacmanPosition = { x: 0, y: 0 };
    let score = 0;
    let powerPelletActive = false;

const board = createGameBoard();
    drawGameBoard(board);

function drawGameBoard(board) {
      gameBoard.innerHTML = '';

for (let row = 0; row < ROWS; row++) {
        for (let col = 0; col < COLS; col++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');

switch (board[row][col]) {
            case 'food':
              cell.classList.add('food');
              break;
            case 'power-pellet':
              cell.classList.add('power-pellet');
              break;
            case 'pacman':
              cell.classList.add('pacman');
              break;
            case 'ghost':
              cell.classList.add('ghost');
              break;
          }

gameBoard.appendChild(cell);
        }
      }
    }

function handleKeydown(event) {
      const direction = DIRECTIONS[event.key];
      if (!direction) {
        return;
      }

const validMove = validateMove(direction);
      if (validMove) {
        movePacman(direction);
        handleCollision();
        updateScore();
        drawGameBoard(board);
      }
    }

function validateMove(direction) {
      const { x, y } = pacmanPosition;

const newPosX = x + direction.x;
      const newPosY = y + direction.y;

if (newPosX < 0 || newPosX >= COLS || newPosY < 0 || newPosY >= ROWS) {
        return false; // invalid move, outside game board
      }

const target = board[newPosY][newPosX];
      if (target === 'ghost') {
        gameOver();
        return false;
      }

return true;
    }

function movePacman(direction) {
      board[pacmanPosition.y][pacmanPosition.x] = null;

pacmanPosition.x += direction.x;
      pacmanPosition.y += direction.y;

board[pacmanPosition.y][pacmanPosition.x] = 'pacman';
    }

function handleCollision() {
      const { x, y } = pacmanPosition;
      const target = board[y][x];

if (target === 'food') {
        score++;
        board[y][x] = null;
      } else if (target === 'power-pellet') {
        score += 10;
        powerPelletActive = true;
        setTimeout(deactivatePowerPellet, 10000);
        board[y][x] = null;
      }
    }

function deactivatePowerPellet() {
      powerPelletActive = false;
    }

function updateScore() {
      const scoreDisplay = document.querySelector('#score');
      scoreDisplay.textContent = `Score: ${score}`;
    }

function gameOver() {
      alert('Game Over');
      location.reload();
    }

window.addEventListener('keydown', handleKeydown);

</script>
</body>
</html>
```

To play the game, you would need to prepare the pictograms for `pacman.png`, `food.png`, `power_pellet.png`, and `ghost.png` and place them in the same directory as the HTML file.

This implementation creates a simple Pac-Man game using a game board represented by a grid of cells. The player can control Pac-Man using arrow keys and Pac-Man's objective is to eat all the food on the board while avoiding the ghosts. The game keeps track of the score, and there are power pellets that activate for a limited time, allowing Pac-Man to eat the ghosts. The game ends if Pac-Man collides with a ghost.