AI game creator

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

No:9628

110

←

Prev Next

→

Pac-Man
Developer User4404｜Date and time 23/7/26 18:11:20
Build time 44.491 sec｜Game capacity 6.137KB｜

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>
        body {
            background-color: black;
        }
        #game-board {
            display: flex;
            flex-wrap: wrap;
            max-width: 420px;
            margin: 0 auto;
        }
        .game-cell {
            width: 20px;
            height: 20px;
            background-color: blue;
            border: 1px solid black;
            box-sizing: border-box;
        }
        .pacman {
            background-image: url('pacman.png');
            background-size: cover;
        }
        .ghost {
            background-image: url('ghost.png');
            background-size: cover;
        }
        .food {
            background-image: url('food.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Game objects
        const PACMAN = "pacman";
        const GHOST = "ghost";
        const FOOD = "food";
        const EMPTY = "empty";

// Game board state
        let gameBoard = [];

// Pac-Man's current position
        let pacmanPos = { row: 0, col: 0 };

// Initialize game board
        function createGameBoard() {
            const gameBoardDiv = document.getElementById('game-board');

for (let i = 0; i < ROWS; i++) {
                for (let j = 0; j < COLS; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('game-cell');
                    gameBoardDiv.appendChild(cell);
                    gameBoard.push(EMPTY);
                }
            }

placeFood();
            placePacman();
        }

// Place Pac-Man on the board
        function placePacman() {
            const pacmanIndex = pacmanPos.row * COLS + pacmanPos.col;
            const pacmanCell = document.getElementsByClassName('game-cell')[pacmanIndex];
            pacmanCell.classList.add(PACMAN);
            gameBoard[pacmanIndex] = PACMAN;
        }

// Place food on the board
        function placeFood() {
            const foodCount = Math.floor(ROWS * COLS / 4);
            let count = 0;

while (count < foodCount) {
                const randomIndex = Math.floor(Math.random() * ROWS * COLS);
                if (gameBoard[randomIndex] === EMPTY) {
                    const foodCell = document.getElementsByClassName('game-cell')[randomIndex];
                    foodCell.classList.add(FOOD);
                    gameBoard[randomIndex] = FOOD;
                    count++;
                }
            }
        }

// Move Pac-Man
        function movePacman(direction) {
            const { row, col } = pacmanPos;

switch(direction) {
                case 'up':
                    if (row > 0 && gameBoard[(row - 1) * COLS + col] !== GHOST) {
                        clearCell(row, col);
                        pacmanPos.row--;
                    }
                    break;
                case 'down':
                    if (row < ROWS - 1 && gameBoard[(row + 1) * COLS + col] !== GHOST) {
                        clearCell(row, col);
                        pacmanPos.row++;
                    }
                    break;
                case 'left':
                    if (col > 0 && gameBoard[row * COLS + (col - 1)] !== GHOST) {
                        clearCell(row, col);
                        pacmanPos.col--;
                    }
                    break;
                case 'right':
                    if (col < COLS - 1 && gameBoard[row * COLS + (col + 1)] !== GHOST) {
                        clearCell(row, col);
                        pacmanPos.col++;
                    }
                    break;
            }

const currentCellIndex = pacmanPos.row * COLS + pacmanPos.col;
            const currentCell = document.getElementsByClassName('game-cell')[currentCellIndex];
            currentCell.classList.add(PACMAN);
            gameBoard[currentCellIndex] = PACMAN;
            checkFoodCollision(pacmanPos.row, pacmanPos.col);
        }

// Clear current cell
        function clearCell(row, col) {
            const currentCellIndex = row * COLS + col;
            const currentCell = document.getElementsByClassName('game-cell')[currentCellIndex];
            currentCell.classList.remove(PACMAN);
            gameBoard[currentCellIndex] = EMPTY;
        }

// Check for food collision
        function checkFoodCollision(row, col) {
            const currentCellIndex = row * COLS + col;
            const currentCell = document.getElementsByClassName('game-cell')[currentCellIndex];

if (gameBoard[currentCellIndex] === FOOD) {
                currentCell.classList.remove(FOOD);
                gameBoard[currentCellIndex] = EMPTY;
                checkGameCompletion();
            }
        }

// Check if game is complete
        function checkGameCompletion() {
            const remainingFood = gameBoard.filter(cell => cell === FOOD);

if (remainingFood.length === 0) {
                alert("Congratulations! You won the game!");
                // You can add additional logic here to restart the game
            }
        }

// Handle keypress events
        function handleKeyPress(event) {
            const key = event.key.toLowerCase();

if (key === "arrowup" || key === "w") {
                movePacman("up");
            } else if (key === "arrowdown" || key === "s") {
                movePacman("down");
            } else if (key === "arrowleft" || key === "a") {
                movePacman("left");
            } else if (key === "arrowright" || key === "d") {
                movePacman("right");
            }
        }

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

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