AI game creator

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

No:40103

←

Prev Next

→

Pac-Man
Developer User17968｜Date and time 24/2/1 3:12:44
Build time 13.623 sec｜Game capacity 3.175KB｜

Script

Copy the above code into a blank HTML file and open it in a web browser (on a computer or smartphone). The game will start and you can control Pac-Man using the arrow keys. Pac-Man will move around the canvas and wrap around when reaching the edges. The game is implemented using HTML and JavaScript and the Pac-Man character is drawn using simple shapes and colors. Enjoy playing Pac-Man!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Pac-Man Game</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        background: #000;
        display: block;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>
    <script>
      // Pac-Man Game

// Initialize the game canvas
      const canvas = document.getElementById("gameCanvas");
      const context = canvas.getContext("2d");
      const gridSize = 20;
      const pacmanRadius = 10;
      const pacmanMouth = 0.2;
      const movementStep = 2;
      const pacmanSpeed = 8;

// Define Pac-Man's initial position and direction
      let pacmanX = canvas.width / 2;
      let pacmanY = canvas.height / 2;
      let pacmanDirection = 0; // 0: right, 1: down, 2: left, 3: up

// Move Pac-Man based on keypress events
      function handleKeyDown(event) {
        switch (event.key) {
          case "ArrowRight":
            pacmanDirection = 0;
            break;
          case "ArrowDown":
            pacmanDirection = 1;
            break;
          case "ArrowLeft":
            pacmanDirection = 2;
            break;
          case "ArrowUp":
            pacmanDirection = 3;
            break;
        }
      }

document.addEventListener("keydown", handleKeyDown);

// Update Pac-Man's position and redraw the game canvas
      function updateGame() {
        context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

// Draw Pac-Man
        context.beginPath();
        context.arc(
          pacmanX,
          pacmanY,
          pacmanRadius,
          (pacmanDirection + pacmanMouth) * Math.PI,
          (pacmanDirection + 2 - pacmanMouth) * Math.PI
        );
        context.lineTo(pacmanX, pacmanY);
        context.fillStyle = "yellow";
        context.fill();
        context.closePath();

// Move Pac-Man
        switch (pacmanDirection) {
          case 0: // Right
            pacmanX += movementStep;
            break;
          case 1: // Down
            pacmanY += movementStep;
            break;
          case 2: // Left
            pacmanX -= movementStep;
            break;
          case 3: // Up
            pacmanY -= movementStep;
            break;
        }

// Wrap Pac-Man around the canvas edges
        if (pacmanX > canvas.width) {
          pacmanX = 0;
        } else if (pacmanX < 0) {
          pacmanX = canvas.width;
        }
        if (pacmanY > canvas.height) {
          pacmanY = 0;
        } else if (pacmanY < 0) {
          pacmanY = canvas.height;
        }

requestAnimationFrame(updateGame);
      }

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