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

No:26972

113

←

Prev Next

→

Pac-Man
Developer User13333｜Date and time 23/12/3 15:24:34
Build time 44.664 sec｜Game capacity 3.665KB｜

Script

Advanced Pac-Man

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Advanced Pac-Man</title>
  <style>
    canvas {
      border: 2px solid black;
      background-color: #000;
      display: block;
      margin: auto;
    }
  </style>
</head>
<body>
  <h1>Advanced Pac-Man</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

const gridSize = 20;
    const pacmanSize = gridSize * 0.8;
    const wallSize = gridSize;
    const pacSpeed = 2;
    const pacColor = "#FFFF00"; // Yellow
    const wallColor = "#0000FF"; // Blue

let pacman = {
      x: 0,
      y: 0,
      size: pacmanSize,
      direction: { x: pacSpeed, y: 0 },
    };

const maze = [
      [1, 1, 1, 1, 1],
      [1, 0, 0, 0, 1],
      [1, 0, 1, 0, 1],
      [1, 0, 0, 0, 1],
      [1, 1, 1, 1, 1],
    ];

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawMaze();
      drawPacman();
    }

function drawPacman() {
      context.fillStyle = pacColor;
      context.beginPath();
      context.arc(pacman.x + pacman.size / 2, pacman.y + pacman.size / 2, pacman.size / 2, 0.2 * Math.PI, 1.8 * Math.PI);
      context.lineTo(pacman.x + pacman.size / 2, pacman.y + pacman.size / 2);
      context.closePath();
      context.fill();
    }

function movePacman() {
      pacman.x += pacman.direction.x;
      pacman.y += pacman.direction.y;

// Check for collisions with walls
      if (checkWallCollision()) {
        pacman.x -= pacman.direction.x;
        pacman.y -= pacman.direction.y;
        pacman.direction = { x: 0, y: 0 }; // Stop Pac-Man on collision
      }
    }

// Check for collision with walls in the maze
      return (
        isWallCollision(pacmanTopLeft) ||
        isWallCollision(pacmanTopRight) ||
        isWallCollision(pacmanBottomLeft) ||
        isWallCollision(pacmanBottomRight)
      );
    }

function isWallCollision(point) {
      const col = Math.floor(point.x / gridSize);
      const row = Math.floor(point.y / gridSize);

return maze[row] && maze[row][col] === 1;
    }

function gameLoop() {
      movePacman();
      draw();
      requestAnimationFrame(gameLoop);
    }

document.addEventListener("keydown", handleKeyPress);
    gameLoop();
  </script>
</body>
</html>