AI game creator

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

No:32104

←

Prev Next

→

Pac-Man
Developer User15355｜Date and time 23/12/30 1:18:26
Build time 20.156 sec｜Game capacity 2.39KB｜

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>
  <style>
    body {
      background-color: black;
      margin: 0;
    }

canvas {
      display: block;
      margin: 20px auto;
      background-color: #111;
      border: 2px solid #fff;
    }
  </style>
</head>

// Initialize the game
    window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');
      setInterval(updateGame, 30);
      document.addEventListener('keydown', handleKeyPress);
    }

// Update the game state
    function updateGame() {
      movePacman();
      drawGame();
    }

// Move Pac-Man based on the current direction
    function movePacman() {
      if (pacmanDirection === 'right' && pacmanX < canvas.width - 30) {
        pacmanX += pacmanSpeed;
      } else if (pacmanDirection === 'left' && pacmanX > 0) {
        pacmanX -= pacmanSpeed;
      } else if (pacmanDirection === 'down' && pacmanY < canvas.height - 30) {
        pacmanY += pacmanSpeed;
      } else if (pacmanDirection === 'up' && pacmanY > 0) {
        pacmanY -= pacmanSpeed;
      }
    }

// Draw the game objects on the canvas
    function drawGame() {
      // Clear the canvas
      canvasContext.fillStyle = '#111';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

// Draw Pac-Man
      canvasContext.fillStyle = 'yellow';
      canvasContext.beginPath();
      canvasContext.arc(pacmanX, pacmanY, 15, 0.25 * Math.PI, 1.75 * Math.PI);
      canvasContext.lineTo(pacmanX, pacmanY);
      canvasContext.closePath();
      canvasContext.fill();
    }

// Handle key press events
    function handleKeyPress(event) {
      if (event.key === 'ArrowRight') {
        pacmanDirection = 'right';
      } else if (event.key === 'ArrowLeft') {
        pacmanDirection = 'left';
      } else if (event.key === 'ArrowDown') {
        pacmanDirection = 'down';
      } else if (event.key === 'ArrowUp') {
        pacmanDirection = 'up';
      }
    }
  </script>
</body>

</html>