AI game creator

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

No:33167

←

Prev Next

→

Pac-Man
Developer User15666｜Date and time 24/1/2 19:59:04
Build time 34.935 sec｜Game capacity 3.701KB｜

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</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

const CELL_SIZE = 40;
        const MAP_WIDTH = canvas.width / CELL_SIZE;
        const MAP_HEIGHT = canvas.height / CELL_SIZE;

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

const ghosts = [
            { x: 7, y: 9, direction: "up" },
            { x: 8, y: 9, direction: "up" }
        ];

const map = [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
            [0, 1, 0, 0, 1, 1, 0, 0, 1, 0],
            [0, 1, 1, 0, 1, 1, 0, 1, 1, 0],
            [0, 1, 0, 0, 0, 0, 0, 1, 1, 0],
            [0, 1, 1, 1, 1, 1, 0, 1, 1, 0],
            [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
            [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        ];

const pacmanImage = new Image();
        pacmanImage.src = "pacman.png";

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

function drawMap() {
            for (let row = 0; row < MAP_HEIGHT; row++) {
                for (let col = 0; col < MAP_WIDTH; col++) {
                    const tile = map[row][col];

if (tile === 0) {
                        ctx.fillStyle = "#000";
                    } else {
                        ctx.fillStyle = "#fff";
                    }

ctx.fillRect(col * CELL_SIZE, row * CELL_SIZE, CELL_SIZE, CELL_SIZE);
                }
            }
        }

function drawPacMan() {
            ctx.drawImage(pacmanImage, pacMan.x * CELL_SIZE, pacMan.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
        }

function drawGhosts() {
            ghosts.forEach(ghost => {
                ctx.drawImage(ghostImage, ghost.x * CELL_SIZE, ghost.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
            });
        }

function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function update() {
            clearCanvas();
            drawMap();
            drawPacMan();
            drawGhosts();
        }

function movePacMan() {
            let nextX = pacMan.x;
            let nextY = pacMan.y;

if (pacMan.direction === "up") {
                nextY--;
            } else if (pacMan.direction === "down") {
                nextY++;
            } else if (pacMan.direction === "left") {
                nextX--;
            } else if (pacMan.direction === "right") {
                nextX++;
            }

if (nextX >= 0 && nextX < MAP_WIDTH && nextY >= 0 && nextY < MAP_HEIGHT) {
                const nextTile = map[nextY][nextX];

if (nextTile !== 0) {
                    pacMan.x = nextX;
                    pacMan.y = nextY;
                }
            }
        }

function gameLoop() {
            movePacMan();
            update();
        }

document.addEventListener("keydown", handleKeyDown);
        setInterval(gameLoop, 200);
    </script>
</body>
 </html>