AI game creator

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

No:17977

←

Prev Next

→

Pac-Man
Developer User7857｜Date and time 23/9/25 15:12:29
Build time 51.925 sec｜Game capacity 5.372KB｜

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>
    <style>
        #game {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
        }

.cell {
            width: 40px;
            height: 40px;
            box-sizing: border-box;
        }

.pacman {
            width: 40px;
            height: 40px;
            background-image: url('pacman.png');
            background-size: cover;
            transform: rotate(0deg);
        }

.ghost {
            width: 40px;
            height: 40px;
            background-image: url('ghost.png');
            background-size: cover;
        }

.coin {
            width: 40px;
            height: 40px;
            background-image: url('coin.png');
            background-size: cover;
        }

.empty {
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="game"></div>

const pacman = document.createElement('div');
        pacman.classList.add('pacman');
        pacman.currentPosition = {
            x: 0,
            y: 0
        };

const ghosts = [];
        const coinCount = document.querySelectorAll('.coin').length;

let score = 0;

function updateScore() {
            score++;
            if (score === coinCount) {
                alert("Congratulations! You won!");
                resetGame();
            }
        }

function movePacman(event) {
            const key = event.keyCode;
            let nextX, nextY;

if (key === 37) { // Left arrow
                nextX = pacman.currentPosition.x - 1;
                nextY = pacman.currentPosition.y;
                pacman.style.transform = 'rotate(-180deg)';
            } else if (key === 38) { // Up arrow
                nextX = pacman.currentPosition.x;
                nextY = pacman.currentPosition.y - 1;
                pacman.style.transform = 'rotate(-90deg)';
            } else if (key === 39) { // Right arrow
                nextX = pacman.currentPosition.x + 1;
                nextY = pacman.currentPosition.y;
                pacman.style.transform = 'rotate(0deg)';
            } else if (key === 40) { // Down arrow
                nextX = pacman.currentPosition.x;
                nextY = pacman.currentPosition.y + 1;
                pacman.style.transform = 'rotate(90deg)';
            }

if (grid[nextY][nextX] === "coin") {
                grid[pacman.currentPosition.y][pacman.currentPosition.x] = "";
                pacman.currentPosition.x = nextX;
                pacman.currentPosition.y = nextY;
                grid[nextY][nextX] = "pacman";
                updateScore();
            }

if (grid[nextY][nextX] !== "wall") {
                pacman.style.top = `${nextY * 40}px`;
                pacman.style.left = `${nextX * 40}px`;
            }
        }

function resetGame() {
            score = 0;

const gameContainer = document.getElementById('game');
            gameContainer.innerHTML = '';
            gameContainer.appendChild(pacman);

grid.forEach((row, y) => {
                row.forEach((cell, x) => {
                    const newCell = document.createElement('div');
                    newCell.classList.add('cell');

if (cell === "wall") {
                        newCell.classList.add('wall');
                    } else if (cell === "coin") {
                        newCell.classList.add('coin');
                    } else if (cell === "pacman") {
                        pacman.style.top = `${y * 40}px`;
                        pacman.style.left = `${x * 40}px`;
                    } else if (cell === "ghost") {
                        const ghost = document.createElement('div');
                        ghost.classList.add('ghost');
                        ghost.style.top = `${y * 40}px`;
                        ghost.style.left = `${x * 40}px`;
                        ghosts.push(ghost);
                        gameContainer.appendChild(ghost);
                    }

gameContainer.appendChild(newCell);
                });
            });

document.addEventListener('keydown', movePacman);
        }

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