Make a platformer make sure there's gravity also make sure there's a floor also some lava that the player has to dodge if they touch it they become the skull emoji 💀's game

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

No:46244

113

←

Prev Next

→

Make a platformer make sure there's gravity also m..ALL
Developer User19568｜Date and time 24/2/24 7:34:37
Build time 7.156 sec｜Game capacity 2.292KB｜

Script

😊

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f2f2f2;
            font-size: 30px;
            font-family: Arial, sans-serif;
        }
        #player {
            background-color: black;
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
        }
        #floor {
            background-color: green;
            width: 100%;
            height: 20px;
            position: absolute;
            bottom: 0;
        }
        #lava {
            background-color: red;
            width: 100%;
            height: 20px;
            position: absolute;
            bottom: 50px;
        }
    </style>
</head>

let gravity = 0.5;
        let playerSpeed = 0;
        let floorPosition = floor.getBoundingClientRect().top;
        let lavaPosition = lava.getBoundingClientRect().top;
        let isGameOver = false;

function jump() {
            if (isGameOver) return;
            playerSpeed = -10;
        }

function gameOver() {
            player.innerHTML = '💀';
            isGameOver = true;
        }

function gameLoop() {
            if (isGameOver) return;

playerSpeed += gravity;
            let playerTop = player.getBoundingClientRect().top;
            let playerHeight = player.getBoundingClientRect().height;

if (playerTop + playerHeight >= floorPosition) {
                player.style.bottom = `${floorPosition}px`;
                if (playerTop + playerHeight >= lavaPosition) {
                    gameOver();
                    return;
                }
            } else {
                player.style.bottom = `${playerTop + playerSpeed}px`;
            }

requestAnimationFrame(gameLoop);
        }

document.addEventListener('keydown', jump);

gameLoop();
    </script>
</body>