Level class created and gravity editable.

js/ImageLoader.js

@@ -0,0 +1,32 @@
+export default class ImageLoader
+{
+    images = [];
+    numberImagesLoaded = 0;
+
+    update()
+    {
+        this.numberImagesLoaded++;
+
+        if (this.numberImagesLoaded === this.images.length) {
+            window.dispatchEvent(new Event('imagesloaded'));
+        }
+    }
+
+    getCurrentProgress()
+    {
+        return this.numberImagesLoaded / this.images.length;
+    }
+
+    addImage(imagePath)
+    {
+        let image = new Image();
+        image.src = imagePath;
+        image.addEventListener(
+            'load', () => {
+                this.update();
+            }
+        );
+
+        this.images.push(image);
+    }
+}

js/Level.js

@@ -0,0 +1,87 @@
+import FileLoader from "./FileLoader.js";
+import Terrain from "../tilorswift/js/Terrain.js";
+
+export default class Level
+{
+    constructor(terrain)
+    {
+        this.terrain = terrain;
+        this.gravity = 2.0;
+    }
+
+    getTilesetId()
+    {
+        return this.terrain.tileset.setId;
+    }
+
+    getBackgroundColor()
+    {
+        return this.terrain.backgroundColor;
+    }
+
+    getBackgroundImage()
+    {
+        return this.terrain.backgroundImage;
+    }
+
+    getRows()
+    {
+        return this.terrain.tilesY;
+    }
+
+    getColumns()
+    {
+        return this.terrain.tilesX;
+    }
+
+    getStartX()
+    {
+        return this.terrain.entranceTileX;
+    }
+
+    getStartY()
+    {
+        return this.terrain.entranceTileY;
+    }
+
+    getTargetX()
+    {
+        return this.terrain.targetTileX;
+    }
+
+    getTargetY()
+    {
+        return this.terrain.targetTileY;
+    }
+
+    getTilesetMatrix()
+    {
+        return this.terrain.fields;
+    }
+
+    hasEntrancePoint()
+    {
+        return this.terrain.hasEntrancePoint();
+    }
+
+    hasTargetPoint()
+    {
+        return this.terrain.hasTargetPoint();
+    }
+
+    setGravity(gravity)
+    {
+        this.gravity = gravity;
+    }
+
+    static createFromFile(filename)
+    {
+        let loader = new FileLoader(filename);
+        let levelData = JSON.parse(loader.getContent());
+        let terrain = Terrain.createFromJson(levelData);
+        let level =  new Level(terrain);
+        level.setGravity(levelData.gravity);
+
+        return level;
+    }
+}

js/module.js

@@ -3,45 +3,13 @@
 import Key from "./Key.js";
 import MrCroc from "./MrCroc.js";
 import RetroArchitecture from "./retro/RetroArchitecture.js";
-import FileLoader from "./FileLoader.js";
 import Camera from "./Camera.js";
 import Gisela from "./Gisela.js";
 import Setting from "./Setting.js";
 import FrameRateMeasurer from "./FrameRateMeasurer.js";
 import GraphicSet from "./GraphicSet.js";
-
-class ImageLoader
-{
-    images = [];
-    numberImagesLoaded = 0;
-
-    update()
-    {
-        this.numberImagesLoaded++;
-
-        if (this.numberImagesLoaded === this.images.length) {
-            window.dispatchEvent(new Event('imagesloaded'));
-        }
-    }
-
-    getCurrentProgress()
-    {
-        return this.numberImagesLoaded / this.images.length;
-    }
-
-    addImage(imagePath)
-    {
-        let image = new Image();
-        image.src = imagePath;
-        image.addEventListener(
-            'load', () => {
-                this.update();
-            }
-        );
-
-        this.images.push(image);
-    }
-}
+import ImageLoader from "./ImageLoader.js";
+import Level from "./Level.js";
 
 function MainLoop(timestamp)
 {
@@ -155,15 +123,12 @@ function MainLoop(timestamp)
     window.requestAnimationFrame(MainLoop);
 }
 
+let level = Level.createFromFile('levels/test(2).json');
+
 const GAME_SPEED = 1;
-const GRAVITY = 2;
+const GRAVITY = level.gravity;
 let fps;
 let frameDuration;
-
-let levelJson = new FileLoader('levels/level01.json');
-
-const LEVEL = JSON.parse(levelJson.getContent());
-
 let lastRendered = undefined;
 let lastTimestamp = undefined;
 let context;
@@ -180,7 +145,7 @@ let loader = new ImageLoader();
 
 loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png');
 loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png');
-loader.addImage(Setting.TILESET_LOCATION + GraphicSet[LEVEL.tileset].tileset);
+loader.addImage(Setting.TILESET_LOCATION + GraphicSet[level.getTilesetId()].tileset);
 loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
 
 new FrameRateMeasurer();
