AI game creator

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

No:44146

←

Prev Next

→

Pac-Man
Developer User19320｜Date and time 24/2/17 5:46:07
Build time 13.492 sec｜Game capacity 4.135KB｜

Script

Sure, here's a simple implementation of Pac-Man as a single HTML file using JavaScript:

To run this game, save the code in an HTML file (e.g., `pacman.html`) and open it in a web browser. You can control Pac-Man's movements by swiping on the game board using a smartphone. The goal is to collect all the yellow dots. Once you collect all the dots, an alert will be shown with a congratulatory message and the game will restart. Enjoy playing Pac-Man!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure, here's a simple implementation of Pac-Man as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man Game</title>
    <style>
        #gameboard {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            position: relative;
        }

.pacman {
            width: 40px;
            height: 40px;
            position: absolute;
            background-image: url('pacman.png');
            background-size: cover;
            transition: left 0.2s, top 0.2s;
        }

.dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="gameboard"></div>

// Game variables
        let score = 0;

// Create game board
        const gameBoard = document.getElementById("gameboard");

// Create Pac-Man
        const pacman = document.createElement("div");
        pacman.className = "pacman";
        pacman.style.left = "0";
        pacman.style.top = "0";
        gameBoard.appendChild(pacman);

// Create dots
        for (let i = 0; i < dotCount; i++) {
            const dot = document.createElement("div");
            dot.className = "dot";
            dot.style.left = Math.floor(Math.random() * (boardSize - 10)) + "px";
            dot.style.top = Math.floor(Math.random() * (boardSize - 10)) + "px";
            gameBoard.appendChild(dot);
        }

// Handle swipe gestures
        let startX = null;
        let startY = null;

gameBoard.addEventListener("touchstart", function (e) {
            const touch = e.touches[0];
            startX = touch.clientX;
            startY = touch.clientY;
        });

gameBoard.addEventListener("touchmove", function (e) {
            if (!startX || !startY) return;

const touch = e.touches[0];
            const deltaX = touch.clientX - startX;
            const deltaY = touch.clientY - startY;

// Move Pac-Man
            const currentLeft = parseInt(pacman.style.left);
            const currentTop = parseInt(pacman.style.top);
            const newLeft = Math.max(0, Math.min(currentLeft + deltaX, boardSize - pacmanSpeed));
            const newTop = Math.max(0, Math.min(currentTop + deltaY, boardSize - pacmanSpeed));
            pacman.style.left = newLeft + "px";
            pacman.style.top = newTop + "px";

startX = touch.clientX;
            startY = touch.clientY;
        });

// Check collision with dots
        setInterval(function () {
            const pacmanRect = pacman.getBoundingClientRect();
            const dots = document.getElementsByClassName("dot");

for (let i = 0; i < dots.length; i++) {
                const dotRect = dots[i].getBoundingClientRect();

if (isCollision(pacmanRect, dotRect)) {
                    dots[i].remove();
                    score++;
                    break;
                }
            }

if (score === dotCount) {
                alert("Congratulations, you have collected all the dots!");
                score = 0;
                location.reload();
            }

}, 100);

// Helper function to check collision of two rectangles
        function isCollision(rect1, rect2) {
            return !(rect2.left > rect1.right ||
                rect2.right < rect1.left ||
                rect2.top > rect1.bottom ||
                rect2.bottom < rect1.top);
        }
    </script>
</body>
</html>
```