Pac man but the map tilts every second's game

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

No:44806

←

Prev Next

→

Pac man but the map tilts every second
Developer User19470｜Date and time 24/2/19 6:05:22
Build time 7.118 sec｜Game capacity 2.134KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tilting Pac-Man</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        #game-map {
            position: relative;
            width: 300px;
            height: 300px;
            border: 2px solid #fff;
            overflow: hidden;
        }
        #player {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            background-color: #FF0;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-map">
        <div id="player"></div>
    </div>

function updatePlayerPosition() {
            player.style.left = `${x}px`;
            player.style.top = `${y}px`;
        }

function tiltMap() {
            tilt += 1;
            document.getElementById('game-map').style.transform = `rotate(${tilt}deg)`;

setTimeout(tiltMap, 1000);
        }

function handleKeyPress(event) {
            const key = event.key;

switch (key) {
                case 'ArrowUp':
                    y -= 10;
                    if (y < 0) y = 0;
                    break;
                case 'ArrowDown':
                    y += 10;
                    if (y > 280) y = 280;
                    break;
                case 'ArrowLeft':
                    x -= 10;
                    if (x < 0) x = 0;
                    break;
                case 'ArrowRight':
                    x += 10;
                    if (x > 280) x = 280;
                    break;
                default:
                    break;
            }

updatePlayerPosition();
        }

document.addEventListener('keydown', handleKeyPress);
        tiltMap();
    </script>
</body>
</html>