Pacman With ghost And a Mario Invincibility star's game

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

No:17312

←

Prev Next

→

Pacman With ghost And a Mario Invincibility star
Developer User7638｜Date and time 23/9/23 4:10:06
Build time 41.03 sec｜Game capacity 4.763KB｜

Script

Sure, below is an example of a simple Pacman game with ghosts and a Mario invincibility star implemented using HTML, CSS, and JavaScript. The game is designed to be played on a smartphone and uses pictograms for Pacman, ghosts, and the invincibility star.

Note: Replace the `emozi_all/pacman.png`, `emozi_all/ghost.png`, and `emozi_all/star.png` URLs in the CSS section with the appropriate URLs of the pictogram images you want to use for Pacman, ghosts, and the invincibility star.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pacman Game</title>
    <style>
        * {
            box-sizing: border-box;
        }

body {
            margin: 0;
            padding: 0;
            text-align: center;
            background-color: #000;
        }

#game-board {
            display: inline-block;
            background-color: #000;
        }

.cell {
            width: 50px;
            height: 50px;
            display: inline-block;
        }

.pacman {
            background-image: url('pacman.png');
            background-size: cover;
        }

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

.star {
            background-image: url('star.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-board">
    </div>

// Game state
        let pacmanRow = Math.floor(numRows / 2);
        let pacmanCol = Math.floor(numCols / 2);
        let ghostRow = Math.floor(Math.random() * numRows);
        let ghostCol = Math.floor(Math.random() * numCols);
        let hasStar = false;

// Render game board
        const gameBoard = document.getElementById('game-board');
        for (let row = 0; row < numRows; row++) {
            for (let col = 0; col < numCols; col++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                if (row === pacmanRow && col === pacmanCol) {
                    cell.classList.add('pacman');
                } else if (row === ghostRow && col === ghostCol) {
                    cell.classList.add('ghost');
                }
                gameBoard.appendChild(cell);
            }
        }

// Key event listener
        document.addEventListener('keydown', function (event) {
            switch (event.key) {
                case 'ArrowUp':
                    movePacman(-1, 0);
                    break;
                case 'ArrowDown':
                    movePacman(1, 0);
                    break;
                case 'ArrowLeft':
                    movePacman(0, -1);
                    break;
                case 'ArrowRight':
                    movePacman(0, 1);
                    break;
                default:
                    break;
            }
        });

// Move Pacman function
        function movePacman(rowOffset, colOffset) {
            const newPacmanRow = pacmanRow + rowOffset;
            const newPacmanCol = pacmanCol + colOffset;

if (newPacmanRow < 0 || newPacmanRow >= numRows || newPacmanCol < 0 || newPacmanCol >= numCols) {
                return; // Pacman is hitting the boundary, do nothing
            }

const pacmanCell = gameBoard.getElementsByClassName('pacman')[0];
            pacmanCell.classList.remove('pacman');
            pacmanRow = newPacmanRow;
            pacmanCol = newPacmanCol;
            const newPacmanCell = gameBoard.getElementsByClassName('cell')[(pacmanRow * numCols) + pacmanCol];
            newPacmanCell.classList.add('pacman');

if (pacmanRow === ghostRow && pacmanCol === ghostCol) {
                if (hasStar) {
                    // Pacman caught the ghost while invincible
                    resetGhostPosition();
                    hasStar = false;
                    console.log('Congratulations! Pacman caught the ghost while invincible.');
                } else {
                    // Pacman is caught by the ghost
                    console.log('Game Over! Pacman is caught by the ghost.');
                }
            }
        }

// Reset ghost position function
        function resetGhostPosition() {
            const ghostCell = gameBoard.getElementsByClassName('ghost')[0];
            ghostCell.classList.remove('ghost');
            ghostRow = Math.floor(Math.random() * numRows);
            ghostCol = Math.floor(Math.random() * numCols);
            const newGhostCell = gameBoard.getElementsByClassName('cell')[(ghostRow * numCols) + ghostCol];
            newGhostCell.classList.add('ghost');
        }
    </script>
</body>
</html>
```

Note: Replace the `pacman.png`, `ghost.png`, and `star.png` URLs in the CSS section with the appropriate URLs of the pictogram images you want to use for Pacman, ghosts, and the invincibility star.