wall.png + key movement

index.html

@@ -20,7 +20,7 @@
             </p>
         <![endif]-->
         Coucou
-        <canvas id="canvas" width="400" height="800"></canvas>
+        <canvas id="canvas" width="800" height="400"></canvas>
     </body>
     <!-- <script type="module" src="./modules/ressources.mjs"></script> -->
     <script type="module" src="./script.js"></script>

modules/playground.mjs

@@ -68,10 +68,6 @@ export const generatePlayground = (levelBlueprint, canvasWidth, canvasHeight) =>
       let finishedChecking = false;
       let moveCount = 0;
       while (aux.isWithin({x: this.width, y: this.height}) && !finishedChecking) {
-        console.log("checking at position:");
-        console.log(aux);
-        console.log("answer");
-        console.log(this.canMove(aux));
         switch(this.canMove(aux)) {
           case CanMove.Yes:
             willMove = true;
@@ -87,21 +83,23 @@ export const generatePlayground = (levelBlueprint, canvasWidth, canvasHeight) =>
             break;
         }
       }
-      console.log(this.playerPos);
-      console.log("in playground.move");
       if (willMove) {
         this.playerPos.move(direction);
         let posOfObjectToMove = copyPosition(aux);
         for (let i = 0; i < moveCount; i++) {
           posOfObjectToMove.moveBackwards(direction);
-          console.log("I try to move");
           [this.foreground[aux.y][aux.x], this.foreground[posOfObjectToMove.y][posOfObjectToMove.x]] =
             [this.foreground[posOfObjectToMove.y][posOfObjectToMove.x], this.foreground[aux.y][aux.x]];
+          [this.foreground[aux.y][aux.x].x, this.foreground[posOfObjectToMove.y][posOfObjectToMove.x].x] =
+            [this.foreground[posOfObjectToMove.y][posOfObjectToMove.x].x, this.foreground[aux.y][aux.x].x];
+          [this.foreground[aux.y][aux.x].y, this.foreground[posOfObjectToMove.y][posOfObjectToMove.x].y] =
+            [this.foreground[posOfObjectToMove.y][posOfObjectToMove.x].y, this.foreground[aux.y][aux.x].y];
           aux.moveBackwards(direction);
         }
       }
     },
-    draw(ctx) {
+    draw(ctx, width, height) {
+      ctx.clearRect(0, 0, width, height);
       for (let row of this.background) {
         for (let tile of row) {
           tile.draw(ctx);
@@ -112,6 +110,18 @@ export const generatePlayground = (levelBlueprint, canvasWidth, canvasHeight) =>
           tile.draw(ctx);
         }
       }
+    },
+    isSolved() {
+      for (let y = 0; y < this.height; y++) {
+        for (let x = 0; x < this.width; x++) {
+          if ( this.background[y][x].isDestination ) {
+            if ( !this.foreground[y][x].isBox ) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
     }
   };
 }

modules/position.mjs

@@ -1,3 +1,5 @@
+import { MoveDirection } from '/modules/enums.mjs'
+
 export class Position {
   constructor(x, y) {
     this.x = x;

modules/tiles.mjs

@@ -19,14 +19,16 @@ class Tile {
   draw(ctx) {
     if (this.imageReady) {
       ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+    } else {
+      this.image.addEventListener('load', () => {
+        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+        this.imageReady = true;
+      }, false);
     }
   }
 
   setImageSrc(src) {
     this.image.src = src;
-    this.image.addEventListener('load', () => {
-      this.imageReady = true;
-    }, false);
   }
 }
 
@@ -63,6 +65,11 @@ export class ForegroundTile extends Tile{
         this.canMove = CanMove.Maybe;
         break;
     }
+    if ( square == Square.BoxOnDestination || square == Square.Box ) {
+      this.isBox = true;
+    } else {
+      this.isBox = false;
+    }
   }
 }
 
@@ -72,24 +79,31 @@ export class BackgroundTile extends Tile{
     switch(square) {
       case Square.Wall:
         this.setImageSrc( images.wall );
+        this.isDestination = false;
         break;
       case Square.Floor:
         this.setImageSrc( images.floor );
+        this.isDestination = false;
         break;
       case Square.Player:
         this.setImageSrc( images.floor );
+        this.isDestination = false;
         break;
       case Square.Box:
         this.setImageSrc( images.floor );
+        this.isDestination = false;
         break;
       case Square.Destination:
         this.setImageSrc( images.destination );
+        this.isDestination = true;
         break;
       case Square.PlayerOnDestination:
         this.setImageSrc( images.destination );
+        this.isDestination = true;
         break;
       case Square.BoxOnDestination:
         this.setImageSrc( images.destination );
+        this.isDestination = true;
         break;
     }
     if (square === Square.Wall) {

script.js

@@ -1,9 +1,54 @@
 import { generatePlayground } from '/modules/playground.mjs'
 import { level1Blueprint } from '/modules/levels.mjs'
+import { MoveDirection } from '/modules/enums.mjs'
 
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
 window.ctx = ctx
-
 let playground = generatePlayground(level1Blueprint, canvas.width, canvas.height);
+window.addEventListener("keydown", (event) => {
+  if (!event.defaultPrevented) {
+    switch (event.key) {
+      case "ArrowDown":
+        playground.move(MoveDirection.Down);
+        break;
+      case "ArrowUp":
+        playground.move(MoveDirection.Up);
+        break;
+      case "ArrowRight":
+        playground.move(MoveDirection.Right);
+        break;
+      case "ArrowLeft":
+        playground.move(MoveDirection.Left);
+        break;
+      default:
+        return;
+        break;
+    }
+    playground.draw(ctx, canvas.width, canvas.height);
+    if (playground.isSolved()) {
+      alert("bravo");
+    }
+  }
+});
+
 window.playground = playground;
+window.up = MoveDirection.Up;
+window.down = MoveDirection.Down;
+window.left = MoveDirection.Left;
+window.right = MoveDirection.Right;
+window.width = canvas.width;
+window.height = canvas.height;
+
+const sleep = (ms) => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// while (document.readyState != "complete") {
+setTimeout(1000);
+  // (new Promise((resolve) => {
+  //   setTimeout(resolve, 100)
+  // })).then(()=>{;})
+// }
+
+playground.draw(ctx);