AI game creator

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

No:40413

←

Prev Next

→

Pac-Man
Developer User18060｜Date and time 24/2/2 11:35:57
Build time 11.186 sec｜Game capacity 3.269KB｜

Script

Como você solicitou um jogo do Pac-Man implementado em um único arquivo HTML, aqui está um exemplo de código que atende aos seus requisitos:

Neste exemplo, quando você abrir o arquivo HTML em um navegador em seu smartphone, será exibido um tabuleiro do Pac-Man. Você pode controlar o Pac-Man utilizando as setas do teclado na página exibida em seu smartphone. O Pac-Man pode se mover apenas para as células que não possuem um ponto amarelo. Ao mover o Pac-Man para uma célula sem o ponto, o ponto desaparecerá. Espero que isso atenda às suas necessidades! Divirta-se jogando Pac-Man!

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Como você solicitou um jogo do Pac-Man implementado em um único arquivo HTML, aqui está um exemplo de código que atende aos seus requisitos:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man</title>
    <style>
        #game-board {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
        }
        
        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid gray;
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .pacman {
            font-size: 20px;
        }
        
        .dot {
            width: 8px;
            height: 8px;
            background-color: yellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

for (let i = 0; i < boardSize; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');

if (i === 0) {
                    const pacman = document.createElement('span');
                    pacman.textContent = '😀';
                    pacman.classList.add('pacman');
                    cell.appendChild(pacman);
                } else if (i === Math.floor(boardSize / 2)) {
                    const dot = document.createElement('div');
                    dot.classList.add('dot');
                    cell.appendChild(dot);
                }

gameBoard.appendChild(cell);
            }
        }

generateBoard();

window.addEventListener('keydown', function (event) {
            const pacman = document.querySelector('.pacman');
            const currentCell = pacman.parentElement;
            const nextCell = getNextCell(event.key, currentCell);

if (nextCell && !nextCell.classList.contains('dot')) {
                currentCell.innerHTML = '';
                nextCell.appendChild(pacman);
            }
        });

function getNextCell(key, currentCell) {
            switch (key) {
                case 'ArrowUp':
                    return currentCell.previousElementSibling;
                case 'ArrowDown':
                    return currentCell.nextElementSibling;
                case 'ArrowLeft':
                    return currentCell.previousElementSibling.parentElement;
                case 'ArrowRight':
                    return currentCell.nextElementSibling.parentElement;
            }
        }
    </script>
</body>
</html>
```

Espero que isso atenda às suas necessidades! Divirta-se jogando Pac-Man!