Pac man's game | AI game creator

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

No:34036

40

Pac man
Developer User16004｜Date and time 24/1/7 21:24:26
Build time 42.359 sec｜Game capacity 4.706KB｜

In this implementation, I have created a simple Pac-Man game using HTML and JavaScript. It is designed to be played on a smartphone. The game area is represented by a 320x320px grid, with each cell represented by a tile. Pac-Man and a ghost are placed on the grid, and they can be controlled using arrow keys. - The game starts automatically once the HTML page is loaded. - Pac-Man can be moved using the arrow keys on the smartphone's keyboard. Pac-Man cannot go outside the grid boundaries. - The ghost moves randomly in one of the four directions (up, down, left, right) every second. The ghost doesn't go outside the grid boundaries. - Pac-Man is represented by a yellow circle, and the ghost is represented by a red circle. - The game runs indefinitely until the user closes the browser tab or reloads the page. Please note that this is a basic implementation of the Pac-Man game and doesn't include features like eating pellets, scoring, or game-over conditions. However, you can extend the provided code to add more functionality and features to make it a complete game.

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man Game</title>
    <style>
        #game-container {
            display: flex;
            flex-wrap: wrap;
            width: 320px;
            height: 320px;
            border: 2px solid black;
        }
        
        .tile {
            width: 20px;
            height: 20px;
            border: 1px solid black;
            box-sizing: border-box;
        }
        
        #pacman {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: yellow;
        }
        
        #ghost {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>
    
    <script>
        document.addEventListener('DOMContentLoaded', startGame);
        
        const gameContainer = document.getElementById('game-container');
        const pacman = document.getElementById('pacman');
        const ghost = document.getElementById('ghost');
        
        let pacmanPosition = 0;
        let ghostPosition = 319;
        
        function startGame() {
            createGameBoard();
            placeCharacters();
        }
        
        function createGameBoard() {
            for (let i = 0; i < 400; i++) {
                const tile = document.createElement('div');
                tile.className = 'tile';
                gameContainer.appendChild(tile);
            }
        }
        
        function placeCharacters() {
            gameContainer.appendChild(pacman);
            gameContainer.appendChild(ghost);
        }
        
        function movePacman(event) {
            const key = event.key;
            
            if (key === 'ArrowRight' && pacmanPosition % 20 !== 19) {
                pacmanPosition++;
                pacman.style.left = pacmanPosition * 20 + 'px';
            } else if (key === 'ArrowLeft' && pacmanPosition % 20 !== 0) {
                pacmanPosition--;
                pacman.style.left = pacmanPosition * 20 + 'px';
            } else if (key === 'ArrowDown' && pacmanPosition + 20 < 400) {
                pacmanPosition += 20;
                pacman.style.top = Math.floor(pacmanPosition / 20) * 20 + 'px';
            } else if (key === 'ArrowUp' && pacmanPosition - 20 >= 0) {
                pacmanPosition -= 20;
                pacman.style.top = Math.floor(pacmanPosition / 20) * 20 + 'px';
            }
        }
        
        document.addEventListener('keydown', movePacman);
        
        function moveGhost() {
            const randomDirection = Math.floor(Math.random() * 4);
            
            if (randomDirection === 0 && ghostPosition % 20 !== 19) {
                ghostPosition++;
                ghost.style.left = ghostPosition * 20 + 'px';
            } else if (randomDirection === 1 && ghostPosition % 20 !== 0) {
                ghostPosition--;
                ghost.style.left = ghostPosition * 20 + 'px';
            } else if (randomDirection === 2 && ghostPosition + 20 < 400) {
                ghostPosition += 20;
                ghost.style.top = Math.floor(ghostPosition / 20) * 20 + 'px';
            } else if (randomDirection === 3 && ghostPosition - 20 >= 0) {
                ghostPosition -= 20;
                ghost.style.top = Math.floor(ghostPosition / 20) * 20 + 'px';
            }
          
            setTimeout(moveGhost, 1000);
        }
        
        moveGhost();
    </script>
</body>
</html>
```
In this implementation, I have created a simple Pac-Man game using HTML and JavaScript. It is designed to be played on a smartphone. The game area is represented by a 320x320px grid, with each cell represented by a tile. Pac-Man and a ghost are placed on the grid, and they can be controlled using arrow keys.
- The game starts automatically once the HTML page is loaded.
- Pac-Man can be moved using the arrow keys on the smartphone's keyboard. Pac-Man cannot go outside the grid boundaries.
- The ghost moves randomly in one of the four directions (up, down, left, right) every second. The ghost doesn't go outside the grid boundaries.
- Pac-Man is represented by a yellow circle, and the ghost is represented by a red circle.
- The game runs indefinitely until the user closes the browser tab or reloads the page.

Please note that this is a basic implementation of the Pac-Man game and doesn't include features like eating pellets, scoring, or game-over conditions. However, you can extend the provided code to add more functionality and features to make it a complete game.