1

Tengo el siguiente código javascript:

var a_pos
var b_pos
let elemento = document.getElementById('jugador');
let cantidad = 0;
window.addEventListener('keydown',(e) =>{
    console.log('LA TECLA Q PULSASTE FUE: ' + e.key);////esto lo tengo para saber q detecta la tecla pulsada
    e.preventDefault();
    let tecla = e.key
    switch (tecla) {
        case 'ArrowUp':
                cantidad -= 50
                elemento.style.transform=`translateY(${cantidad}px)`
            break;
                case 'ArrowDown':
                    cantidad += 50
                    elemento.style.transform=`translateY(${cantidad}px)`
        default:
            break;
    }
});////todo eso es el movimiento


var a = document.getElementById('jugador');
var b = document.getElementById('arriba');
if(a_pos.l <= b_pos.r && a_pos.r >= b_pos.l && a_pos.b >= b_pos.t && a_pos.t <= b_pos.b ){
  console.log('colision');

}///esto es para detectar el choque de la parte de arriba de arriba 
#jugador {
    background-color: rgb(0, 153, 8);
  border: 5px dashed rgb(34, 187, 161);
  width: 50px;
  height: 50px;
  border-radius: 29px;
  transition: .5s;
}

#arriba{
  background: -webkit-linear-gradient(bottom right,     rgb(0, 47, 255), rgb(0, 238, 255)); 
  width: 100%;
  height: 20px;
  margin-bottom: 15px;
}
    <div id="jugador"></div>
    <div id="arriba"></div>

¿Cómo hago para que un objeto, cuando se mueva con las teclas, no se pase del largo/ancho de la pantalla?

2
  • He creado un fragmento ejecutable con el código que has puesto, pero como puedes ver no funciona bien, puedes editar la pregunta y añadir lo que consideres oportuno para completarla Commented el 7 sept. 2021 a las 12:32
  • Te he dejado una respuesta con una posible solución. Si tienes alguna duda deja un comentario en la respuesta. Commented el 7 sept. 2021 a las 13:48

1 respuesta 1

0

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;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.