Search code examples
javascripthtmlcsscollision-detectiongame-physics

Javascript - Game Side Collision (Bottom to Top)

I am making a game that involves moving a player around with the arrow keys. The player will collide with other objects in the game. I have done the player's right to the object's left collision and the player's left to the object's right collision, yet I cannot figure out how to do the player's bottom to the object's top collision. I have no idea why my code for the bottom to the top collision doesn't work and I have searched the Internet many times to no avail. Your help will be much appreciated.

Here's all of my code so there's no confusion:

Edit: My code is now all fixed. It includes collisions on all sides.

var player = document.getElementById("player");
var powerup = document.getElementById("powerup");
var object = document.getElementsByClassName("object");
var player = document.getElementById("player");
for (i = 0; i < object.length; i++) {
object[i].style.top = Math.floor(Math.random() * 250/* window.innerHeight */) + 15 + "px";
object[i].style.left = Math.floor(Math.random() * 250/* window.innerWidth */) + 15 + "px";
}
setInterval(collisionDetection,1);
function collisionDetection() {
for (i = 0; i < object.length; i++) { 
// Player Right to Object Left
if (player.offsetLeft + player.offsetWidth <= object[i].offsetLeft + 1 &&
    player.offsetLeft + player.offsetWidth >= object[i].offsetLeft &&
    player.offsetTop < object[i].offsetTop + object[i].offsetHeight &&
    player.offsetHeight + player.offsetTop > object[i].offsetTop) {
player.style.left = object[i].offsetLeft - player.offsetWidth + "px";   
}
// Player Left to Object Right
if (player.offsetLeft >= object[i].offsetLeft + object[i].offsetWidth - 1 &&
    player.offsetLeft <= object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetTop < object[i].offsetTop + object[i].offsetHeight &&
    player.offsetHeight + player.offsetTop > object[i].offsetTop) {
player.style.left = object[i].offsetLeft + object[i].offsetWidth + "px";   
}
// Player Bottom to Object Top
if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetLeft + player.offsetWidth > object[i].offsetLeft &&
    player.offsetTop + player.offsetHeight >= object[i].offsetTop &&
    player.offsetTop + player.offsetHeight <= object[i].offsetTop + 1) {
player.style.top = object[i].offsetTop - player.offsetHeight + "px";   
}
// Player Top to Object Bottom
if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetLeft + player.offsetWidth > object[i].offsetLeft &&
    player.offsetTop <= object[i].offsetTop + object[i].offsetHeight &&
    player.offsetTop >= object[i].offsetTop + object[i].offsetHeight - 1) {
player.style.top = object[i].offsetTop + object[i].offsetHeight + "px";   
}
}
}
function move(event) {
var key = event.keyCode;
if (key == 40) {
player.style.top = player.offsetTop + 1 + "px";
}
if (key == 39) {
player.style.left = player.offsetLeft + 1 + "px";
}
if (key == 38) {
player.style.top = player.offsetTop - 1 + "px";
}
if (key == 37) {
player.style.left = player.offsetLeft - 1 + "px";
}
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#player {
background: #000;
position: fixed;
height: 10px;
width: 10px;
left: 0px;
top: 0px;
}
#powerup {
background: blue;
position: fixed;
height: 10px;
width: 10px;
}
<body onkeydown="move(event)">
  <div id="player"></div>
  <div class="object" id="powerup"></div>
  <div class="object" id="powerup"></div>
</body>

Solution

  • In the left and right collisions you calculate the new position with player.offsetWidth. However in the top collision you are using player.Height which does not exist, instead of using player.offsetHeight

    Compare 

    player.style.left = object[i].offsetLeft - player.offsetWidth + "px";

    with 

    player.style.top = object[i].offsetTop - player.Height + "px";