AI game creator

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

No:18630

←

Prev Next

→

Pac-Man
Developer User8231｜Date and time 23/9/30 7:53:38
Build time 14.532 sec｜Game capacity 4.429KB｜

Script

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

In this implementation, the game is displayed in a simple grid-like container. Pac-Man can be moved using the arrow keys, and the goal is to eat the food objects that spawn randomly on the grid. As Pac-Man eats the food, the score increases. The gameLoop function continuously updates the Pac-Man's position, checks for food collisions, and renders the changes on the screen.

←

Prev　Next

→ 　

Back　

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

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man Game</title>
  <style>
    #game-container {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      position: relative;
    }
    .pacman {
      width: 30px;
      height: 30px;
      position: absolute;
      background-image: url('pacman.png');
      background-size: contain;
    }
    .food {
      width: 20px;
      height: 20px;
      position: absolute;
      background-image: url('food.png');
      background-size: contain;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>

// Game state
    let score = 0;
    let direction = 'right';
    let pacmanPos = { x: 0, y: 0 };
    let foodPositions = [];

// Initialize game
    function initGame() {
      createGrid();
      spawnPacman();
      spawnFood();
      document.addEventListener('keydown', handleKeyPress);
    }
    
    // Create the game grid
    function createGrid() {
      const gameContainer = document.getElementById('game-container');
      gameContainer.style.width = `${gridSize * gameWidth}px`;
      gameContainer.style.height = `${gridSize * gameHeight}px`;
    }

// Spawn Pac-Man
    function spawnPacman() {
      const pacman = document.createElement('div');
      pacman.className = 'pacman';
      pacman.style.left = `${pacmanPos.x}px`;
      pacman.style.top = `${pacmanPos.y}px`;
      document.getElementById('game-container').appendChild(pacman);
    }

// Spawn food at random positions
    function spawnFood() {
      for (let i = 0; i < 5; i++) {
        const food = document.createElement('div');
        food.className = 'food';
        const foodPos = {
          x: Math.floor(Math.random() * gameWidth) * gridSize,
          y: Math.floor(Math.random() * gameHeight) * gridSize
        };
        food.style.left = `${foodPos.x}px`;
        food.style.top = `${foodPos.y}px`;
        document.getElementById('game-container').appendChild(food);
        foodPositions.push(foodPos);
      }
    }

// Handle arrow key presses to change Pac-Man's direction
    function handleKeyPress(event) {
      if (event.key === 'ArrowUp') {
        direction = 'up';
      } else if (event.key === 'ArrowDown') {
        direction = 'down';
      } else if (event.key === 'ArrowLeft') {
        direction = 'left';
      } else if (event.key === 'ArrowRight') {
        direction = 'right';
      }
    }

// Update Pac-Man's position
    function updatePacman() {
      if (direction === 'up') {
        pacmanPos.y -= gridSize;
      } else if (direction === 'down') {
        pacmanPos.y += gridSize;
      } else if (direction === 'left') {
        pacmanPos.x -= gridSize;
      } else if (direction === 'right') {
        pacmanPos.x += gridSize;
      }
      const pacman = document.querySelector('.pacman');
      pacman.style.left = `${pacmanPos.x}px`;
      pacman.style.top = `${pacmanPos.y}px`;
    }

// Check for collisions with food
    function checkCollisions() {
      const pacmanRect = document.querySelector('.pacman').getBoundingClientRect();
      foodPositions.forEach((foodPos, index) => {
        const foodRect = document.querySelectorAll('.food')[index].getBoundingClientRect();
        if (pacmanRect.top === foodRect.top && pacmanRect.left === foodRect.left) {
          // Remove the eaten food
          document.querySelectorAll('.food')[index].remove();
          foodPositions.splice(index, 1);
          score++;
          console.log(`Score: ${score}`);
        }
      });
    }

// Game loop
    function gameLoop() {
      updatePacman();
      checkCollisions();
      requestAnimationFrame(gameLoop);
    }

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