Physix Pac-Mac gravity-mouse version

<!DOCTYPE html>
<html>
<head>
  <title>Physix Pac-Mac</title>
</head>
<body>
  <canvas id="PhysixPacMac" width="1200" height="500"></canvas>
  <script>

    // Define the Pac-Man character's radius
    const characterRadius = 25;

    // Define the dimensions of the game board
    const gameBoardWidth = 1200;
    const gameBoardHeight = 500;

    // Define the obstacles in the game
    const obstacles = [
      { x: 100, y: 100 },
      { x: 200, y: 200 },
      { x: 300, y: 300 }
    ];

    // Define the power pellets in the game
    const powerPellets = [
      { x: 400, y: 400, points: 50 },
      { x: 500, y: 500, points: 100 }
    ];

    // Define the ghosts in the game
    const ghosts = [
      { x: 600, y: 600 },
      { x: 700, y: 700 }
    ];

    // Define the dimensions of the character, obstacles, and power pellets
    const characterWidth = characterHeight = 50;
    const obstacleWidth = obstacleHeight = 50;
    const powerPelletWidth = powerPelletHeight = 25;
    const ghostWidth = ghostHeight = 50;

    // Initialize the score and lives
    let score = 0;
    let lives = 3;

    // Define the starting position of the Pac-Man character
    const startingX = 50;
    const startingY = 50;


    var canvas = document.getElementById('PhysixPacMac');
    var context = canvas.getContext('2d');

    var w = canvas.width = 1200;
    var h = canvas.height = 500;

    // Set the fill style to yellow
    context.fillStyle = 'yellow';

    // Draw a filled circle at the Pac-Man character's position
    context.beginPath();
    context.arc(x, y, characterRadius, 0, 2 * Math.PI);
    context.fill();

    // Initialize the Pac-Man character's position and velocity
    let x = 50;
    let y = 50;
    let vx = 0;
    let vy = 0;

    // Set up the game loop
    function gameLoop() {
      // Update the Pac-Man character's velocity based on the mouse position
      vx += (mouseX - x) * 0.1;
      vy += (mouseY - y) * 0.1;

      // Update the Pac-Man character's position based on its velocity
      x += vx;
      y += vy;

      // Check for collisions with walls
      if (x < 0 || x > gameBoardWidth || y < 0 || y > gameBoardHeight) {
        // Reverse the direction of the velocity to bounce off the wall
        vx = -vx;
        vy = -vy;
      }

      // Check for collisions with obstacles
      for (let i = 0; i < obstacles.length; i++) {
        const obstacle = obstacles[i];
        if (x + characterWidth > obstacle.x && x < obstacle.x + obstacleWidth &&
            y + characterHeight > obstacle.y && y < obstacle.y + obstacleHeight) {
          // Reverse the direction of the velocity to bounce off the obstacle
          vx = -vx;
          vy = -vy;
        }
      }

      // Check for collisions with power pellets
      for (let i = 0; i < powerPellets.length; i++) {
        const powerPellet = powerPellets[i];
        if (x + characterWidth > powerPellet.x && x < powerPellet.x + powerPelletWidth &&
            y + characterHeight > powerPellet.y && y < powerPellet.y + powerPelletHeight) {
          // Increase the score and remove the power pellet
          score += powerPellet.points;
          powerPellets.splice(i, 1);
        }
      }

      // Check for collisions with ghosts
      for (let i = 0; i < ghosts.length; i++) {
        const ghost = ghosts[i];
        if (x + characterWidth > ghost.x && x < ghost.x + ghostWidth &&
            y + characterHeight > ghost.y && y < ghost.y + ghostHeight) {
          // Decrease the lives and reset the Pac-Man character's position
          lives--;
          x = startingX;
          y = startingY;
        }
      }

      // Redraw the game board with the Pac-Man character at its new position
      drawGameBoard();
    }

    // Set up the mousemove event listener to detect changes in the mouse position
    document.addEventListener('mousemove', (event) => {
      // Update the mouse position
      mouseX = event.clientX;
      mouseY = event.clientY;
    });

    // Start the game loop
    setInterval(gameLoop, 1000 / 60); // 60 FPS
  </script>
</body>
</html>