AI game creator

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

No:16595

←

Prev Next

→

Pac-Man
Developer User7388｜Date and time 23/9/19 18:01:09
Build time 13.764 sec｜Game capacity 1.405KB｜

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-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

.pacman {
            width: 30px;
            height: 30px;
            background-image: url('pacman.png');
            background-size: cover;
            animation: move-right 1s infinite;
        }

@keyframes move-right {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -60px 0;
            }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="pacman" class="pacman"></div>
    </div>
    
    <script>
        const pacman = document.getElementById('pacman');
        let positionX = 0;
        let direction = 1;

function movePacman() {
            positionX += direction * 10;
            pacman.style.transform = `translateX(${positionX}px)`;

if (positionX >= window.innerWidth - pacman.offsetWidth || positionX <= 0) {
                direction *= -1;
                pacman.style.animation = (direction === 1) ? 'move-right 1s infinite' : 'move-left 1s infinite';
            }
        }

setInterval(movePacman, 100);

// You can add game logic and controls here

</script>
</body>
</html>