AI game creator

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

No:36904

←

Prev Next

→

Pac-Man
Developer User16918｜Date and time 24/1/19 7:54:58
Build time 8.335 sec｜Game capacity 2.638KB｜

Script

In this code, we have implemented a simple Pac-Man game using HTML, CSS, and JavaScript. The game can be played on a smartphone by using the arrow keys to move Pac-Man around the screen. The game container is a black square where Pac-Man (represented by a yellow circle) moves around. The movement logic is handled by the `movePacman` function, which updates the position of Pac-Man based on the arrow key pressed. The ghost in the game is represented by a red circle. The game is enclosed in the script tags and can be saved as a single HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```
<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man Game</title>
    <style>
        #game-container {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: black;
        }
        .pacman {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: yellow;
            border-radius: 50%;
            transition: all 0.2s ease;
        }
        .ghost {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: rgb(255, 100, 100);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="pacman" class="pacman"></div>
        <div id="ghost" class="ghost"></div>
    </div>
    <script>
        window.addEventListener("keydown", movePacman); // Listen to arrow key press

function movePacman(event) {
            const pacman = document.getElementById("pacman");
            const pacmanSize = 50;
            const containerWidth = 500;
            const containerHeight = 500;
            const stepSize = 50;
            const keyCode = event.keyCode;
            
            let newX = parseInt(pacman.style.left) || 0;
            let newY = parseInt(pacman.style.top) || 0;
            
            switch (keyCode) {
                case 37: // Left arrow key
                    newX = Math.max(0, newX - stepSize);
                    break;
                case 38: // Up arrow key
                    newY = Math.max(0, newY - stepSize);
                    break;
                case 39: // Right arrow key
                    newX = Math.min(containerWidth - pacmanSize, newX + stepSize);
                    break;
                case 40: // Down arrow key
                    newY = Math.min(containerHeight - pacmanSize, newY + stepSize);
                    break;
            }
            
            pacman.style.left = newX + "px";
            pacman.style.top = newY + "px";
        }
    </script>
</body>
</html>
```