AI game creator

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

No:39471

←

Prev Next

→

Pac-Man
Developer User17653｜Date and time 24/1/28 14:38:13
Build time 8.596 sec｜Game capacity 2.273KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Pictograms
        const pacManImage = new Image();
        pacManImage.src = "pacman.png";

// Game variables
        const gridSize = 40;
        const rows = canvas.height / gridSize;
        const columns = canvas.width / gridSize;

const pacMan = {
            x: 0,
            y: 0,
            direction: "right"
        };

// Draw Pac-Man
        function drawPacMan() {
            context.drawImage(pacManImage, pacMan.x * gridSize, pacMan.y * gridSize, gridSize, gridSize);
        }

// Handle key press events
        function handleKeyPress(event) {
            if (event.key === "ArrowUp" && pacMan.y > 0) {
                pacMan.y--;
                pacMan.direction = "up";
            } else if (event.key === "ArrowDown" && pacMan.y < rows - 1) {
                pacMan.y++;
                pacMan.direction = "down";
            } else if (event.key === "ArrowLeft" && pacMan.x > 0) {
                pacMan.x--;
                pacMan.direction = "left";
            } else if (event.key === "ArrowRight" && pacMan.x < columns - 1) {
                pacMan.x++;
                pacMan.direction = "right";
            }

// Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Redraw Pac-Man
            drawPacMan();
        }

// Start the game
        function startGame() {
            document.addEventListener("keydown", handleKeyPress);

// Set the initial position of Pac-Man
            pacMan.x = Math.floor(columns / 2) - 1;
            pacMan.y = Math.floor(rows / 2) - 1;

// Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Pac-Man
            drawPacMan();
        }

// Load Pac-Man image
        pacManImage.onload = startGame;
    </script>
</body>
</html>