Tu código tiene varios problemas:
- Solo compruebas la colisión una única vez durante la carga de la página.
- Al usar animaciones, la colisión no se producirá en el momento en el que cambies la posición del objeto, si no que ocurrirá pasado un tiempo, tras finalizar la animación al aplicar la nueva posición del objeto.
Para solucionar estos problemas he agregado el código de control de colisión en un temporizador que realiza la comprobación cada 100ms y, además, el resultado lo muestro por pantalla:
/* Ahora es cuando debemos comprobar la colisión */
if (
jugador.offsetTop > (arriba.offsetTop - jugador.offsetHeight)
&& jugador.offsetTop < (arriba.offsetTop + arriba.offsetHeight)
) {
colision.innerText = "SÍ";
} else {
colision.innerText = "NO";
}
Como puedes ver he usado las propiedades elemento.offsetHeight()
y elemento.offsetTop()
para calcular la altura y posición de cada objeto.
De este modo la colisión se ha producido si:
- La parte de arriba de la pelota más su altura está por debajo de la parte de arriba de la línea.
- La parte de arriba de la pelota está por encima de la parte de arriba de la línea más su grosor.
Aquí tienes el código completo funcionando con esta solución:
let posicion_y = 0;
window.addEventListener('keydown', (evento) => {
evento.preventDefault();
switch (evento.key) {
case 'ArrowUp':
posicion_y -= 10;
jugador.style.top = posicion_y + "px";
break;
case 'ArrowDown':
posicion_y += 10;
jugador.style.top = posicion_y + "px";
break;
default:
/* No hay movimiento, finalizamos el evento */
return;
}
});
setInterval(() => {
/* Ahora es cuando debemos comprobar la colisión */
if (
jugador.offsetTop > (arriba.offsetTop - jugador.offsetHeight)
&& jugador.offsetTop < (arriba.offsetTop + arriba.offsetHeight)
) {
colision.innerText = "SÍ";
} else {
colision.innerText = "NO";
}
}, 100);
#jugador {
position: absolute;
top: 0px;
background-color: rgb(0, 153, 8);
border: 5px dashed rgb(34, 187, 161);
width: 50px;
height: 50px;
border-radius: 29px;
transition: .5s;
}
#arriba{
position: absolute;
top: 20px;
left: 0px;
background: -webkit-linear-gradient(bottom right, rgb(0, 47, 255), rgb(0, 238, 255));
width: 100%;
height: 20px;
margin-bottom: 15px;
}
#resultado {
position: absolute;
bottom: 0px;
}
<div id="jugador"></div>
<div id="arriba"></div>
<div id="resultado">Colisión <span id="colision"></span></div>
Si lo que quieres es únicamente controlar la zona de juego, entonces no es necesario tanto código y no necesitas control de colisiones, si no delimitar el valor máximo y mínimo del jugador.
Aquí tienes el código completo mostrando esta solución:
let posicion_y = 0;
window.addEventListener('keydown', (evento) => {
evento.preventDefault();
switch (evento.key) {
case 'ArrowUp':
posicion_y -= 20;
/* No podemos ir más arriba del borde superior */
if (posicion_y < 0) posicion_y = 0;
jugador.style.top = posicion_y + "px";
break;
case 'ArrowDown':
posicion_y += 20;
/* No podemos ir más abajo del borde inferior */
let max_y = jugador.parentNode.offsetHeight - jugador.offsetHeight;
if (posicion_y > max_y) posicion_y = max_y;
jugador.style.top = posicion_y + "px";
break;
default:
/* No hay movimiento, finalizamos el evento */
return;
}
});
#jugador {
position: relative;
top: 0px;
background-color: rgb(0, 153, 8);
border: 5px dashed rgb(34, 187, 161);
width: 50px;
height: 50px;
border-radius: 29px;
transition: .5s;
}
#zona_de_juego{
position: absolute;
top: 10px;
left: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
background: -webkit-linear-gradient(bottom right, rgb(0, 47, 255), rgb(0, 238, 255));
}
#resultado {
position: absolute;
bottom: 0px;
}
<div id="zona_de_juego"><div id="jugador"></div></div>
En ese caso las comprobaciones son más sencillas.
Si estamos subiendo, en caso de haber ido más allá de la parte superior, nos quedamos en la parte superior:
if (posicion_y < 0) posicion_y = 0;
Si estamos bajando, en caso de haber ido más allá de la parte inferior de la pantalla (el alto de la zona de juego menos el alto de la pelota) entonces nos quedamos en la parte inferior:
let max_y = jugador.parentNode.offsetHeight - jugador.offsetHeight;
if (posicion_y > max_y) posicion_y = max_y;