This game is a game where you're a blue box and you got to touch this long long block and spikes get rid of you if you hit a spike you have to play the game again there's 3 minutes of the game's game

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

No:47980

←

Prev Next

→

This game is a game where you're a blue box and yo..ALL
Developer User20677｜Date and time 24/3/1 6:14:15
Build time 9.037 sec｜Game capacity 2.529KB｜

Script

Tiempo restante: 180 segundos

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juego de la Caja Azul</title>
</head>

<body>

<div id="game">
        <div id="player"></div>
        <div id="obstacle"></div>
        <div id="score">Tiempo restante: 180 segundos</div>
    </div>

function movePlayer(e) {
            if (e.key === 'ArrowDown') {
                player.style.top = parseInt(player.style.top) + 10 + 'px';
            } else if (e.key === 'ArrowUp') {
                player.style.top = parseInt(player.style.top) - 10 + 'px';
            }
        }

function checkCollision() {
            const playerRect = player.getBoundingClientRect();
            const obstacleRect = obstacle.getBoundingClientRect();

if (playerRect.left < obstacleRect.right && playerRect.right > obstacleRect.left &&
                playerRect.top < obstacleRect.bottom && playerRect.bottom > obstacleRect.top) {
                alert('Has perdido! Vuelve a intentarlo.');
                location.reload();
            }
        }

function updateScore() {
            score--;
            document.getElementById('score').innerText = 'Tiempo restante: ' + score + ' segundos';

if (score === 0) {
                alert('¡Has ganado! Felicidades.');
                location.reload();
            }
        }

setInterval(() => {
            obstacle.style.left = parseInt(obstacle.style.left) - 5 + 'px';
            if (parseInt(obstacle.style.left) < -50) {
                obstacle.style.left = '100%';
            }

checkCollision();
            updateScore();
        }, 100);

document.addEventListener('keydown', movePlayer);
    </script>

#player {
            width: 20px;
            height: 20px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 10%;
        }

#obstacle {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 100%;
        }
    </style>

</body>

</html>