Development

index.html

@@ -13,6 +13,7 @@
         <canvas id = "tankCanvas"></canvas>
         <canvas id = "bulletCanvas"></canvas>
         <canvas id = "grassCanvas"></canvas>
+
     </div>
 
     <!-- Loading all the classes -->
@@ -25,9 +26,10 @@
     <script src = "js/Lib/Enemy.js"></script>
     <script src = "js/Lib/Bullet.js"></script>
     <script src = "js/Lib/Controller.js"></script>
-    <script src = "Cell.js"></script>
-    <script src = "Grid.js"></script>
-
+    <script src = "js/Lib/Cell.js"></script>
+    <script src = "js/Lib/Grid.js"></script>
+    <script src = "js/lib/RectangleCollision.js"></script>
+
     <!-- Loading the code files -->
     <script src = "js/init.js"></script>
     <script src = "js/players.js"></script>

js/Lib/Enemy.js

@@ -12,6 +12,7 @@ class Enemy extends Tank{
             this.angle = (Direction[a].getAngle() + PI/2)%(2*PI);
             this.counter = 0;    
             this.fireBullet(); 
+
         }
 
         if(this.position.x + this.width >= WIDTH || this.position.x <= 0){
@@ -21,6 +22,9 @@ class Enemy extends Tank{
         if(this.position.y + this.height >=HEIGHT || this.position.y <= 0){
             this.velocity.y = -this.velocity.y;
         }
+
+
+
         this.move(this.velocity);
     }
 }

js/Lib/ReactangleCollision.js

@@ -0,0 +1,8 @@
+function RectangleCollision(rect1, rect2){
+  let nearToOrigin = rect1.position.x < rect2.position.x ? rect1:rect2 ;
+  let farToOrigin = rect1.position.x < rect2.position.x ? rect2 :rect1 ;
+  if(farToOrigin.position.x - nearToOrigin.position.x <= nearToOrigin.width &&farToOrigin.position.y - nearToOrigin.position.y<= nearToOrigin.height)
+  return true 
+  else return false
+}
+alert();

js/Lib/RectangleCollision.js

@@ -0,0 +1,36 @@
+function RectangleCollision(rect1, rect2){
+    let x1 = rect1.position.x;
+    let x2 = rect2.position.x;
+    let y1 = rect1.position.y;
+    let y2 = rect2.position.y;
+    let w1 = rect1.width;
+    let w2 = rect2.width;
+    let h1 = rect1.height;
+    let h2 = rect2.height;
+    let collisionData = {
+        collided : false,
+        collisionDistance : new Vec2(),
+    };
+
+
+    if(x2 + w2 > x1  && x2 < x1 + w1){
+        if(y2 + h2 > y1  && y2 < y1 + h1){
+            if(x1 < x2){
+                collisionData.collisionDistance.x = x1 + w1 - x2;
+            }
+            else{
+                collisionData.collisionDistance.x = x2 + w2 - x1;
+            }
+            if(y1 < y2){
+                collisionData.collisionDistance.y = y1 + h1 - y2;
+            }
+            else{
+                collisionData.collisionDistance.y = y2 + h2 - y1;
+            }
+            collisionData.collided = true;
+        }
+    }
+    return collisionData;
+}
+
+

js/Lib/TankCollision.js

@@ -0,0 +1,7 @@
+function RectangleCollision(rect1, rect2){
+  let nearToOrigin = rect1.position.x < rect2.position.x ? rect1:rect2 ;
+  let farToOrigin = rect1.position.x < rect2.position.x ? rect2 :rect1 ;
+  if(farToOrigin.position.x - nearToOrigin.position.x <= nearToOrigin.width &&farToOrigin.position.y - nearToOrigin.position.y<= nearToOrigin.height)
+  return true 
+  else return false
+}

js/init.js

@@ -34,7 +34,7 @@ let WorldSpace = {
 
 const ImageLoader = new ImageLoaderClass();
 const audioloader = new AudioLoader();
-const blastSound = audioloader.load('res/sounds/blast.mp3');
+//const destroySound = audioloader.load('res/sounds/destroy.mp3');
 const fireSound = audioloader.load('res/sounds/fire.wav');
 
 let playerIsAlive = true;

js/main.js

@@ -8,17 +8,32 @@ Game.update = ()=>{
     }
 
     //Check for collisions
+
     for(let i = 0; i<enemies.length; i++){
+        for(let j = i + 1; j < enemies.length; j++){
+            let cData = RectangleCollision(enemies[i],enemies[j]);
+            if(cData.collided==true){
+                console.log(cData);
+                let swap = enemies[i].velocity;
+                enemies[i].velocity = enemies[j].velocity;
+                enemies[j].velocity = swap;
+
+            }
+        }
+        cData = RectangleCollision(player, enemies[i]);
+        if(cData.collided){
+            enemies[i].move(new Vec2(0,0));
+        }
         //between players bullet and enemies
         if(player.bullets[0].isInside(enemies[i]) && !player.bullets[0].isAvailable){
-            blastSound.play();
+            //blastSound.play();
             player.bullets[0].isAvailable = true;
             enemies[i].move(new Vec2(WIDTH, HEIGHT));
             enemies[i].velocity = new Vec2(0,0);
         }
         //between player and enemy bullets
         if(enemies[i].bullets[0].isInside(player) && !enemies[i].bullets[0].isAvailable){
-            blastSound.play();
+            // blastSound.play();
             enemies[i].bullets[0].isAvailable = true;
             playerIsAlive = false;
 
@@ -45,6 +60,7 @@ Game.draw = ()=>{
     }
 
     //Ending the game
+
     if(!playerIsAlive)
         Game.pause();
 }
@@ -67,3 +83,4 @@ grassGrid.cell[Math.floor(Math.random()*7)][Math.floor(Math.random()*16)].value
 }
 
 grassGrid.drawGrid(grassCtx);
+

js/players.js

@@ -21,6 +21,26 @@ ImageLoader.onEveryImageLoaded = () => {
         enemies[i].loadBullet(bulletImage);
     }
 
+    for(let i = 0; i<enemies.length; i++){
+        for(let j = i + 1; j < enemies.length; j++){
+            let cData = RectangleCollision(enemies[i],enemies[j]);
+            while(cData.collided==true){
+                cData = RectangleCollision(enemies[i],enemies[j]);
+                if(enemies[i].position.x <= enemies[j].position.x){
+                    enemies[i].move(new Vec2(-cData.collisionDistance.x, 0));
+                }
+                else{
+                    enemies[j].move(new Vec2(-cData.collisionDistance.x, 0));
+                }
+                if(enemies[i].position.y <= enemies[j].position.y){
+                    enemies[i].move(new Vec2(0,-cData.collisionDistance.y));
+                }
+                else{
+                    enemies[j].move(new Vec2(0,-cData.collisionDistance.y));
+                }  
+            }
+        }
+    }
     //Starting the game
     Game.start();   
 }

test.htm

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+</head>
+<body>
+    <canvas id = "testCanvas"></canvas>
+    <script src = "js/lib/RectangleCollision.js"></script>
+</body>
+</html>