Javascript simple collision detection w/out using html canvas

Question

Im trying to make a fairly simple space invaders clone using html, css, jquery, and javascript. its going pretty good until I got to making collision detections for the bullets and the enemys. I looked into it for a bit, but couldn't find anything that could help me because Im not using canvas. How should I do this?

Here's the Javascript:

 function init() {
      $("#playerShip").hide();
      $("#playerMarLeftCounter").hide();
  $("#startButton").click(startGame);
}

function startGame() {
  $("#playerShip").show();
  $("#title").hide();
  $("#startButton").hide();
}

document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event)
    {keycode = window.event.keyCode;}
else if (e)
    {keycode = e.which;}
if(keycode == 37){
  playerMoveLeft();
}
else if (keycode == 39){
  playerMoveRight();
}
else if (keycode == 32){
  shipFireBullet();
}
//alert("keycode: " + keycode);
}

function shipFireBullet(){
  $("#shipBullet").css("animation-name", "fireBullet");
  setTimeout(function(){ $("#shipBullet").css("animation-name", "nothing"); }, 750);
}

function playerMoveLeft(){
  var whatMarLeft = $("#playerMarLeftCounter").html();
  whatMarLeft = parseInt(whatMarLeft);
  if (whatMarLeft <= -160){
    return false;
  }
  else{
    //alert (whatMarLeft);
    var x = whatMarLeft - 15;
    //alert(x);
    $("#playerShip").css("margin-left", x);
    $("#playerMarLeftCounter").html(x);
  }
}

function playerMoveRight(){
  var whatMarLeft = $("#playerMarLeftCounter").html();
  whatMarLeft = parseInt(whatMarLeft);
  if (whatMarLeft >= 1080){
    return false;
  }
  else {
    //alert (whatMarLeft);
    var x = whatMarLeft + 15;
    //alert(x);
    $("#playerShip").css("margin-left", x);
    $("#playerMarLeftCounter").html(x);
  }
}

I know it might be a bit scuffed because Im newer to programming, but if someone could help me just get the collision detection down, that would be great. Thanks!

collision detection is a pretty simple concept, you should understand the theory, and then "translate" it into JS, but we are not here to do your job, you should post what you have tried, and explain what's the problem — Alberto Sinigaglia, Aug 14 '20 at 19:20
Does this answer your question? [Javascript: Collision detection](https://stackoverflow.com/questions/2440377/javascript-collision-detection) — shreyasm-dev, Aug 14 '20 at 19:36

score 0 · Answer 1 · answered Aug 14 '20 at 19:33

Not sure about JQuery. But in vanilla JS you could use getBoundingClientRect() on an HtmlElement to get it's position and size. It would return you an object with properties {top, left, bottom, right, width, height}. From that point you can use simple rectangles intersection test to see if elements are touching/intersecting with each other like so:

// if colliding - will return true
function areColliding(r1, r2) {
    if (r1.left >= r2.right || r1.right >= r2.left) 
        return false; 
  
    if (r1.top <= r2.bottom || r1.bottom <= r2.top) 
        return false; 
  
    return true; 
}

The rest is just looping through your objects, getting their rects with getBoundingClientRect() and checking if they are colliding with areColliding().

p.s. I would use position: absolute along with transform: translate(X, Y); to set positions of your elements. This way if you know the sizes, you wouldn't need to call getBoundingClientRect() each time - which is quite expensive operation.

Javascript simple collision detection w/out using html canvas

1 Answers1