パックマン's game | AI game creator

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

No:44398

50

パックマン
Developer User19375｜Date and time 24/2/18 1:01:22
Build time 7.124 sec｜Game capacity 2.083KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

#game-board {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
        }

.cell {
            width: 10px;
            height: 10px;
            border: 1px solid black;
        }

#pacman {
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

<script>
        const board = document.getElementById('game-board');
        const numberOfRows = 30;
        const numberOfCols = 30;

let pacmanPosition = [15, 15];

function renderBoard() {
            for (let i = 0; i < numberOfRows; i++) {
                for (let j = 0; j < numberOfCols; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    if (i === pacmanPosition[0] && j === pacmanPosition[1]) {
                        cell.setAttribute('id', 'pacman');
                        cell.textContent = '😋';
                    }
                    board.appendChild(cell);
                }
            }
        }

renderBoard();

document.addEventListener('keydown', function (event) {
            const key = event.key;
            if (key === 'ArrowUp') {
                pacmanPosition[0] = Math.max(0, pacmanPosition[0] - 1);
            } else if (key === 'ArrowDown') {
                pacmanPosition[0] = Math.min(numberOfRows - 1, pacmanPosition[0] + 1);
            } else if (key === 'ArrowLeft') {
                pacmanPosition[1] = Math.max(0, pacmanPosition[1] - 1);
            } else if (key === 'ArrowRight') {
                pacmanPosition[1] = Math.min(numberOfCols - 1, pacmanPosition[1] + 1);
            }

board.innerHTML = '';
            renderBoard();
        });
    </script>
</body>
</html>