A platformer with gravity and spikes and a exit, that if you enter, you win's game

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

No:30802

←

Prev Next

→

A platformer with gravity and spikes and a exit, t..ALL
Developer User14891｜Date and time 23/12/24 6:44:09
Build time 15.665 sec｜Game capacity 5.169KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Platformer Game</title>
    <style>
        #game-board {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
            overflow: hidden;
        }
        #player {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 40px;
            background-color: blue;
        }
        .spike {
            position: absolute;
            background-image: url('spike.png');
            background-size: cover;
            width: 40px;
            height: 40px;
        }
        #exit {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 40px;
            height: 40px;
            background-image: url('exit.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="player"></div>
        <div class="spike" style="bottom: 40px; left: 120px;"></div>
        <div class="spike" style="bottom: 80px; left: 200px;"></div>
        <div class="spike" style="bottom: 120px; left: 280px;"></div>
        <div id="exit"></div>
    </div>

let isJumping = false;
            let gravity = 0.9;
            let isGameOver = false;

let playerLeft = 0;
            let playerBottom = 0;
            let jumpInterval;

function startGame() {
                playerBottom = 0;
                isGameOver = false;
                jumpInterval = null;
                clearInterval(jumpInterval);
                player.style.bottom = playerBottom + 'px';
                player.style.left = playerLeft + 'px';
                jumpInterval = setInterval(jump, 20);
                document.addEventListener('keydown', control);
            }

function fall() {
                let currentBottom = parseInt(window.getComputedStyle(player).getPropertyValue('bottom'));
                if (currentBottom <= 0) {
                    clearInterval(jumpInterval);
                    isGameOver = true;
                    alert('Has Perdido!');
                }
                player.style.bottom = currentBottom - 5 + 'px';
            }

function control(event) {
                if (event.keyCode === 32) {
                    if (!isJumping) {
                        isJumping = true;
                        jump();
                    }
                }
            }

function checkCollision() {
                let playerBoundingRect = player.getBoundingClientRect();
                let exitBoundingRect = exit.getBoundingClientRect();

if (playerBoundingRect.bottom >= gameBoard.getBoundingClientRect().bottom - 40) {
                    // Player reached the exit
                    clearInterval(jumpInterval);
                    jumpInterval = null;
                    document.removeEventListener('keydown', control);
                    alert('¡Has Ganado!');
                }

Array.from(spikes).forEach(spike => {
                    let spikeBoundingRect = spike.getBoundingClientRect();
                    if (
                        playerBoundingRect.right >= spikeBoundingRect.left &&
                        playerBoundingRect.left <= spikeBoundingRect.right &&
                        playerBoundingRect.bottom >= spikeBoundingRect.top &&
                        playerBoundingRect.bottom <= spikeBoundingRect.bottom
                    ) {
                        // Player collided with a spike
                        clearInterval(jumpInterval);
                        jumpInterval = null;
                        document.removeEventListener('keydown', control);
                        isGameOver = true;
                        alert('Has Perdido!');
                    }
                });
            }

function gameLoop() {
                checkCollision();
                if (!isGameOver) {
                    requestAnimationFrame(gameLoop);
                }
            }

// Start the game
            startGame();
            gameLoop();
        });
    </script>
</body>
</html>