AI game creator

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

No:30761

←

Prev Next

→

Pac-Man
Developer User14933｜Date and time 23/12/24 3:04:08
Build time 20.398 sec｜Game capacity 4.884KB｜

Script

Sure! Here's a basic implementation of Pac-Man as a single HTML file, using JavaScript and pictograms. To play, you'll need to use the arrow keys on your smartphone keyboard for movement.

Score: 0

In this implementation, you need to replace the URLs for `emozi_all/pacman.png` and `emozi_all/ghost.png` with the actual image URLs on your server. Additionally, you can add more food elements by copying the existing `<div id="foodX" class="food"></div>` lines and changing the `id` and positioning. Note that this is just a basic implementation of Pac-Man and does not include all the features of the original game, such as proper level design or dynamic ghost behavior. It provides the basic functionality of controlling Pac-Man and collecting food while avoiding collision with a ghost.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a basic implementation of Pac-Man as a single HTML file, using JavaScript and pictograms. To play, you'll need to use the arrow keys on your smartphone keyboard for movement.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man Game</title>
    <style>
        #game-board {
            width: 224px;
            height: 288px;
            border: 2px solid black;
            background-color: black;
            position: relative;
        }
        
        .pacman {
            position: absolute;
            width: 20px;
            height: 20px;
            background: url('pacman.png') no-repeat;
            background-position: right;
        }
        
        .food {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: yellow;
            border-radius: 50%;
        }
        
        .ghost {
            position: absolute;
            width: 20px;
            height: 20px;
            background: url('ghost.png') no-repeat;
            background-size: contain;
        }
        
        #score {
            margin-top: 10px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="score">Score: <span id="score-value">0</span></div>
        <div id="pacman"></div>
        <div id="ghost"></div>
        <div id="food1" class="food"></div>
        <div id="food2" class="food"></div>
        <div id="food3" class="food"></div>
        
    </div>

var ghost = document.getElementById("ghost");
        var ghostX = 112;
        var ghostY = 64;
        ghost.style.left = ghostX + "px";
        ghost.style.top = ghostY + "px";

var food1 = document.getElementById("food1");
        var food2 = document.getElementById("food2");
        var food3 = document.getElementById("food3");

function updateScore(value) {
            score += value;
            document.getElementById("score-value").innerHTML = score;
        }

function checkCollision() {
            var pacmanRect = pacman.getBoundingClientRect();
            var ghostRect = ghost.getBoundingClientRect();
            var food1Rect = food1.getBoundingClientRect();
            var food2Rect = food2.getBoundingClientRect();
            var food3Rect = food3.getBoundingClientRect();

if (isColliding(pacmanRect, ghostRect)) {
                endGame();
            }

if (isColliding(pacmanRect, food1Rect)) {
                food1.style.display = "none";
                updateScore(10);
            }

if (isColliding(pacmanRect, food2Rect)) {
                food2.style.display = "none";
                updateScore(10);
            }

if (isColliding(pacmanRect, food3Rect)) {
                food3.style.display = "none";
                updateScore(10);
            }
        }

function isColliding(rect1, rect2) {
            return (
                rect1.left < rect2.right &&
                rect1.right > rect2.left &&
                rect1.top < rect2.bottom &&
                rect1.bottom > rect2.top
            );
        }

function movePacman(event) {
            var key = event.keyCode;

if (key === 37) { // left arrow
                pacmanX -= 20;
            } else if (key === 38) { // up arrow
                pacmanY -= 20;
            } else if (key === 39) { // right arrow
                pacmanX += 20;
            } else if (key === 40) { // down arrow
                pacmanY += 20;
            }

pacman.style.left = pacmanX + "px";
            pacman.style.top = pacmanY + "px";

checkCollision();
        }

function endGame() {
            alert("Game Over!");
            window.location.reload();
        }

document.addEventListener("keydown", movePacman);
    </script>
</body>
</html>
```

In this implementation, you need to replace the URLs for `pacman.png` and `ghost.png` with the actual image URLs on your server. Additionally, you can add more food elements by copying the existing `<div id="foodX" class="food"></div>` lines and changing the `id` and positioning.

Note that this is just a basic implementation of Pac-Man and does not include all the features of the original game, such as proper level design or dynamic ghost behavior. It provides the basic functionality of controlling Pac-Man and collecting food while avoiding collision with a ghost.