AI game creator

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

No:38134

129

←

Prev Next

→

Pac-Man
Developer User14077｜Date and time 24/1/22 23:19:35
Build time 14.366 sec｜Game capacity 2.916KB｜

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</title>
    <style>
      canvas {
        background-color: black;
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400px" height="400px"></canvas>

// Main game loop
      function gameLoop() {
        clearCanvas();
        drawPacman();
        drawDots();

movePacman();
        checkCollision();

requestAnimationFrame(gameLoop);
      }

// Clear the canvas
      function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }

// Draw Pac-Man
      function drawPacman() {
        context.fillStyle = pacman.color;
        context.beginPath();
        context.arc(pacman.x, pacman.y, grid / 2, 0.25 * Math.PI, 1.75 * Math.PI);
        context.lineTo(pacman.x, pacman.y);
        context.closePath();
        context.fill();
      }

// Draw the dots
      function drawDots() {
        context.fillStyle = "white";
        for (let i = 0; i < dots.length; i++) {
          context.beginPath();
          context.arc(dots[i].x, dots[i].y, 2, 0, 2 * Math.PI);
          context.closePath();
          context.fill();
        }
      }

// Move Pac-Man based on touch events
      document.addEventListener("keydown", function (event) {
        event.preventDefault();
        switch (event.keyCode) {
          case 37:
            pacman.direction = "left";
            break;
          case 38:
            pacman.direction = "up";
            break;
          case 39:
            pacman.direction = "right";
            break;
          case 40:
            pacman.direction = "down";
            break;
        }
      });

// Move Pac-Man
      function movePacman() {
        switch (pacman.direction) {
          case "left":
            pacman.x -= grid;
            break;
          case "up":
            pacman.y -= grid;
            break;
          case "right":
            pacman.x += grid;
            break;
          case "down":
            pacman.y += grid;
            break;
        }
      }

// Check collisions with dots
      function checkCollision() {
        for (let i = 0; i < dots.length; i++) {
          if (pacman.x === dots[i].x && pacman.y === dots[i].y) {
            dots.splice(i, 1);
          }
        }
      }

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