AI game creator

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

No:17948

←

Prev Next

→

Pac man
Developer User7843｜Date and time 23/9/25 8:20:01
Build time 25.92 sec｜Game capacity 3.061KB｜

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 {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: #000;
          overflow: hidden;
        }
        
        canvas {
          border: 2px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>
    <script>
        // Define the game canvas and context
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Define Pac-Man position and velocity
        let pacmanX = canvas.width / 2;
        let pacmanY = canvas.height / 2;
        let pacmanSpeed = 3;

// Define Pac-Man mouth angle
        let pacmanMouthAngle = 0;

// Define arrow key states
        let leftPressed = false;
        let rightPressed = false;
        let upPressed = false;
        let downPressed = false;

// Define game loop
        function gameLoop() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Move Pac-Man based on arrow key states
            if (leftPressed) {
                pacmanX -= pacmanSpeed;
            }
            if (rightPressed) {
                pacmanX += pacmanSpeed;
            }
            if (upPressed) {
                pacmanY -= pacmanSpeed;
            }
            if (downPressed) {
                pacmanY += pacmanSpeed;
            }

// Update Pac-Man mouth angle
            pacmanMouthAngle += 0.05;

// Draw Pac-Man
            context.beginPath();
            context.arc(pacmanX, pacmanY, 20, pacmanMouthAngle, Math.PI * 2 - pacmanMouthAngle);
            context.lineTo(pacmanX, pacmanY);
            context.fillStyle = "#ff0";
            context.fill();

// Request the next frame
            requestAnimationFrame(gameLoop);
        }

// Handle keydown events
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft") {
                leftPressed = true;
            }
            if (event.key === "ArrowRight") {
                rightPressed = true;
            }
            if (event.key === "ArrowUp") {
                upPressed = true;
            }
            if (event.key === "ArrowDown") {
                downPressed = true;
            }
        });

// Handle keyup events
        document.addEventListener("keyup", function(event) {
            if (event.key === "ArrowLeft") {
                leftPressed = false;
            }
            if (event.key === "ArrowRight") {
                rightPressed = false;
            }
            if (event.key === "ArrowUp") {
                upPressed = false;
            }
            if (event.key === "ArrowDown") {
                downPressed = false;
            }
        });

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