AI game creator

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

No:26462

107

←

Prev Next

→

Pac-Man
Developer SHADOWS_KING1255｜Date and time 23/12/1 2:49:29
Build time 29.883 sec｜Game capacity 2.579KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Get the canvas element and its context
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Define the Pac-Man character
    const pacMan = {
      x: 50,
      y: 50,
      radius: 20,
      speed: 5,
      direction: 0, // 0: right, 1: down, 2: left, 3: up
      mouthOpen: false,
    };

// Define the game loop function
    function gameLoop() {
      clearCanvas();
      movePacMan();
      drawPacMan();
      requestAnimationFrame(gameLoop);
    }

// Function to clear the canvas
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Function to move Pac-Man according to the current direction
    function movePacMan() {
      if (pacMan.direction === 0 && pacMan.x < canvas.width - pacMan.radius) {
        pacMan.x += pacMan.speed;
      } else if (pacMan.direction === 1 && pacMan.y < canvas.height - pacMan.radius) {
        pacMan.y += pacMan.speed;
      } else if (pacMan.direction === 2 && pacMan.x > pacMan.radius) {
        pacMan.x -= pacMan.speed;
      } else if (pacMan.direction === 3 && pacMan.y > pacMan.radius) {
        pacMan.y -= pacMan.speed;
      }
    }

// Function to draw Pac-Man
    function drawPacMan() {
      ctx.beginPath();
      ctx.arc(pacMan.x, pacMan.y, pacMan.radius, (Math.PI / 180) * 45, (Math.PI / 180) * 315);
      ctx.lineTo(pacMan.x, pacMan.y);
      ctx.closePath();
      ctx.fillStyle = "yellow";
      ctx.fill();

if (pacMan.mouthOpen) {
        ctx.beginPath();
        ctx.arc(pacMan.x, pacMan.y, pacMan.radius, (Math.PI / 180) * 15, (Math.PI / 180) * -15, true);
        ctx.closePath();
        ctx.fillStyle = "black";
        ctx.fill();
      }

pacMan.mouthOpen = !pacMan.mouthOpen;
    }

// Function to handle key press events
    function handleKeyPress(event) {
      if (event.keyCode === 39) {
        // Right arrow key
        pacMan.direction = 0;
      } else if (event.keyCode === 40) {
        // Down arrow key
        pacMan.direction = 1;
      } else if (event.keyCode === 37) {
        // Left arrow key
        pacMan.direction = 2;
      } else if (event.keyCode === 38) {
        // Up arrow key
        pacMan.direction = 3;
      }
    }

// Start the game
    gameLoop();

// Event listener for key press events
    document.addEventListener("keydown", handleKeyPress);
  </script>
</body>
</html>