Pac-Man's game | AI game creator

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

No:39612

61

Pac-Man
Developer User17730｜Date and time 24/1/29 12:20:14
Build time 26.359 sec｜Game capacity 5.981KB｜

Explanation: This is a simple Pac-Man game implemented in one HTML file using JavaScript. The game consists of a game board with walls, coins, and a Pac-Man character. The user can control Pac-Man using arrow keys on a smartphone device. The game board is represented by a 2-dimensional array called `board`, where each element represents a cell on the board. The cell types are defined using constants, such as `EMPTY`, `PACMAN`, `WALL`, and `COIN`. The HTML structure is defined in the body section, with a `game-board` div element representing the game board grid. Each cell of the grid is a `cell` div element, and depending on the cell type, its appearance is set accordingly using CSS styles. The Pac-Man character is represented by a `pacman` div element with a background image of Pac-Man. Its initial position is randomly set on the board, and as the user controls Pac-Man, the position is updated. User input is handled using the `keydown` event listener. When an arrow key is pressed, the corresponding movement is calculated, and if it is a valid move (not hitting the wall or going out of the board), Pac-Man is moved to the new position. The game logic is encapsulated in functions such as `isValidMove`, `movePacman`, and `getCell` to handle various actions and validations on the game board. Note: For the game to work correctly, you need to provide the `emozi_all/game.png` file as the background image for the Pac-Man character. You can replace it with any suitable Pac-Man image of your choice.

→ 　

0　

0　

　
　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pac-Man Game</title>
    <style>
        #game-board {
            width: 450px;
            height: 450px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
        }

.cell {
            width: 45px;
            height: 45px;
            background-color: darkblue;
        }

#pacman {
            width: 45px;
            height: 45px;
            background-image: url('pacman.png');
            background-size: cover;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

<script>
        // Game settings
        const ROWS = 10;
        const COLS = 10;

// Cell types
        const EMPTY = 0;
        const PACMAN = 1;
        const WALL = 2;
        const COIN = 3;

// Position of Pac-Man
        let pacmanRow;
        let pacmanCol;

// Game board
        const board = [
            [WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL],
            [WALL, COIN, COIN, COIN, COIN, COIN, COIN, COIN, COIN, WALL],
            [WALL, COIN, WALL, COIN, WALL, COIN, WALL, COIN, COIN, WALL],
            [WALL, COIN, WALL, COIN, WALL, COIN, COIN, WALL, COIN, WALL],
            [WALL, COIN, WALL, COIN, COIN, COIN, WALL, COIN, COIN, WALL],
            [WALL, COIN, WALL, WALL, WALL, WALL, WALL, WALL, COIN, WALL],
            [WALL, COIN, COIN, WALL, COIN, COIN, COIN, COIN, COIN, WALL],
            [WALL, COIN, WALL, COIN, COIN, COIN, WALL, WALL, COIN, WALL],
            [WALL, COIN, WALL, COIN, WALL, COIN, COIN, COIN, COIN, WALL],
            [WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL, WALL],
        ];

// Generate game board
        const gameBoard = document.getElementById("game-board");
        for (let row = 0; row < ROWS; row++) {
            for (let col = 0; col < COLS; col++) {
                const cell = document.createElement("div");
                cell.classList.add("cell");

if (board[row][col] === WALL) {
                    cell.style.backgroundColor = "black";
                } else if (board[row][col] === PACMAN) {
                    cell.appendChild(createPacman());
                    pacmanRow = row;
                    pacmanCol = col;
                } else if (board[row][col] === COIN) {
                    cell.style.backgroundColor = "yellow";
                }

gameBoard.appendChild(cell);
            }
        }

// Initialize Pac-Man
        function createPacman() {
            const pacman = document.createElement("div");
            pacman.id = "pacman";
            return pacman;
        }

// Handle user input
        document.addEventListener("keydown", function(event) {
            event.preventDefault();

let newRow = pacmanRow;
            let newCol = pacmanCol;

if (event.keyCode === 37) { // Left arrow key
                newCol--;
            } else if (event.keyCode === 38) { // Up arrow key
                newRow--;
            } else if (event.keyCode === 39) { // Right arrow key
                newCol++;
            } else if (event.keyCode === 40) { // Down arrow key
                newRow++;
            }

// Check if new position is valid
            if (isValidMove(newRow, newCol)) {
                movePacman(newRow, newCol);
            }
        });

// Check if move is valid
        function isValidMove(row, col) {
            if (row < 0 || col < 0 || row >= ROWS || col >= COLS) {
                return false;
            }

if (board[row][col] === WALL) {
                return false;
            }

return true;
        }

// Move Pac-Man
        function movePacman(newRow, newCol) {
            const currentCell = document.getElementById("pacman");
            const newCell = getCell(newRow, newCol);

currentCell.parentNode.removeChild(currentCell);
            newCell.appendChild(currentCell);

board[pacmanRow][pacmanCol] = EMPTY;
            pacmanRow = newRow;
            pacmanCol = newCol;
            board[pacmanRow][pacmanCol] = PACMAN;
        }

// Get cell by row and col
        function getCell(row, col) {
            const cellIndex = row * COLS + col;
            return gameBoard.childNodes[cellIndex];
        }
    </script>
</body>
</html>
```

Explanation:

This is a simple Pac-Man game implemented in one HTML file using JavaScript. The game consists of a game board with walls, coins, and a Pac-Man character. The user can control Pac-Man using arrow keys on a smartphone device.

The game board is represented by a 2-dimensional array called `board`, where each element represents a cell on the board. The cell types are defined using constants, such as `EMPTY`, `PACMAN`, `WALL`, and `COIN`.

The HTML structure is defined in the body section, with a `game-board` div element representing the game board grid. Each cell of the grid is a `cell` div element, and depending on the cell type, its appearance is set accordingly using CSS styles.

The Pac-Man character is represented by a `pacman` div element with a background image of Pac-Man. Its initial position is randomly set on the board, and as the user controls Pac-Man, the position is updated.

User input is handled using the `keydown` event listener. When an arrow key is pressed, the corresponding movement is calculated, and if it is a valid move (not hitting the wall or going out of the board), Pac-Man is moved to the new position.

The game logic is encapsulated in functions such as `isValidMove`, `movePacman`, and `getCell` to handle various actions and validations on the game board.

Note: For the game to work correctly, you need to provide the `pacman.png` file as the background image for the Pac-Man character. You can replace it with any suitable Pac-Man image of your choice.