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

No:26268

←

Prev Next

→

Island game
Developer User12962｜Date and time 23/11/28 10:23:15
Build time 135.188 sec｜Game capacity 5.294KB｜

Script

Jogo da Ilha

Movimentos: 0

Fim de jogo!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
    <title>Jogo da Ilha</title>
    <style>
        body {
            text-align: center;
            background-color: #80CED7;
            font-family: Arial, sans-serif;
        }

h1 {
            color: #FFFFFF;
            padding-top: 50px;
        }

#island {
            width: 400px;
            height: 300px;
            margin: 50px auto;
            border: 10px solid #FFFFFF;
            border-radius: 10px;
            background-color: #FFD700;
            position: relative;
        }

#player {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-image: url("pictogram-player.png");
            background-size: cover;
        }

#rock1,
        #rock2,
        #rock3 {
            width: 50px;
            height: 50px;
            position: absolute;
            background-image: url("pictogram-rock.png");
            background-size: cover;
        }

#water {
            width: 100%;
            height: 50px;
            background-color: #80CED7;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 100;
        }

#moves {
            color: #FFFFFF;
            font-size: 24px;
            margin-bottom: 20px;
        }

#gameover {
            color: #FFFFFF;
            font-size: 36px;
            margin-top: 100px;
            display: none;
        }
    </style>
</head>

<body>
    <h1>Jogo da Ilha</h1>
    <div id="island">
        <div id="rock1"></div>
        <div id="rock2"></div>
        <div id="rock3"></div>
        <div id="player"></div>
        <div id="water"></div>
    </div>
    <div id="moves">Movimentos: 0</div>
    <div id="gameover">Fim de jogo!</div>

// Posicionando as pedras aleatoriamente
        rock1.style.top = Math.floor(Math.random() * 200) + "px";
        rock1.style.left = Math.floor(Math.random() * 300) + "px";
        rock2.style.top = Math.floor(Math.random() * 200) + "px";
        rock2.style.left = Math.floor(Math.random() * 300) + "px";
        rock3.style.top = Math.floor(Math.random() * 200) + "px";
        rock3.style.left = Math.floor(Math.random() * 300) + "px";

// Movendo o jogador quando uma seta é pressionada
        document.addEventListener("keydown", function(event) {
            var position = parseInt(player.style.left);
            var moves = parseInt(document.getElementById("moves").textContent);

// Movendo para esquerda
            if (event.key === "ArrowLeft" && position > 10) {
                player.style.left = (position - 10) + "px";
            }
            // Movendo para direita
            else if (event.key === "ArrowRight" && position < 340) {
                player.style.left = (position + 10) + "px";
            }
            // Saltando a água
            else if (event.key === "ArrowUp" && position >= 10 && position <= 340) {
                player.style.bottom = "60px";
                setTimeout(function() {
                    player.style.bottom = "10px";
                }, 500);
                moves++;
                document.getElementById("moves").textContent = "Movimentos: " + moves;
            }

// Verificar se o jogador atingiu alguma pedra
            checkCollision();
        });

// Verificar se o jogador atingiu alguma pedra
        function checkCollision() {
            var playerPos = getPlayerPosition();
            var rock1Pos = getRockPosition(rock1);
            var rock2Pos = getRockPosition(rock2);
            var rock3Pos = getRockPosition(rock3);

if (playerPos === rock1Pos || playerPos === rock2Pos || playerPos === rock3Pos) {
                gameOver();
            }
        }

// Obter a posição do jogador em relação à água
        function getPlayerPosition() {
            var playerPos = parseInt(player.style.left);

if (playerPos >= 10 && playerPos <= 80) {
                return "left";
            } else if (playerPos > 80 && playerPos <= 220) {
                return "center";
            } else if (playerPos > 220 && playerPos <= 340) {
                return "right";
            }
        }

// Obter a posição de uma pedra em relação à água
        function getRockPosition(rock) {
            var rockPos = parseInt(rock.style.left);

if (rockPos >= 10 && rockPos <= 80) {
                return "left";
            } else if (rockPos > 80 && rockPos <= 220) {
                return "center";
            } else if (rockPos > 220 && rockPos <= 340) {
                return "right";
            }
        }

// Game over
        function gameOver() {
            player.style.display = "none";
            gameover.style.display = "block";
        }
    </script>
</body>

</html>