0
500
VistasLa detección de colisiones no funciona según lo previsto (matrices, Javascript)
Empezaré diciendo que no soy el mejor explicando.
He adjuntado 2 imágenes para ayudar a explicar mi problema.
El problema es que el 'jugador' está chocando con la posición X del 'cuadrado 2', cuando claramente no está dentro del rango de la posición Y. La línea verde muestra dónde choca y se detiene el jugador (deteniéndose como si chocara contra una pared, se detendría). En la imagen 2, debajo de la línea negra, está el resultado esperado, ¿cómo lo logro? (Desplácese para ver el código)
En caso de que necesites saberlo, el enemigo/jugador mide 50x50px, el rectángulo mide 70x150px
Mi código (JS):
blockX.forEach(blockX => { // left and right collision blockY.forEach(blockY => { if (enemy.y + enemy.h >= blockY && enemy.y <= blockY + rect.h) { if (enemy.x + enemy.w >= blockX) { if (enemy.x <= blockX + enemy.w) { enemy.x = blockX - enemy.w } } if (enemy.x <= blockX + rect.w + 13) { if (enemy.x + enemy.w >= blockX) { enemy.x = blockX + rect.w + 13 } } } }) })1 Respuestas
Responde la pregunta0
En primer lugar, puede simplificar el código reiniciando collision.cr al comienzo de la función, y luego todo lo que tiene que hacer es establecerlo en true una vez si cumple la condición, no necesita nada else .
En segundo lugar, debe tener una sola condición, que verifique las coordenadas x e y , no dos por separado (que, por cierto, en su código, la segunda condición SOBRESCRIBIRÁ el resultado de la condición anterior, debido a lo else )
const elPlayer = document.getElementById("player"); const enemies = [ { x: 100, y: 34, w: 100, h: 150 }, { x: 300, y: 34, w: 100, h: 150 }, { x: 140, y: 54, w: 100, h: 50 } ]; window.addEventListener("mousemove", e => { const player = { x: ex, y: ey, w: 20, h: 20 } //colistion detection for(let i = 0; i < enemies.length; i++) { const enemy = enemies[i]; const collide = (enemy.x < player.x + player.w && enemy.x + enemy.w > player.x && enemy.y < player.y + player.h && enemy.y + enemy.h > player.y) elPlayer.classList.toggle("collide", collide); if (collide) break; } elPlayer.style.top = player.y + "px"; elPlayer.style.left = player.x + "px"; }); [...document.querySelectorAll(".enemy")].forEach((enemy, i) => { enemy.style.left = enemies[i].x + "px"; enemy.style.top = enemies[i].y + "px"; enemy.style.width = enemies[i].w + "px"; enemy.style.height = enemies[i].h + "px"; }); .enemy { position: absolute; background-color: pink; border: 1px solid black; } #player { position: absolute; width: 20px; height: 20px; background-color: green; border: 1px solid black; } #player.collide { background-color: red; } <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div> <div id="player"></div>