AI game creator

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

No:39347

←

Prev Next

→

Pac-Man
Developer User17620｜Date and time 24/1/28 3:42:53
Build time 11.86 sec｜Game capacity 3.131KB｜

Script

←

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-board {
            width: 420px;
            height: 420px;
            border: 1px solid black;
            position: relative;
            margin: 0 auto;
        }
        
        .pacman {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: yellow;
            position: absolute;
        }
        
        .ghost {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="pacman" class="pacman"></div>
        <div id="ghost" class="ghost"></div>
    </div>
    
    <script>
        var pacman = document.getElementById("pacman");
        var ghost = document.getElementById("ghost");
        
        var pacmanX = 0;
        var pacmanY = 0;
        var ghostX = 0;
        var ghostY = 0;
        
        var pacmanDirection = "right";
        var ghostDirection = "down";
        
        function movePacman() {
            switch (pacmanDirection) {
                case "right":
                    pacmanX += 30;
                    break;
                case "left":
                    pacmanX -= 30;
                    break;
                case "up":
                    pacmanY -= 30;
                    break;
                case "down":
                    pacmanY += 30;
                    break;
            }
            
            pacman.style.left = pacmanX + "px";
            pacman.style.top = pacmanY + "px";
        }
        
        function moveGhost() {
            switch (ghostDirection) {
                case "right":
                    ghostX += 30;
                    break;
                case "left":
                    ghostX -= 30;
                    break;
                case "up":
                    ghostY -= 30;
                    break;
                case "down":
                    ghostY += 30;
                    break;
            }
            
            ghost.style.left = ghostX + "px";
            ghost.style.top = ghostY + "px";
        }
        
        function updateGame() {
            movePacman();
            moveGhost();
            
            checkCollision();
        }
        
        function checkCollision() {
            if (pacmanX === ghostX && pacmanY === ghostY) {
                alert("Game Over! You got caught by the ghost.");
                resetGame();
            }
        }
        
        function resetGame() {
            pacmanX = 0;
            pacmanY = 0;
            ghostX = 0;
            ghostY = 0;
            
            pacmanDirection = "right";
            ghostDirection = "down";
            
            pacman.style.left = pacmanX + "px";
            pacman.style.top = pacmanY + "px";
            ghost.style.left = ghostX + "px";
            ghost.style.top = ghostY + "px";
        }
        
        setInterval(updateGame, 1000);
    </script>
</body>
</html>