v<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Saltos</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #87CEEB;
}
#jugador {
position: absolute;
width: 40px;
height: 40px;
background-color: #FF4500;
bottom: 20px;
left: 50px;
}
.obstaculo {
position: absolute;
width: 30px;
height: 100px;
background-color: #2E8B57;
bottom: 0;
}
</style>
</head>
<body>
<div id="jugador"></div>
<script>
const jugador = [Link]('jugador');
const obstacles = [];
let isJumping = false;
let score = 0;
let gameOver = false;
// Crear obstáculos
function crearObstaculo() {
const obstaculo = [Link]('div');
[Link]('obstaculo');
[Link] = '100vw';
[Link] = '0';
[Link](obstaculo);
[Link](obstaculo);
}
// Mover obstáculos
function moverObstaculos() {
[Link]((obstaculo, index) => {
const obstaculoRect = [Link]();
[Link] = ([Link] - 5) + 'px';
// Colisión
if ([Link] < 50 && [Link] > 50 && !isJumping)
{
gameOver = true;
alert('¡Game Over! Tu puntuación: ' + score);
[Link]();
}
// Eliminar obstáculos fuera de la pantalla
if ([Link] < 0) {
[Link]();
[Link](index, 1);
score++;
}
});
}
// Salto del jugador
function saltar() {
if (isJumping) return;
isJumping = true;
let altura = 0;
const salto = setInterval(() => {
if (altura >= 100) {
clearInterval(salto);
const caer = setInterval(() => {
altura -= 5;
[Link] = (parseInt([Link]) - 5) +
'px';
if (altura <= 0) {
clearInterval(caer);
isJumping = false;
[Link] = '20px';
}
}, 20);
} else {
altura += 5;
[Link] = (parseInt([Link]) + 5) + 'px';
}
}, 20);
}
// Iniciar el juego
function iniciarJuego() {
setInterval(() => {
if (!gameOver) {
moverObstaculos();
}
}, 20);
setInterval(crearObstaculo, 2000);
}
[Link]('click', saltar);
iniciarJuego();
</script>
</body>
</html>
