movement

assets/script.js

@@ -1,7 +1,7 @@
 class Game {
   constructor() {
     this.mapInstance = null;
-    this.level = 153;
+    this.level = 0;
     this.lives = 10;
     this.points = 0;
     this.totalMoves = 0;
@@ -16,6 +16,7 @@ class Game {
 
   loop() {
     this.mapInstance.display();
+    this.mapInstance.getKeystroke();
     // this.mapInstance.waitForInput();
     // this.mapInstance.checkWinCondition();
   }
@@ -33,6 +34,7 @@ class Map {
 
     this.playerX = null;
     this.playerY = null;
+    this.playerDir = 'f'
     this.previousElement = " ";
 
     this.win = false;
@@ -55,13 +57,13 @@ class Map {
       let rowElements = levelArray[i].split("");
 
       if (rowElements.includes("@")) {
-        this.playerX = i - 1;
+        this.playerY = i - 1;
-        this.playerY = rowElements.indexOf("@");
+        this.playerX = rowElements.indexOf("@");
       }
 
       let storageTypes = [".", "*"];
       for (let j = 0; j < storageTypes.length; j++) {
-        if (storageTypes[j] in rowElements) {
+        if (rowElements.includes(storageTypes[j])) {
           for (let k = 0; k < rowElements.length; k++) {
             if (rowElements[k] === storageTypes[j]) {
               this.storageLocations.push([i - 1, k]);
@@ -73,7 +75,36 @@ class Map {
     }
   }
 
+  getKeystroke() {
+    var self = this;
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'h') {
+        self.playerDir = 'l';
+        self.move('left');
+        self.display();
+      } else if (event.key === 'j') {
+        self.playerDir = 'f';
+        self.move('down');
+        self.display();
+      } else if (event.key === 'k') {
+        self.playerDir = 'b';
+        self.move('up');
+        self.display();
+      } else if (event.key === 'l') {
+        self.playerDir = 'r';
+        self.move('right');
+        self.display();
+      }
+    });
+  }
+
   display() {
+    for (let i = 0; i < this.storageLocations.length; i++) {
+      if (this.mapArray[this.storageLocations[i][0]][this.storageLocations[i][1]] === ' ') {
+        this.mapArray[this.storageLocations[i][0]][this.storageLocations[i][1]] = '.';
+      }
+    }
+
     let map = "";
     for (let i = 0; i < this.mapArray.length; i++) {
       for (let j = 0; j < this.mapArray[i].length; j++) {
@@ -86,16 +117,92 @@ class Map {
         } else if (this.mapArray[i][j] === "*") {
           map += '<img src="assets/img/sprites/fire_coal.png">';
         } else if (this.mapArray[i][j] === "@") {
-          map += '<img src="assets/img/sprites/charf.png">';
+          map += `<img src="assets/img/sprites/char${this.playerDir}.png">`;
         } else if (this.mapArray[i][j] === ".") {
           map += '<img src="assets/img/sprites/grill.png">';
         }
       }
       map += "<br>";
     }
+
     let mapDiv = document.getElementById("map");
+    mapDiv.innerHTML = '';
     mapDiv.innerHTML = map;
   }
+
+  move(direction) {
+    g.levelMoves[this.level] += 1;
+    g.totalMoves += 1;
+
+    let tmpPos = this.calculateFuturePosition(this.playerX, this.playerY, direction)
+
+    let tmpX = tmpPos[0];
+    let tmpY = tmpPos[1];
+
+    let futurePosition = this.mapArray[tmpY][tmpX];
+
+    if (!['#'].includes(futurePosition)) {
+      let canMove = true;
+      if (['0', '*'].includes(futurePosition)) {
+        futurePosition = ' ';
+        canMove = this.pushBoulder(tmpY, tmpX, direction);
+
+      }
+
+      if (canMove) {
+        this.mapArray[this.playerY][this.playerX] = this.previousElement;
+        this.previousElement = futurePosition;
+        this.mapArray[tmpY][tmpX] = '@';
+        this.playerX = tmpX;
+        this.playerY = tmpY;
+      }
+    }
+  }
+
+  calculateFuturePosition(x, y, direction) {
+    let dirList = direction.split(' ');
+
+    if (dirList.includes('right')) {
+      x += 1
+    } else if (dirList.includes('left')) {
+      x -= 1
+    }
+
+    if (dirList.includes('down')) {
+      y += 1
+    } else if (dirList.includes('up')) {
+      y -= 1
+    }
+
+    return [x, y]
+
+  }
+
+  pushBoulder(tmpY, tmpX, direction) {
+    if (direction.split(' ').length > 1) {
+      return false
+    }
+
+    let tmpBoulderPos = this.calculateFuturePosition(tmpX, tmpY, direction);
+    let tmpBoulderX = tmpBoulderPos[0];
+    let tmpBoulderY = tmpBoulderPos[1];
+
+    let futurePosition = this.mapArray[tmpBoulderY][tmpBoulderX];
+
+    if (!['#', '0', '*'].includes(futurePosition)) {
+      if (futurePosition == '.') {
+        this.mapArray[tmpBoulderY][tmpBoulderX] = '*'
+      } else {
+        this.mapArray[tmpBoulderY][tmpBoulderX] = '0'
+      }
+
+      return true
+    } else {
+      return false
+    }
+
+
+  }
 }
 
 let levels = microban_levels;