changement de textures

index.html

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

modules/levels.mjs

@@ -2,5 +2,18 @@ import { Square } from '/modules/enums.mjs';
 
 // Blueprint for the first level
 export const level1Blueprint = [[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
-                         [ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
+                                [ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
-                         [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]];
+                                [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]];
+
+export const level2Blueprint = [
+    [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Floor ],
+    [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall],
+    [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Wall],
+    [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Box, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Floor, Square.Wall],
+    [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Player, Square.Floor, Square.Wall, Square.Wall, Square.Floor, Square.Floor, Square.Wall],
+    [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Wall, Square.Wall],
+    [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Wall, Square.Wall, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Floor ],
+    [Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Floor ],
+    [Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor ],
+    [Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
+  ];

modules/playground.mjs

@@ -40,8 +40,8 @@ export const generatePlayground = (levelBlueprint, canvasWidth, canvasHeight) =>
         default:
           break;
       }
-      foreground[indexRow].push(new ForegroundTile(square, indexColumn * tileWidth, indexRow * tileHeight, tileWidth, tileHeight));
       background[indexRow].push(new BackgroundTile(square, indexColumn * tileWidth, indexRow * tileHeight, tileWidth, tileHeight));
+      foreground[indexRow].push(new ForegroundTile(square, indexColumn * tileWidth, indexRow * tileHeight, tileWidth, tileHeight));
     });
   });
   if (boxCount != destinationCount) {

modules/ressources.mjs

@@ -1,7 +1,7 @@
 export const images = {
   wall: '/res/wall.png',
   floor: '/res/floor.png',
-  player: '/res/mario.png',
+  player: '/res/player.png',
   box: '/res/box.png',
   destination: '/res/destination.png',
   empty: '/res/empty.png',

modules/tiles.mjs

@@ -29,6 +29,9 @@ class Tile {
 
   setImageSrc(src) {
     this.image.src = src;
+    this.image.addEventListener('load', () => {
+      this.imageReady = true;
+    }, false);
   }
 }
 

script.js

@@ -1,11 +1,11 @@
 import { generatePlayground } from '/modules/playground.mjs'
-import { level1Blueprint } from '/modules/levels.mjs'
+import { level1Blueprint, level2Blueprint } 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);
+let playground = generatePlayground(level2Blueprint, canvas.width, canvas.height);
 window.addEventListener("keydown", (event) => {
   if (!event.defaultPrevented) {
     switch (event.key) {