Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Mini Geometry Dash - Sin Errores</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

body {

background: #111;

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

overflow:hidden;

}

#pantallaJuego {

width:700px; max-width:100%; height:300px;

background: linear-gradient(#1a1a2e, #16213e);

border:4px solid #fff;

position:relative; overflow:hidden;

}

#suelo {

position:absolute; bottom:0; width:100%; height:40px;

background:#0f3460;

border-top:3px solid #e94560;

}

/* CUBO PERFECTO ESTILO GD */

#jugador {

width:32px; height:32px;

background: linear-gradient(135deg, #ffdd00, #ffb300);

border: 3px solid #ffffff;

box-shadow: 0 0 12px #ffdd00, inset 0 0 6px rgba(255,255,255,0.7);

position:absolute; bottom:40px; left:60px;

border-radius:3px;

transform-origin: center center;

}

/* PICOS TRIANGULARES BIEN FORMADOS */

.pico {

width: 0; height: 0;

border-left: 12px solid transparent;

border-right: 12px solid transparent;

border-bottom: 28px solid #ff3344;

filter: drop-shadow(0 0 5px #ff3344);

position:absolute; bottom:40px;

}

#puntos {

position:absolute; top:10px; left:10px; color:white;

font-size:22px; font-weight:bold; text-shadow:0 0 4px black;

z-index:10;

}

#mensaje {

position:absolute; top:40%; width:100%; text-align:center;

color:white; font-size:26px; font-weight:bold; text-shadow:0 0 8px #000;

z-index:10;

}

</style>

</head>

<body>

Tu navegador no soporta audio.

<div id="puntos">Puntos: 0</div>

<div id="mensaje">¡Toca pantalla o ESPACIO para empezar!</div>

</div>

const jugador = document.getElementById('jugador');

const pantalla = document.getElementById('pantallaJuego');

const textoPuntos = document.getElementById('puntos');

const textoMensaje = document.getElementById('mensaje');

const musica = document.getElementById('musicaGD');

musica.volume = 0.6;

let estaEnSuelo = true;

let velocidadSalto = 0;

let gravedad = 0.8;

let velocidadJuego = 5;

let jugando = false;

let puntos = 0;

let posY = 40;

let picos = [];

let anguloRotacion = 0;

function saltar() {

if(estaEnSuelo && jugando) {

velocidadSalto = 14;

estaEnSuelo = false;

}

if(!jugando) {

reiniciarJuego();

jugando = true;

textoMensaje.innerText = "";

musica.play().catch(err => console.log("Audio bloqueado por navegador:", err));

}

// Crear pico triangular correcto

function crearPico(){

let p = document.createElement('div');

p.className = 'pico';

p.style.right = `-30px`;

pantalla.appendChild(p);

picos.push(p);

}

function reiniciarJuego(){

puntos = 0;

velocidadJuego = 5;

picos.forEach(p=>p.remove());

picos = [];

posY = 40;

velocidadSalto = 0;

estaEnSuelo = true;

anguloRotacion = 0;

jugador.style.transform = `rotate(0deg)`;

musica.currentTime = 0;

}

function finJuego(){

jugando = false;

textoMensaje.innerText = `¡Perdiste! Puntos: ${puntos} | Toca para volver`;

musica.pause();

}

function bucle(){

if(jugando){

// Física salto/gravedad estable

velocidadSalto -= gravedad;

posY += velocidadSalto;

jugador.style.bottom = posY + 'px';

// Al caer: poner derecho el cubo

if(posY <= 40){

posY = 40;

velocidadSalto = 0;

estaEnSuelo = true;

anguloRotacion = Math.round(anguloRotacion / 90) * 90;

}else{

anguloRotacion += 6; // gira continuo al saltar

}

jugador.style.transform = `rotate(${anguloRotacion}deg)`;

// Generar picos

if(Math.random() < 0.022) crearPico();

// Mover + COLISIÓN CORREGIDA Y FIABLE

picos.forEach((p, i)=>{

let x = parseInt(p.style.right);

x += velocidadJuego;

p.style.right = x + 'px';

// Quitar pico pasado, sumar punto

if(x > 730){

p.remove();

picos.splice(i,1);

puntos++;

textoPuntos.innerText = "Puntos: "+puntos;

if(puntos%12 === 0) velocidadJuego += 0.35;

}

// Colisión mejorada, detecta bien con triángulo

const j = jugador.getBoundingClientRect();

const pi = p.getBoundingClientRect();

if( !(j.right < pi.left + 5 || j.left > pi.right -5 || j.bottom < pi.top + 6) ){

finJuego();

}

});

}

requestAnimationFrame(bucle);

}

// Controles funcionan en Samsung Android: teclado + toque

window.addEventListener('keydown', e=>{ if(e.code==='Space') saltar(); });

pantalla.addEventListener('click', saltar);

pantalla.addEventListener('touchstart', t=>{ t.preventDefault(); saltar(); });

bucle();

</script>

</body>

</html>

CSS

JS

Gd

Recommended