AI game creator

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

No:20404

←

Prev Next

→

Pac-Man
Developer User9036｜Date and time 23/10/9 12:59:46
Build time 15.362 sec｜Game capacity 2.269KB｜

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>
</head>
<body>
    <canvas id="pacmanCanvas" width="400" height="400"></canvas>

// Setup canvas and context
    const canvas = document.getElementById("pacmanCanvas");
    const context = canvas.getContext("2d");

// Load Pac-Man image
    const pacmanImage = new Image();
    pacmanImage.src = "pacman.png";

// Pac-Man position and variables
    let pacmanX = 50;
    let pacmanY = 50;
    let direction = "right";
    let mouthOpen = false;

// Function to draw Pac-Man
    function drawPacman() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Update Pac-Man's mouth state
        if (mouthOpen) {
            context.drawImage(pacmanImage, 0, 0, 32, 32, pacmanX, pacmanY, 40, 40);
        } else {
            context.drawImage(pacmanImage, 32, 0, 32, 32, pacmanX, pacmanY, 40, 40);
        }

// Move Pac-Man based on direction
        if (direction === "up") {
            pacmanY -= 5;
        } else if (direction === "down") {
            pacmanY += 5;
        } else if (direction === "left") {
            pacmanX -= 5;
        } else if (direction === "right") {
            pacmanX += 5;
        }

// Keep Pac-Man within canvas boundaries
        if (pacmanX < 0) {
            pacmanX = canvas.width - 40;
        } else if (pacmanX >= canvas.width) {
            pacmanX = 0;
        }

mouthOpen = !mouthOpen;

// Call this function again after a short delay
        setTimeout(drawPacman, 200);
    }

// Function to handle key events for Pac-Man movement
    function handleKeyDown(event) {
        if (event.keyCode === 37) { // Left arrow key
            direction = "left";
        } else if (event.keyCode === 38) { // Up arrow key
            direction = "up";
        } else if (event.keyCode === 39) { // Right arrow key
            direction = "right";
        } else if (event.keyCode === 40) { // Down arrow key
            direction = "down";
        }
    }

// Bind keydown event listener
    document.addEventListener("keydown", handleKeyDown);

// Start the game by calling drawPacman function
    drawPacman();
</script>

</body>
</html>