De acuerdo, ya hice la pregunta, pero no tuve respuestas satisfactorias, así que la pregunto de nuevo con algunos cambios.

Estoy haciendo un videojuego en javascript (sin canvas porque es una tarea y el maestro no nos lo permite). Estoy haciendo el hitbox en este momento y me encuentro con un error. del que quiero hablar es este:

Cuando cargo la página, el personaje aparece en el aire y cae debido a una función de gravedad:

 //* GRAVITY const charWeight = 50; let velocity = 1; let fall = true; setInterval(gravity, 10) function gravity() { let Y = persoId.offsetTop; velocity += acceleration / 100; persoId.style.top = +Y + velocity + "px"; collisions = true; //! DEBUGGING }

Luego, cuando toca el suelo, deja de caer debido a mi función hitbox:

 //* HITBOX let collisions = true; function coll() { if (collisions) { let persoY = persoId.offsetTop, persoX = persoId.offsetLeft, persoW = persoId.offsetWidth, persoH = persoId.offsetHeight, islandY = islandHitbox.offsetTop, islandX = islandHitbox.offsetLeft, islandW = islandHitbox.offsetWidth, islandH = islandHitbox.offsetHeight; if (persoX < islandX + islandW && persoX + persoW > islandX && persoY < islandY + islandH && persoY + persoH > islandY) { velocity = 0; } requestAnimationFrame(coll); } } coll();

Ahora, el problema es que, como puedes ver en las imágenes, el personaje atraviesa un poco el hitbox y no se detiene tan pronto como toca. Da como resultado muchos problemas para saltar y cosas así porque cree que el personaje está dentro del hitbox. Creo que esto se debe a que salta algunos píxeles cuando la función se actualiza debido al hecho de que el jugador toca el suelo a una velocidad de alrededor de 13 px/s.

Otras variables:

 let persoY = persoId.offsetTop, persoX = persoId.offsetLeft, persoW = persoId.offsetWidth, persoH = persoId.offsetHeight, islandY = islandHitbox.offsetTop, right = false, left = false, x = 9950, y = 4950, air = false, land = true, hitbox = false, islandHb = document.getElementById("islandHitbox"), map = document.getElementById("map"), persoVar = document.getElementById("persoId"), screenLog = document.querySelector('body'); const acceleration = 9.81;