AI game creator

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

No:44082

←

Prev Next

→

Pac-Man
Developer User19314｜Date and time 24/2/17 4:25:36
Build time 8.545 sec｜Game capacity 1.962KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pac-Man</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Load Pac-Man and Ghost images
        const pacManImage = new Image();
        pacManImage.src = "pacman.png";

const ghostImage = new Image();
        ghostImage.src = "ghost.png";

// Pac-Man starting position
        let pacManX = canvas.width / 2;
        let pacManY = canvas.height / 2;

// Ghost starting position
        let ghostX = 50;
        let ghostY = 50;

function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Pac-Man
            context.drawImage(pacManImage, pacManX, pacManY, 50, 50);

// Draw Ghost
            context.drawImage(ghostImage, ghostX, ghostY, 50, 50);

requestAnimationFrame(draw);
        }

// Move Pac-Man based on user input
        function movePacMan(event) {
            const arrowKey = event.key;

if (arrowKey === "ArrowUp" && pacManY > 0) {
                pacManY -= 10;
            } else if (arrowKey === "ArrowDown" && pacManY < canvas.height - 50) {
                pacManY += 10;
            } else if (arrowKey === "ArrowLeft" && pacManX > 0) {
                pacManX -= 10;
            } else if (arrowKey === "ArrowRight" && pacManX < canvas.width - 50) {
                pacManX += 10;
            }
        }

// Start the game and listen for user input
        function startGame() {
            draw();
            window.addEventListener("keydown", movePacMan);
        }

startGame();
    </script>
</body>
</html>