Crie um jogo de dash que terá duas setas para eu me mover e a cada 0.5 segundos um cubo vermelho caindo surge's game

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

No:42534

←

Prev Next

→

Crie um jogo de dash que terá duas setas para eu m..ALL
Developer User18853｜Date and time 24/2/12 0:06:17
Build time 12.891 sec｜Game capacity 4.396KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo de Dash</title>
    <style>
        #player {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

#red-cube {
            position: absolute;
            left: 50%;
            top: -50px;
            transform: translate(-50%);
            background-color: red;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <script>
        // Variáveis
        var player = document.getElementById("player");
        var redCube = document.getElementById("red-cube");
        var leftArrow = document.createElement("img");
        var rightArrow = document.createElement("img");
        var container = document.createElement("div");
        var moveLeft = false;
        var moveRight = false;
        var playerSpeed = 10;
        var cubeSpeed = 2;
        var gameInterval;

// Configurações iniciais
        leftArrow.src = "seta_esquerda.png";
        leftArrow.style.width = "30px";
        leftArrow.style.height = "30px";
        
        rightArrow.src = "seta_direita.png";
        rightArrow.style.width = "30px";
        rightArrow.style.height = "30px";

// Função para mover o jogador para a esquerda
        function movePlayerLeft() {
            var playerPosition = parseInt(player.style.left);
            if (playerPosition > 0 && moveLeft) {
                player.style.left = (playerPosition - playerSpeed) + "px";
            }
        }

// Função para mover o jogador para a direita
        function movePlayerRight() {
            var playerPosition = parseInt(player.style.left);
            if (playerPosition < document.documentElement.clientWidth - player.offsetWidth && moveRight) {
                player.style.left = (playerPosition + playerSpeed) + "px";
            }
        }

// Evento de pressionar a tecla
        function keyDownHandler(event) {
            if (event.key === "ArrowLeft") {
                moveLeft = true;
            } else if (event.key === "ArrowRight") {
                moveRight = true;
            }
        }

// Evento de soltar a tecla
        function keyUpHandler(event) {
            if (event.key === "ArrowLeft") {
                moveLeft = false;
            } else if (event.key === "ArrowRight") {
                moveRight = false;
            }
        }

// Iniciar o jogo
        function startGame() {
            // Adicionar as setas de movimento à tela
            container.appendChild(leftArrow);
            container.appendChild(rightArrow);
            document.body.appendChild(container);

// Posicionar o jogador no centro da tela
            player.style.left = (document.documentElement.clientWidth / 2 - player.offsetWidth / 2) + "px";
            document.body.appendChild(player);

// Iniciar a queda do cubo vermelho
            gameInterval = setInterval(function () {
                var cubePosition = parseInt(redCube.style.top);
                if (cubePosition < document.documentElement.clientHeight) {
                    redCube.style.top = (cubePosition + cubeSpeed) + "px";
                } else {
                    clearInterval(gameInterval);
                    alert("Jogo finalizado! Você perdeu!");
                    location.reload(); // Recarregar a página para reiniciar o jogo
                }

// Verificar colisão entre o jogador e o cubo vermelho
                if (
                    (player.offsetLeft <= redCube.offsetLeft + redCube.offsetWidth &&
                    player.offsetLeft + player.offsetWidth >= redCube.offsetLeft) &&
                    (redCube.offsetTop + redCube.offsetHeight >= player.offsetTop)
                ) {
                    clearInterval(gameInterval);
                    alert("Jogo finalizado! Você venceu!");
                    location.reload(); // Recarregar a página para reiniciar o jogo
                }
            }, 500);
        }

// Adicionar eventos de teclado
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);

// Iniciar o jogo quando a página carregar
        document.addEventListener("DOMContentLoaded", startGame);
    </script>
</body>
</html>