Fixed guard overlap with player visual bug

create1.js

@@ -1,5 +1,9 @@
+var guards = []
+
 function create1() {
 
+  guards = []
+
   document.getElementById("nextLevel").addEventListener("click", (event) => {
     switchLevel("3");
   });
@@ -26,7 +30,7 @@ function create1() {
    // GENERATE WALLS ---------------------------------------------------------------------
     // Create the horizontal walls and the vertical walls
     wall = this.physics.add.staticGroup();
-
+        guardIndex = 0;
     for(i=0; i<arr1.length; i++){
      for(j=0;j<arr1[i].length;j++){
     if(arr1[i][j]==1){
@@ -49,8 +53,11 @@ function create1() {
         }
       }
     }
-    player.setDepth(1);
-    jewel.setDepth(2);
+    player.setDepth(2);
+    jewel.setDepth(1);
+    for (i = 0; i < guards.length; i++){
+      guards[i].setDepth(3);
+    }
 
   const LEVEL_TWO_BOTTOM = 2 * CENTER_VERTICAL - 100;
 

create2.js

@@ -1,6 +1,9 @@
 arr2 = getLevel(2);
+var guards = []
 
 function create2() {
+
+  guards = []
 
   document.getElementById("nextLevel").addEventListener("click", (event) => {
     switchLevel("4");
@@ -23,6 +26,7 @@ function create2() {
   wall = this.physics.add.staticGroup();
 
 
+    guardIndex = 0;
 
   for(i=0; i<arr2.length; i++){
    for(j=0;j<arr2[i].length;j++){
@@ -31,7 +35,8 @@ function create2() {
     }
      //adding guard to that position
     else if(arr2[i][j]==3){
-      guards = this.physics.add.sprite(j*40+20,i*40+8, "guard").setScale(guardScale);
+      guards[guardIndex] = this.physics.add.sprite(j*40+20,i*40+8, "guard").setScale(guardScale);
+      guardIndex++;
      }
      //adding gem to that position
     else if(arr2[i][j]==4){
@@ -50,9 +55,11 @@ function create2() {
       }
     }
   }
-  player.setDepth(1);
-  guards.setDepth(2);
-  jewel.setDepth(2);
+  player.setDepth(2);
+  for (i = 0; i < guards.length; i++){
+    guards[i].setDepth(3);
+  }  
+  jewel.setDepth(1);
 
 const LEVEL_TWO_BOTTOM = 2 * CENTER_VERTICAL - 100;
 

create3.js

@@ -1,7 +1,10 @@
 
 arr3 = getLevel(3);
+var guards = []
 
 function create3() {
+
+    guards = []
     array_lev3 = getLevel(3);
     generateCheckerboard(this, 8); // Generate background
     setup(this);
@@ -24,8 +27,7 @@ function create3() {
     wall = this.physics.add.staticGroup();
 
     //Sets framework for multiple guards, adds them to an array to be used in collisions
-    var guards = []
-    guardIndex = 0;
+        guardIndex = 0;
 
       for (i = 0; i < arr3.length; i++){
         for(j=0; j < arr3[i].length; j++){
@@ -55,11 +57,11 @@ function create3() {
           }
         }
       }
-    player.setDepth(1);
+    player.setDepth(2);
     for (i = 0; i < guards.length; i++){
-      guards[i].setDepth(2);
+      guards[i].setDepth(3);
     }
-    jewel.setDepth(2);
+    jewel.setDepth(1);
 
     //  Input Events
     cursors = this.input.keyboard.createCursorKeys();

create4.js

@@ -1,6 +1,8 @@
 arr4 = getLevel(4);
+var guards = []
 
 function create4() {
+    guards = [] 
     generateCheckerboard(this, 8); // Generate background
     setup(this)
 
@@ -48,11 +50,11 @@ function create4() {
           }
         }
       }
-      player.setDepth(1);
+      player.setDepth(2);
       for (i = 0; i < guards.length; i++){
-        guards[i].setDepth(2);
+        guards[i].setDepth(3);
       }
-      jewel.setDepth(2);
+      jewel.setDepth(1);
 
     //  Input Events
     cursors = this.input.keyboard.createCursorKeys();

create5.js

@@ -1,6 +1,8 @@
 arr5 = getLevel(5);
+var guards = []
 
 function create5() {
+    guards = [] 
     generateCheckerboard(this, 8); // Generate background
     setup(this);
 
@@ -20,8 +22,7 @@ function create5() {
     wall = this.physics.add.staticGroup();
 
     //Sets framework for multiple guards, adds them to an array to be used in collisions
-    var guards = []
-    guardIndex = 0;
+        guardIndex = 0;
 
     //Sets framework for the laser, adds them to an array to be used in collisions
     var lasers = []
@@ -75,11 +76,11 @@ function create5() {
           }
         }
       }
-      player.setDepth(1);
+      player.setDepth(2);
       for (i = 0; i < guards.length; i++){
-        guards[i].setDepth(2);
+        guards[i].setDepth(3);
       }
-      jewel.setDepth(2);
+      jewel.setDepth(1);
     //  Input Events
     cursors = this.input.keyboard.createCursorKeys();
 

createDemo.js

@@ -1,8 +1,9 @@
 
 arr0 = getLevel(0);
+var guards = []
 
 function createDemo() {
-
+  guards = []
   document.getElementById("nextLevel").addEventListener("click", (event) => {
     switchLevel("2");
   });
@@ -30,7 +31,6 @@ function createDemo() {
   wall = this.physics.add.staticGroup();
 
   //Sets framework for multiple guards, adds them to an array to be used in collisions
-  var guards = []
   guardIndex = 0;
 
   for (i = 0; i < arr0.length; i++){
@@ -62,11 +62,11 @@ function createDemo() {
       }
     }
   }
-  player.setDepth(1);
+  player.setDepth(2);
   for (i = 0; i < guards.length; i++){
-    guards[i].setDepth(2);
+    guards[i].setDepth(3);
   }
-  jewel.setDepth(2);
+  jewel.setDepth(1);
 
   avoidGuard = this.physics.add.staticGroup();
   avoidGuard.create(400, CENTER_VERTICAL + 175, "AvoidGuards").setScale(1);

main.js

@@ -271,9 +271,9 @@ function move(dir, scene) {
       targetY = Math.round(player.y);
       playerCol += 1;
       targetX = Math.round(playerCol * moveIncrement+20);
-
-
     }
+
+    adjust_guards_depth(scene);
     console.log("CURRENT: " + player.x + " " + player.y);
     console.log("TARGET: " + targetX + " " + targetY);
     scene.physics.moveTo(player, targetX, targetY, SPEED);
@@ -282,6 +282,18 @@ function move(dir, scene) {
 
 }
 
+function adjust_guards_depth(scene) {
+  for (i = 0; i < guards.length; i++){
+    guardRow = Math.floor(guards[i].y / 40);
+    if (playerRow == guardRow + 1) {
+      guards[i].setDepth(1);
+    }
+    else {
+      guards[i].setDepth(3);
+    }
+  }
+}
+
 //Checks if the player's next move will hit a wall bounding box
 //returns false if the path is clear
 function checkBounds(dir) {
@@ -358,7 +370,7 @@ function checkJewel(playerRow, playerCol) {
   if (currentBoard[playerRow][playerCol] == 4){
     this.collectJewel();
   } else if (playerRow > 0) {
-    if (currentBoard[playerRow+1][playerCol] == 4){
+    if (currentBoard[playerRow][playerCol] == 4){
       this.collectJewel();
     }
   }