AI game creator

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

No:32000

←

Prev Next

→

Pacman
Developer User15234｜Date and time 23/12/29 5:06:16
Build time 31.86 sec｜Game capacity 4.518KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Pacman Game</title>
<style>
    #game-board { 
        width: 500px;
        height: 500px;
        background-color: #000;
        position: relative;
    }
    .pacman {
        width: 40px;
        height: 40px;
        position: absolute;
        border-radius: 50%;
        background-image: url('pacman.png');
        background-size: cover;
    }
    .ghost {
        width: 40px;
        height: 40px;
        position: absolute;
        border-radius: 50%;
        background-image: url('ghost.png');
        background-size: cover;
    }
</style>
</head>
<body>
    <div id="game-board">
        <div id="pacman" class="pacman"></div>
        <div id="ghost1" class="ghost"></div>
        <div id="ghost2" class="ghost"></div>
        <div id="ghost3" class="ghost"></div>
    </div>
    
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            
            const pacman = document.getElementById("pacman");
            const ghost1 = document.getElementById("ghost1");
            const ghost2 = document.getElementById("ghost2");
            const ghost3 = document.getElementById("ghost3");
            
            let pacmanX = 0;
            let pacmanY = 0;
            
            let ghost1X = 100;
            let ghost1Y = 100;
            let ghost2X = 200;
            let ghost2Y = 200;
            let ghost3X = 300;
            let ghost3Y = 300;
            
            const boardWidth = document.getElementById("game-board").offsetWidth;
            const boardHeight = document.getElementById("game-board").offsetHeight;
            
            function updatePacmanPosition() {
                pacman.style.left = pacmanX + "px";
                pacman.style.top = pacmanY + "px";
            }
            
            function updateGhostPositions() {
                ghost1.style.left = ghost1X + "px";
                ghost1.style.top = ghost1Y + "px";
                ghost2.style.left = ghost2X + "px";
                ghost2.style.top = ghost2Y + "px";
                ghost3.style.left = ghost3X + "px";
                ghost3.style.top = ghost3Y + "px";
            }
            
            function movePacman(event) {
                switch (event.keyCode) {
                    case 37: // Left arrow
                        pacmanX -= 40;
                        if (pacmanX < 0) pacmanX = boardWidth - 40;
                        break;
                    case 38: // Up arrow
                        pacmanY -= 40;
                        if (pacmanY < 0) pacmanY = boardHeight - 40;
                        break;
                    case 39: // Right arrow
                        pacmanX += 40;
                        if (pacmanX >= boardWidth) pacmanX = 0;
                        break;
                    case 40: // Down arrow
                        pacmanY += 40;
                        if (pacmanY >= boardHeight) pacmanY = 0;
                        break;
                }
            }
            
            document.addEventListener("keydown", movePacman);
            
            setInterval(function() {
                ghost1X += Math.floor(Math.random() * 3 - 1) * 40;
                ghost1Y += Math.floor(Math.random() * 3 - 1) * 40;
                if (ghost1X < 0) ghost1X = boardWidth - 40;
                if (ghost1Y < 0) ghost1Y = boardHeight - 40;
                if (ghost1X >= boardWidth) ghost1X = 0;
                if (ghost1Y >= boardHeight) ghost1Y = 0;
                
                ghost2X += Math.floor(Math.random() * 3 - 1) * 40;
                ghost2Y += Math.floor(Math.random() * 3 - 1) * 40;
                if (ghost2X < 0) ghost2X = boardWidth - 40;
                if (ghost2Y < 0) ghost2Y = boardHeight - 40;
                if (ghost2X >= boardWidth) ghost2X = 0;
                if (ghost2Y >= boardHeight) ghost2Y = 0;

ghost3X += Math.floor(Math.random() * 3 - 1) * 40;
                ghost3Y += Math.floor(Math.random() * 3 - 1) * 40;
                if (ghost3X < 0) ghost3X = boardWidth - 40;
                if (ghost3Y < 0) ghost3Y = boardHeight - 40;
                if (ghost3X >= boardWidth) ghost3X = 0;
                if (ghost3Y >= boardHeight) ghost3Y = 0;
                
                updateGhostPositions();
            }, 1000);
            
            setInterval(function() {
                updatePacmanPosition();
            }, 50);
            
        });
    </script>
</body>
</html>