AI game creator

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

No:33929

←

Prev Next

→

Pacman
Developer User15937｜Date and time 24/1/7 5:45:21
Build time 32.003 sec｜Game capacity 3.291KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pacman Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Pictograms for Pacman and Food
        const pacmanImage = document.createElement("img");
        pacmanImage.src = "pacman.png";

const foodImage = document.createElement("img");
        foodImage.src = "food.png";

// Pacman position and movement variables
        let pacmanX = canvas.width / 2;
        let pacmanY = canvas.height / 2;
        let pacmanSpeed = 4;
        let pacmanDirection = 0; // 0: right, 1: down, 2: left, 3: up

// Food position variables
        const foodSize = 20;
        let foodX = Math.floor(Math.random() * ((canvas.width - foodSize) / foodSize)) * foodSize;
        let foodY = Math.floor(Math.random() * ((canvas.height - foodSize) / foodSize)) * foodSize;

// Handle key presses
        const handleKeyDown = (event) => {
            if (event.key === "ArrowRight") {
                pacmanDirection = 0;
            } else if (event.key === "ArrowDown") {
                pacmanDirection = 1;
            } else if (event.key === "ArrowLeft") {
                pacmanDirection = 2;
            } else if (event.key === "ArrowUp") {
                pacmanDirection = 3;
            }
        };

document.addEventListener("keydown", handleKeyDown);

// Game update function
        const update = () => {
            context.clearRect(0, 0, canvas.width, canvas.height);

// Move Pacman
            if (pacmanDirection === 0) {
                pacmanX += pacmanSpeed;
            } else if (pacmanDirection === 1) {
                pacmanY += pacmanSpeed;
            } else if (pacmanDirection === 2) {
                pacmanX -= pacmanSpeed;
            } else if (pacmanDirection === 3) {
                pacmanY -= pacmanSpeed;
            }

// Keep Pacman inside the canvas
            if (pacmanX >= canvas.width) {
                pacmanX = 0;
            } else if (pacmanX < 0) {
                pacmanX = canvas.width - pacmanSpeed;
            }

if (pacmanY >= canvas.height) {
                pacmanY = 0;
            } else if (pacmanY < 0) {
                pacmanY = canvas.height - pacmanSpeed;
            }

// Draw Pacman
            context.drawImage(pacmanImage, pacmanX, pacmanY);

// Draw Food
            context.drawImage(foodImage, foodX, foodY);

// Check collision with food
            if (pacmanX < foodX + foodSize &&
                pacmanX + 20 > foodX &&
                pacmanY < foodY + foodSize &&
                20 + pacmanY > foodY) {
                // Pacman ate the food, reposition the food
                foodX = Math.floor(Math.random() * ((canvas.width - foodSize) / foodSize)) * foodSize;
                foodY = Math.floor(Math.random() * ((canvas.height - foodSize) / foodSize)) * foodSize;
            }

requestAnimationFrame(update);
        };

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