t14:00 Added ship collision

Author: luxedo

Diff for: README.md

@@ -21,7 +21,7 @@ Since I've already worked on a project to reproduce [PONG](https://armlessjohn40
 * Implement collision mechanics
   ~~* Collision with the black hole~~
   ~~* Collision with the borders~~
-  * Collision between Ships
+  ~~* Collision between Ships~~
   * Collision between Shots
   * Collision Ship-Shots
 * Create gameover screen
@@ -149,6 +149,41 @@ function addGravity(element, cx, cy, gravity) {
 
 ## Implement collision mechanics
 ### 11:35 - Collision with the black hole
-The black hole spawns any Ship that reaches its position to a random position in the board with `speed=0`.
+The black hole spawns any Ship that reaches its position to a random position in the board with `speed=0`. This is checked in the object's update method.
 ### 12:20 - Collision with the borders
-The game board wraps around itself, making it infinite. So, whenever a player or shot reaches the borders, they're spawned back in the other side of the board.
+The game board wraps around itself, making it infinite. So, whenever a player or shot reaches the borders, they're spawned back in the other side of the board. This also happens for the `Shot` class. The collision is checked in the object's update method.
+### 14:00 - Collision between Ships
+When the two players collide, there is an explosion and the game should end. This check is made in the gameloop's update method.
+The collision is calculated using [Separating Axis Theorem](https://en.wikipedia.org/wiki/Hyperplane_separation_theorem). It ended up in a function with 15 constants and a single if statement to tell whether the ships have collided.
+
+```javascript
+checkCollision = function(sprite1, sprite2) {
+  // Limits of the sprite
+  const p1c = sprite1.corners;
+  const p2c = sprite2.corners;
+  // Translate sprites to make p1c[0] the origin
+  const p1cT = sprite1.corners.map(val => [val[0]-p1c[0][0], val[1]-p1c[0][1]]);
+  const p2cT = sprite2.corners.map(val => [val[0]-p1c[0][0], val[1]-p1c[0][1]]);
+  // Calculate the rotation to align the p1 bounding box
+  const angle = Math.atan2(p1cT[2][1], p1cT[2][0]);
+  // Rotate vetcors to align
+  const p1cTR = p1cT.map(val => gameScreen.rotateVector(val, angle));
+  const p2cTR = p2cT.map(val => gameScreen.rotateVector(val, angle));
+  // Calculate extreme points of the bounding boxes
+  const p1left = Math.min(...p1cTR.map(value => value[0]))
+  const p1right = Math.max(...p1cTR.map(value => value[0]))
+  const p1top = Math.min(...p1cTR.map(value => value[1]))
+  const p1bottom = Math.max(...p1cTR.map(value => value[1]))
+  const p2left = Math.min(...p2cTR.map(value => value[0]))
+  const p2right = Math.max(...p2cTR.map(value => value[0]))
+  const p2top = Math.min(...p2cTR.map(value => value[1]))
+  const p2bottom = Math.max(...p2cTR.map(value => value[1]))
+  // Check if shadows overlap in both axes
+  if (p2left < p1right && p1left < p2right && p2top < p1bottom && p1top < p2bottom) return true;
+  return false;
+}
+```
+
+I also created an `explode` method in the `Ship` class so when they collide, it shows a satisfying explosion. The explosion have 4 frames of dots generated randomly with varying radius.
+
+![explosion](report-assets/explosion.gif "explosion")

Diff for: draw.js

@@ -22,12 +22,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 const ROTATION_SPEED = 3;
 const THRUSTER_SPEED = 0.002;
 const FIRE_LENGTH = 10;
-const SHOT_DISTANCE = 300;
+const SHOT_DISTANCE = 200;
 const SHOT_SPEED = 1;
 const SHOT_SIZE = 5;
 const SHOT_INTERVAL = 500;
 const BLACKHOLE_SIZE = 12;
 const MAXACCEL = 1;
+const BLAST_SIZE = 50;
 
 function drawArray(array, width=1, color="#FFF") {
   array = array.slice();
@@ -100,6 +101,10 @@ function addGravity(element, cx, cy, gravity) {
   element.speedY += (fy<MAXACCEL?fy:MAXACCEL);
 }
 
+function checkNumber(number) {
+  return !isNaN(parseFloat(number)) && isFinite(number);
+}
+
 class BaseSprite {
   constructor(x, y) {
     this.x = x;
@@ -111,6 +116,31 @@ class BaseSprite {
   update() {
     this.x += this.speedX;
     this.y += this.speedY;
+
+    // border collision
+    let spriteToBorder = Game.radius - Math.sqrt(Math.pow(this.x -
+      Game.width/2,2) + Math.pow(this.y - Game.height/2, 2));
+    if (spriteToBorder <= 0) {
+      let angle = Math.atan2(this.y-Game.height/2, this.x-Game.width/2)+Math.PI;
+      let x = (Game.radius-10)*Math.cos(angle)+Game.width/2;
+      let y = (Game.radius-10)*Math.sin(angle)+Game.height/2;
+      this.resetSprite(x, y);
+    }
+  }
+  resetSprite(x, y, rotation=false, speedX=false, speedY=false) {
+    if (checkNumber(speedX)) this.speedX = speedX;
+    if (checkNumber(speedY)) this.speedY = speedY;
+    if (checkNumber(rotation)) this.updateRotation(rotation);
+    this.x = x;
+    this.y = y;
+  }
+  respawnSprite(speedX=false, speedY=false, angle=false) {
+    let location = Math.random()*Math.PI*2;
+    if (angle) location = angle;
+    let x = (Game.radius-10)*Math.cos(location)+Game.width/2;
+    let y = (Game.radius-10)*Math.sin(location)+Game.height/2;
+    let rotation = Math.random()*Math.PI*2;
+    this.resetSprite(x, y, rotation, speedX, speedY);
   }
 }
 
@@ -163,12 +193,21 @@ class Ship extends BaseSprite {
     return retval;
   }
 
+  get corners() {
+    let lt = this.rotateVector([this.left, this.top]);
+    let rt = this.rotateVector([this.right, this.top]);
+    let lb = this.rotateVector([this.left, this.bottom]);
+    let rb = this.rotateVector([this.right, this.bottom]);
+    let retval = [lt, rt, lb, rb].map(value => [value[0]+this.x, value[1]+this.y])
+    return retval;
+  }
+
   draw() {
     // draw ship
     this.showShape.forEach(value => drawArray(value
       .map(vector => [vector[0]*this.size+this.x, vector[1]*this.size+this.y])));
     // draw thrusters fire
-    if (this.thrusters) {
+    if (this.thrusters && !this.dead) {
       let fireLength = Math.random()*FIRE_LENGTH*this.size;
       let fireArray = [this.rear, [this.rear[0]-fireLength*Math.cos(this.rotation), this.rear[1]-fireLength*Math.sin(this.rotation)]];
       drawArray(fireArray);
@@ -177,6 +216,7 @@ class Ship extends BaseSprite {
     this.shots.forEach(shot => shot.draw());
   }
   update() {
+    if (this.dead) return;
     super.update();
     this.thrusters = false;
     if (Key.isDown(this.keyUp)) {
@@ -216,31 +256,40 @@ class Ship extends BaseSprite {
     // black hole collision
     let playerToBlackhole = Math.sqrt(Math.pow(this.x - gameScreen.blackhole.x, 2)+
       Math.pow(this.y - gameScreen.blackhole.y, 2));
-    if (playerToBlackhole <= BLACKHOLE_SIZE) gameScreen.respawnPlayer(this, 0, 0);
+    if (playerToBlackhole <= BLACKHOLE_SIZE) this.respawnSprite(0, 0);
 
-    // border collision
-    let playerToBorder = Game.radius - Math.sqrt(Math.pow(this.x -
-      Game.width/2,2) + Math.pow(this.y - Game.height/2, 2));
-    if (playerToBorder <= 0) {
-      let angle = Math.atan2(this.y-Game.height/2, this.x-Game.width/2)+Math.PI;
-      let x = (Game.radius-10)*Math.cos(angle)+Game.width/2;
-      let y = (Game.radius-10)*Math.sin(angle)+Game.height/2;
-      this.resetPlayer(x, y);
-    }
   }
   updateRotation(angle) {
-    if (!isNaN(parseFloat(angle)) && isFinite(angle)) this.rotation = angle;
+    if (checkNumber(angle)) this.rotation = angle;
     this.showShape = this.shape
       .map(value0 => value0
         .map(value1 => this.rotateVector(value1)
       ));
   }
-  resetPlayer(x, y, rotation=false, speedX=false, speedY=false) {
-    if (!isNaN(parseFloat(speedX)) && isFinite(speedX)) this.speedX = speedX;
-    if (!isNaN(parseFloat(speedY)) && isFinite(speedY)) this.speedY = speedY;
-    if (!isNaN(parseFloat(rotation)) && isFinite(rotation)) this.updateRotation(rotation);
-    this.x = x;
-    this.y = y;
+  explode() {
+    if (this.dead) return;
+    this.dead = true;
+    let spriteRadius = Math.max(...[this.top, this.bottom, this.left, this.right].map((val) => Math.abs(val)))
+    let blast0 = this.fillExplosion(spriteRadius, BLAST_SIZE);
+    let blast1 = this.fillExplosion(spriteRadius*2, BLAST_SIZE);
+    let blast2 = this.fillExplosion(spriteRadius*5, BLAST_SIZE);
+    let blast3 = this.fillExplosion(spriteRadius, BLAST_SIZE);
+    let empty = []
+    this.showShape = blast0;
+    setTimeout(()=> this.showShape = blast1, 60);
+    setTimeout(()=> this.showShape = blast2, 120);
+    setTimeout(()=> this.showShape = blast3, 180);
+    setTimeout(()=> this.showShape = empty, 240);
+  }
+  fillExplosion(radius, debris) {
+    let array = []
+    while (array.length < debris) {
+      let theta = Math.random()*2*Math.PI;
+      let r = Math.random()*radius;
+      let [x, y] = [r*Math.cos(theta), r*Math.sin(theta)]
+      array.push([[x, y], [x+1, y+1]])
+    }
+    return array;
   }
 }
 

Diff for: gameScreen.js

@@ -20,10 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 "use strict";
 
 const STARS = 40;
-const GRAVITY = 50;
+const GRAVITY = 20;
 
-const p1Spawn = [100, 100];
-const p2Spawn = [500, 500];
+const p1Spawn = [150, 150];
+// const p1Spawn = [450, 410];
+const p2Spawn = [450, 450];
 const player1Keys = {
   keyUp: 87,
   keyDown: 83,
@@ -43,23 +44,23 @@ const player1Vectors = [
 ];
 const player2Vectors = [
   [[8, 0], [1, 2], [-8, 2], [-8, -2], [1, -2], [8, 0]],
-  [[-1,  2], [-6,  4], [-8,  4], [-8, 2]],
-  [[-1, -2], [-6, -4], [-8, -4], [-8, -2]]
+  [[-1,  2], [-6,  4], [-8,  4], [-8,  2]],
+  [[-1, -2], [-6, -4], [-8, -4], [-8, -2]],
+  [[8, 0], [-8, 0]]
 ];
 
 gameScreen.init = function () {
   // Setup background
   gameScreen.stars = []
   let [xc, yc] = [Game.width/2, Game.height/2]
   while (gameScreen.stars.length < STARS) {
-      let [xp, yp] = [Math.random()*Game.width, Math.random()*Game.height]
-      if (Math.sqrt(Math.pow(xp-xc, 2)+Math.pow(yp-yc, 2))<Game.radius) {
-        gameScreen.stars.push([xp, yp]);
-    }
+    let theta = Math.random()*2*Math.PI;
+    let r = Math.random()*Game.radius;
+    gameScreen.stars.push([r*Math.cos(theta)+Game.width/2, r*Math.sin(theta)+Game.height/2]);
   }
   // Create players
-  gameScreen.player1 = new Ship(...p1Spawn, player1Keys, player1Vectors, 2);
-  gameScreen.player2 = new Ship(...p2Spawn, player2Keys, player2Vectors, 2);
+  gameScreen.player1 = new Ship(...p1Spawn, player1Keys, player1Vectors, 1.5);
+  gameScreen.player2 = new Ship(...p2Spawn, player2Keys, player2Vectors, 1.5);
   gameScreen.player1.updateRotation(Math.PI/4);
   gameScreen.player2.updateRotation(-3*Math.PI/4);
   gameScreen.blackhole = new Blackhole(Game.width/2, Game.height/2)
@@ -82,15 +83,44 @@ gameScreen.update = function () {
   gameScreen.player1.update();
   gameScreen.player2.update();
   gameScreen.blackhole.update();
-  addGravity(gameScreen.player1, Game.width/2, Game.height/2, GRAVITY);
-  addGravity(gameScreen.player2, Game.width/2, Game.height/2, GRAVITY);
+  // addGravity(gameScreen.player1, Game.width/2, Game.height/2, GRAVITY);
+  // addGravity(gameScreen.player2, Game.width/2, Game.height/2, GRAVITY);
+
+  //check for players collision
+  if (gameScreen.checkCollision(gameScreen.player1, gameScreen.player2)) {
+    gameScreen.player1.explode();
+    gameScreen.player2.explode();
+  }
+}
+
+gameScreen.rotateVector = function(vector, angle) {
+  let x = (vector[0]*Math.cos(angle)-vector[1]*Math.sin(angle));
+  let y = (vector[1]*Math.cos(angle)+vector[0]*Math.sin(angle));
+  return [x, y]
 }
 
-gameScreen.respawnPlayer = function(player, speedX=false, speedY=false, angle=false) {
-  let location = Math.random()*Math.PI*2;
-  if (angle) location = angle;
-  let x = (Game.radius-10)*Math.cos(location)+Game.width/2;
-  let y = (Game.radius-10)*Math.sin(location)+Game.height/2;
-  let rotation = Math.random()*Math.PI*2;
-  player.resetPlayer(x, y, rotation, speedX, speedY);
+gameScreen.checkCollision = function(sprite1, sprite2) {
+  // Limits of the sprite
+  const p1c = sprite1.corners;
+  const p2c = sprite2.corners;
+  // Translate sprites to make p1c[0] the origin
+  const p1cT = sprite1.corners.map(val => [val[0]-p1c[0][0], val[1]-p1c[0][1]]);
+  const p2cT = sprite2.corners.map(val => [val[0]-p1c[0][0], val[1]-p1c[0][1]]);
+  // Calculate the rotation to align the p1 bounding box
+  const angle = Math.atan2(p1cT[2][1], p1cT[2][0]);
+  // Rotate vetcors to align
+  const p1cTR = p1cT.map(val => gameScreen.rotateVector(val, angle));
+  const p2cTR = p2cT.map(val => gameScreen.rotateVector(val, angle));
+  // Calculate extreme points of the bounding boxes
+  const p1left = Math.min(...p1cTR.map(value => value[0]))
+  const p1right = Math.max(...p1cTR.map(value => value[0]))
+  const p1top = Math.min(...p1cTR.map(value => value[1]))
+  const p1bottom = Math.max(...p1cTR.map(value => value[1]))
+  const p2left = Math.min(...p2cTR.map(value => value[0]))
+  const p2right = Math.max(...p2cTR.map(value => value[0]))
+  const p2top = Math.min(...p2cTR.map(value => value[1]))
+  const p2bottom = Math.max(...p2cTR.map(value => value[1]))
+  // Check if shadows overlap in both axes
+  if (p2left < p1right && p1left < p2right && p2top < p1bottom && p1top < p2bottom) return true;
+  return false;
 }