AI game creator

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

No:9120

←

Prev Next

→

Pac man game
Developer User4301｜Date and time 23/7/21 13:23:29
Build time 24.767 sec｜Game capacity 3.2KB｜

Script

Here is a simple implementation of the classic Pac-Man game as a single HTML file, using JavaScript and enclosed within script tags:

Please make sure to replace the `pacman.gif` and `ghost.gif` paths in the CSS with the actual paths to the image files. You can also add more food items (represented as yellow circles) by duplicating the `food` div and adjusting the `top` and `left` positions accordingly. This simple implementation allows the player to control Pac-Man using the arrow keys on their smartphone, moving him around the game board. The ghost is static in this example, but you can modify the game to include additional gameplay elements such as multiple ghosts, pellets, and power-ups.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Here is a simple implementation of the classic Pac-Man game as a single HTML file, using JavaScript and enclosed within script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
        }

.pac-man {
            position: absolute;
            width: 40px;
            height: 40px;
            background-image: url('pacman.gif');
            background-size: cover;
        }

.ghost {
            position: absolute;
            width: 40px;
            height: 40px;
            background-image: url('ghost.gif');
            background-size: cover;
        }

.food {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="pac-man" class="pac-man"></div>
        <div id="ghost" class="ghost"></div>
        <div id="food1" class="food" style="top: 80px; left: 120px;"></div>
        <div id="food2" class="food" style="top: 160px; left: 320px;"></div>
        <div id="food3" class="food" style="top: 240px; left: 200px;"></div>
        <div id="food4" class="food" style="top: 320px; left: 40px;"></div>
    </div>

function movePacMan(keyCode) {
            var pacMan = document.getElementById('pac-man');
            var left = parseInt(window.getComputedStyle(pacMan).left);
            var top = parseInt(window.getComputedStyle(pacMan).top);

switch (keyCode) {
                case 37: // Left arrow key
                    if (left > 0) {
                        pacMan.style.left = (left - 40) + 'px';
                    }
                    break;
                case 38: // Up arrow key
                    if (top > 0) {
                        pacMan.style.top = (top - 40) + 'px';
                    }
                    break;
                case 39: // Right arrow key
                    if (left < 360) {
                        pacMan.style.left = (left + 40) + 'px';
                    }
                    break;
                case 40: // Down arrow key
                    if (top < 360) {
                        pacMan.style.top = (top + 40) + 'px';
                    }
                    break;
            }
        }
    </script>
</body>
</html>
```

This simple implementation allows the player to control Pac-Man using the arrow keys on their smartphone, moving him around the game board. The ghost is static in this example, but you can modify the game to include additional gameplay elements such as multiple ghosts, pellets, and power-ups.