AI game creator

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

No:40185

119

←

Prev Next

→

Pac-Man
Developer User18010｜Date and time 24/2/1 15:31:07
Build time 17.284 sec｜Game capacity 3.944KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!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>
    #gameContainer {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

#game {
      width: 400px;
      height: 400px;
      border: 2px solid black;
      position: relative;
    }

.pacman {
      position: absolute;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: yellow;
      transition: all 0.2s ease;
    }

.food {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: white;
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="game"></div>
  </div>

// Initialize Pac-Man position
    let pacmanX = 180;
    let pacmanY = 180;

// Initialize food positions
    const foodPositions = [
      { x: 40, y: 40 },
      { x: 120, y: 40 },
      { x: 200, y: 40 },
      { x: 280, y: 40 },
      { x: 360, y: 40 },
      { x: 40, y: 120 },
      { x: 40, y: 200 },
      { x: 40, y: 280 },
      { x: 40, y: 360 },
      { x: 120, y: 360 },
      { x: 200, y: 360 },
      { x: 280, y: 360 },
      { x: 360, y: 360 }
    ];

// Draw initial food
    foodPositions.forEach(foodPos => {
      createFood(foodPos.x, foodPos.y);
    });

// Draw Pac-Man
    pacman.classList.add('pacman');
    gameContainer.appendChild(pacman);

// Move Pac-Man
    function movePacman(direction) {
      switch (direction) {
        case 'up':
          pacmanY -= 40;
          break;
        case 'down':
          pacmanY += 40;
          break;
        case 'left':
          pacmanX -= 40;
          break;
        case 'right':
          pacmanX += 40;
          break;
      }

// Check if Pac-Man collides with any food
      foodPositions.forEach((foodPos, index) => {
        if (pacmanX === foodPos.x && pacmanY === foodPos.y) {
          // Remove food and update score
          gameContainer.removeChild(gameContainer.childNodes[index + 1]);
          foodPositions.splice(index, 1);
          score++;
        }
      });

// Update Pac-Man position
      pacman.style.left = `${pacmanX}px`;
      pacman.style.top = `${pacmanY}px`;

// Check if all food is eaten
      if (foodPositions.length === 0) {
        alert(`Game over! Your score: ${score}`);
        restartGame(); // Restart the game
      }
    }

// Listen for arrow key presses
    document.addEventListener('keydown', function(event) {
      switch (event.keyCode) {
        case 37: // Left arrow
          movePacman('left');
          break;
        case 38: // Up arrow
          movePacman('up');
          break;
        case 39: // Right arrow
          movePacman('right');
          break;
        case 40: // Down arrow
          movePacman('down');
          break;
      }
    });

// Restart the game
    function restartGame() {
      pacmanX = 180;
      pacmanY = 180;
      score = 0;
      gameContainer.innerHTML = ''; // Clear the game container

// Draw initial food
      foodPositions.forEach(foodPos => {
        createFood(foodPos.x, foodPos.y);
      });

// Add pacman back to the game container
      gameContainer.appendChild(pacman);
    }
  </script>
</body>
</html>