0

I rotated my squares on canvas and I want to detect collision between them, although the normal method obviously doesn't work. How should it be done?

As you may see if they collide one of the boxes turns red, but if only the tips collide nothing happens.

var canvas,ctx,box1,box2,mouseX,mouseY,intervalo;
function load(){
 canvas = document.getElementById('box');
 ctx = canvas.getContext('2d');
 
 function box(x,y,width,height,color,angle){
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.color = color;
  this.angle = angle;
  this.rotateX = x;
  this.rotateY = y;
  
  this.drawn = function(){
   
   var rad = this.angle*(Math.PI/180);//Here you should turn degrees into radians by -> *(Math.PI/180);
   ctx.translate(this.x + (this.width / 2), this.y + (this.height / 2))//Change screen cordinates to center of object
   ctx.rotate(rad);//Rotate canvas
   //What you want to rotate:
   this.rotateX = (this.width / 2) * (-1);
   this.rotateY = (this.height / 2) * (-1);
   ctx.fillStyle = this.color;
   ctx.fillRect(this.rotateX,this.rotateY,this.width,this.height);
   //end
   ctx.rotate(rad * (-1));//Unrotate canvas
   ctx.translate((this.x + (this.width / 2)) * (-1), (this.y + (this.height / 2)) * (-1));//Change screen cordinates back to normal
  }
 }
 box1 = new box(500,250,50,50,"white",45);
 box2 = new box(250,250,50,50,"white",45);
 
 document.onmousemove = mouseMove;
 function mouseMove(event) {
  event = event || canvas.event
  mouseX = event.pageX;
  mouseY = event.pageY;
  mouseX = mouseX - 11;
  mouseY = mouseY - 13;
  box2.x = mouseX;
  box2.y = mouseY;
 }
 intervalo = setInterval(animation, 1000/60);
}
function animation(){
 ctx.fillStyle = "black";
 ctx.fillRect(0,0,canvas.width,canvas.height);
 for (var i = 0;i < 2; i++){
  //Colision detection that doesn't work:
  if (!(box1.x+box1.width < box2.x) &&
  !(box2.x+box2.width < box1.x) &&
  !(box1.y+box1.height < box2.y) &&
  !(box2.y+box2.height < box1.y)) {
   console.log("colision");
   box2.color = "red";
  } else {
   box2.color = "white";
  } 
  
  box1.drawn();
  box2.drawn();
 }
}
#box {
 border: 1px solid black;
 border-color: white;
 
}
#button {
 border: none;
 background-color: gray;
 width: 70;
 height: 50;
}
canvas {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
 background-color: black;
 color: white;
 font-family: courier new;
}
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/estilo.css">
  <script src="js/main.js"></script>
 </head>
 <body onload="load()">
  <canvas id="box" width="1330" height="500"></canvas>
  <button onclick="play()" id="button">Play</button>
 </body>
</html>
Timerºº
  • 17
  • 6
  • Use the *Separating Axis Theorem* to detect collisions between rotated polygons. Here's a link to the [javascript version](http://stackoverflow.com/questions/10962379/how-to-check-intersection-between-2-rotated-rectangles/12414951#12414951) of the duplicate question – markE Apr 10 '16 at 05:46
  • @markE Is there any other way to do that? A simpler one for instance. – Timerºº Apr 10 '16 at 20:55
  • SAT is has a few moving parts but it is relatively simple. Alternatively, I guess you could hit-test each 4 lines of both rectangles against each other (4x4 tests == 16 collision tests). – markE Apr 10 '16 at 21:06

0 Answers0