AI game creator

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

No:30943

←

Prev Next

→

Pac-Man
Developer User14976｜Date and time 23/12/24 15:14:49
Build time 11.857 sec｜Game capacity 2.335KB｜

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</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            position: relative;
        }
        
        .pacman {
            position: absolute;
            top: 180px;
            left: 180px;
            width: 40px;
            height: 40px;
            background-image: url('pacman.png');
            background-repeat: no-repeat;
            background-position: 0px 0px;
            animation: movePacman 1s infinite;
        }
        
        @keyframes movePacman {
            0% {
                background-position: 0px 0px;
            }
            100% {
                background-position: -40px 0px;
            }
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div class="pacman"></div>
    </div>
    
    <script>
        // Starting position and direction of Pac-Man
        var positionX = 180;
        var positionY = 180;
        var direction = 0; // 0: right, 1: down, 2: left, 3: up
        
        // Key codes for arrow keys on smartphone
        var KEY_CODES = {
            37: 2, // Left arrow
            38: 3, // Up arrow
            39: 0, // Right arrow
            40: 1  // Down arrow
        };
        
        document.addEventListener("keydown", function(event) {
            var keyCode = event.keyCode;
            
            // Check if the pressed key is an arrow key
            if (keyCode >= 37 && keyCode <= 40) {
                direction = KEY_CODES[keyCode];
                movePacman();
            }
        });
        
        function movePacman() {
            var pacman = document.querySelector(".pacman");
            
            // Update the position of Pac-Man based on the current direction
            if (direction === 0) {
                positionX += 10;
            } else if (direction === 1) {
                positionY += 10;
            } else if (direction === 2) {
                positionX -= 10;
            } else if (direction === 3) {
                positionY -= 10;
            }
            
            // Move Pac-Man to the new position
            pacman.style.left = positionX + "px";
            pacman.style.top = positionY + "px";
        }
    </script>
</body>
</html>