@@ -195,11 +160,11 @@ window.addEventListener(
         canvas.style.backgroundSize = 'cover';
         canvas.style.backgroundPosition = 'center center';
 
-        if (GraphicSet[LEVEL.tileset].backgroundImage !== null) {
-            canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[LEVEL.tileset].backgroundImage +'")';
+        if (GraphicSet[level.getTilesetId()].backgroundImage !== null) {
+            canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[level.getTilesetId()].backgroundImage +'")';
         }
 
-        canvas.style.backgroundColor = LEVEL.backgroundColor;
+        canvas.style.backgroundColor = level.getBackgroundColor();
 
         window.addEventListener(
             'resize',
@@ -211,7 +176,7 @@ window.addEventListener(
 
         context = canvas.getContext('2d');
 
-        architecture = RetroArchitecture.createFromData(LEVEL);
+        architecture = RetroArchitecture.createFromData(level);
         camera.borderRight = architecture.columns * architecture.tileWidth;
         camera.borderBottom = architecture.rows * architecture.tileHeight;
 
@@ -221,7 +186,7 @@ window.addEventListener(
         gisela = new Gisela();
         architecture.setMovableToTargetPosition(gisela);
 
-        fps = 120;
+        fps = 60;
         frameDuration = 1000 / fps;
         window.requestAnimationFrame(MainLoop);
     }

js/retro/RetroArchitecture.js

@@ -10,15 +10,15 @@ export default class RetroArchitecture
 {
     constructor(tilesetSprite, tiles, columns, rows)
     {
-        this.tileset = tilesetSprite;
+        this.tilesetSprite = tilesetSprite;
         this.tiles = tiles;
         this.backgroundColor = null;
         this.backgroundImage = null;
         this.rows = rows;
         this.columns = columns;
         this.matrix = [];
-        this.tileWidth = this.tileset.getWidth() / this.tiles;
-        this.tileHeight = this.tileset.getHeight();
+        this.tileWidth = this.tilesetSprite.getWidth() / this.tiles;
+        this.tileHeight = this.tilesetSprite.getHeight();
         this.startX = 0;
         this.startY = 0;
         this.targetX = 0;
@@ -202,7 +202,7 @@ export default class RetroArchitecture
             tileRect.isContainingPoint(movable.getPositionFootRight());
     }
 
-    draw(context, camera = null)
+    draw(context, camera = new Camera())
     {
         let viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
         let viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
@@ -213,7 +213,7 @@ export default class RetroArchitecture
             for (let x = viewX; x < viewWidth; x++) {
                 let field = this.matrix[y][x];
 
-                if (field !== null && field !== undefined) {
+                if (field !== null) {
                     this.drawField(context, x, y, camera, field);
                 }
             }
@@ -223,8 +223,8 @@ export default class RetroArchitecture
     drawField(context, x, y, camera, field)
     {
         context.drawImage(
-            this.tileset.canvas,
-            field.tile * this.tileWidth,
+            this.tilesetSprite.canvas,
+            field.tile.index * this.tileWidth,
             0,
             this.tileWidth,
             this.tileHeight,
@@ -235,10 +235,10 @@ export default class RetroArchitecture
         );
     }
 
-    static createFromData(data)
+    static createFromData(level)
     {
-        let graphicSet = GraphicSet[data.tileset];
-        console.log(data);
+        let graphicSet = GraphicSet[level.getTilesetId()];
+
         let tileset = new RetroSprite(
             Setting.TILESET_LOCATION + graphicSet.tileset,
             graphicSet.scale
@@ -247,29 +247,29 @@ export default class RetroArchitecture
         let architecture = new RetroArchitecture(
             tileset,
             graphicSet.tiles,
-            data.columns,
-            data.rows
+            level.getColumns(),
+            level.getRows()
         );
 
         architecture.setBackgroundColor(graphicSet.backgroundColor);
         architecture.setBackgroundImage(graphicSet.backgroundImage);
 
-        architecture.startX = data.startX;
-        architecture.startY = data.startY;
-        architecture.targetX = data.targetX;
-        architecture.targetY = data.targetY;
-        architecture.targetPosition = new GeometryPoint(data.targetX, data.targetY);
+        architecture.startX = level.getStartX();
+        architecture.startY = level.getStartY();
+        architecture.targetX = level.getTargetX();
+        architecture.targetY = level.getTargetY();
+        architecture.targetPosition = new GeometryPoint(level.getTargetX(), level.getTargetY());
 
-        for (let y = 0; y < data.rows; y++) {
-            for (let x = 0; x < data.columns; x++) {
-                if (data.matrix[y][x] > -1) {
+        for (let y = 0; y < level.getRows(); y++) {
+            for (let x = 0; x < level.getColumns(); x++) {
+                if (level.getTilesetMatrix()[y][x].index > -1) {
                     architecture.matrix[y][x] = new RetroArchitectureTile(
-                        data.matrix[y][x],
+                        level.getTilesetMatrix()[y][x],
                         x * architecture.tileWidth,
                         y * architecture.tileHeight,
                         architecture.tileWidth,
                         architecture.tileHeight
-                    )
+                    );
                 }
             }
         }

js/retro/RetroSprite.js

@@ -3,10 +3,10 @@ import GeometryRect from "../geometry/GeometryRect.js";
 
 export default class RetroSprite
 {
-    constructor(image, scale = 1)
+    constructor(imagePath, scale = 1)
     {
         this.image = new Image();
-        this.image.src = image;
+        this.image.src = imagePath;
         this.canvas = document.createElement('canvas');
         this.context = this.canvas.getContext('2d');
         this.position = new GeometryPoint();