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";
-
+import ImageLoader from "./ImageLoader.js";
-class ImageLoader
+import Level from "./Level.js";
-{
-    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);
-    }
-}
 
 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) {
+        if (GraphicSet[level.getTilesetId()].backgroundImage !== null) {
-            canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[LEVEL.tileset].backgroundImage +'")';
+            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.tileWidth = this.tilesetSprite.getWidth() / this.tiles;
-        this.tileHeight = this.tileset.getHeight();
+        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,
+            this.tilesetSprite.canvas,
-            field.tile * this.tileWidth,
+            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];
+        let graphicSet = GraphicSet[level.getTilesetId()];
-        console.log(data);
+
         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,
+            level.getColumns(),
-            data.rows
+            level.getRows()
         );
 
         architecture.setBackgroundColor(graphicSet.backgroundColor);
         architecture.setBackgroundImage(graphicSet.backgroundImage);
 
-        architecture.startX = data.startX;
+        architecture.startX = level.getStartX();
-        architecture.startY = data.startY;
+        architecture.startY = level.getStartY();
-        architecture.targetX = data.targetX;
+        architecture.targetX = level.getTargetX();
-        architecture.targetY = data.targetY;
+        architecture.targetY = level.getTargetY();
-        architecture.targetPosition = new GeometryPoint(data.targetX, data.targetY);
+        architecture.targetPosition = new GeometryPoint(level.getTargetX(), level.getTargetY());
 
-        for (let y = 0; y < data.rows; y++) {
+        for (let y = 0; y < level.getRows(); y++) {
-            for (let x = 0; x < data.columns; x++) {
+            for (let x = 0; x < level.getColumns(); x++) {
-                if (data.matrix[y][x] > -1) {
+                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();

levels/level.json

@@ -1,10 +1,9 @@
 {
-  "tileset": "/mr-crocs-adventures/graphics/tileset/landscape01.jpg",
+  "tileset": 0,
-  "tiles": 8,
-  "scale": 3,
   "rows": 10,
   "columns": 17,
   "backgroundColor": "#6096ff",
+  "gravity": 2.0,
   "matrix": [
     [6    ,6    ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,4    ,4   ],
     [6    ,6    ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,4    ,4   ],

levels/moon.json

@@ -1 +1 @@
-{"tileset":1,"rows":"20","columns":51,"startX":2,"startY":16,"targetX":49,"targetY":16,"backgroundColor":"black","matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,1],[1,1,0,0,1,1,1,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]}
+{"tileset":1,"rows":"20","columns":51,"startX":2,"startY":16,"targetX":49,"targetY":16,"backgroundColor":"black","gravity":0.5,"matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,1],[1,1,0,0,1,1,1,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]}

tilorswift/js/Terrain.js

@@ -85,18 +85,14 @@ export default class Terrain
             tr.appendChild(td);
         }
 
-        console.log(index);
-
         if (index === undefined || index >= this.tilesY - 1) {
             this.fields.push(row);
             this.htmlElement.appendChild(tr);
         } else if (index === 0) {
             this.fields = [row].concat(this.fields);
-            console.log(this.fields[0]);
             this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
         } else {
             this.fields = this.fields.slice(0, index).concat([row]).concat(this.fields.slice(index));
-            console.log(this.fields[1]);
             this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
         }
     }
@@ -185,20 +181,20 @@ export default class Terrain
         return this.targetTileX !== undefined && this.targetTileY !== undefined;
     }
 
-    static createFromJson(terrainData)
+    static createFromJson(levelData)
     {
-        let graphicSet = GraphicSet[terrainData.tileset];
+        let graphicSet = GraphicSet[levelData.tileset];
 
-        let tileset = new Tileset(terrainData.tileset);
+        let tileset = new Tileset(levelData.tileset);
-        let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, graphicSet.backgroundColor);
+        let terrain = new Terrain(tileset, levelData.columns, levelData.rows, graphicSet.backgroundColor);
 
-        for (let y = 0; y < terrainData.rows; y++) {
+        for (let y = 0; y < levelData.rows; y++) {
-            for (let x = 0; x < terrainData.columns; x++) {
+            for (let x = 0; x < levelData.columns; x++) {
-                terrain.setFieldIndex(x, y, terrainData.matrix[y][x]);
+                terrain.setFieldIndex(x, y, levelData.matrix[y][x]);
 
-                if (x === terrainData.startX && y === terrainData.startY) {
+                if (x === levelData.startX && y === levelData.startY) {
                     terrain.setEntrancePoint(x, y);
-                } else if (x === terrainData.targetX && y === terrainData.targetY) {
+                } else if (x === levelData.targetX && y === levelData.targetY) {
                     terrain.setTargetPoint(x, y);
                 }
             }

tilorswift/js/Tilorswift.js

@@ -1,44 +1,42 @@
 export default class Tilorswift
 {
-    static getTerrainAsJson(terrain)
+    static getLevelAsJson(level)
     {
-        console.log('Save da shit.');
         let matrix = [];
 
-        console.log(terrain.fields.length);
+        for (let y = 0; y < level.terrain.fields.length; y++) {
-
-        for (let y = 0; y < terrain.fields.length; y++) {
             let row = [];
 
-            for (let x = 0; x < terrain.fields[y].length; x++) {
+            for (let x = 0; x < level.terrain.fields[y].length; x++) {
-                row.push(terrain.fields[y][x].index);
+                row.push(level.terrain.fields[y][x].index);
             }
 
             matrix.push(row);
         }
 
         let data = {
-            tileset: terrain.tileset.setId,
+            tileset: level.getTilesetId(),
-            rows: terrain.tilesY,
+            rows: level.getRows(),
-            columns: terrain.tilesX,
+            columns: level.getColumns(),
-            startX: terrain.entranceTileX,
+            startX: level.getStartX(),
-            startY: terrain.entranceTileY,
+            startY: level.getStartY(),
-            targetX: terrain.targetTileX,
+            targetX: level.getTargetX(),
-            targetY: terrain.targetTileY,
+            targetY: level.getTargetY(),
+            gravity: level.gravity,
             matrix: matrix,
         };
 
         return JSON.stringify(data);
     }
 
-    static saveTerrainToFile(terrain)
+    static saveLevelToFile(level)
     {
-        if (!terrain.hasEntrancePoint()) {
+        if (!level.hasEntrancePoint()) {
             alert('Es muss ein Startpunkt definiert sein!');
             return false;
         }
 
-        if (!terrain.hasTargetPoint()) {
+        if (!level.hasTargetPoint()) {
             alert('Es muss ein Zielpunkt definiert sein!');
             return false;
         }
@@ -49,7 +47,7 @@ export default class Tilorswift
             return false;
         }
 
-        let json = Tilorswift.getTerrainAsJson(terrain);
+        let json = Tilorswift.getLevelAsJson(level);
         let download = document.createElement('a');
 
         download.setAttribute('download', filename);

tilorswift/js/dialog/Dialog.js

@@ -41,7 +41,7 @@ export default class Dialog
         return button;
     }
 
-    createInputNumber(label, value = 0, min = 0, max = 999999)
+    createInputNumber(label, value = 0, min = 0, max = 999999, step = 1)
     {
         let htmlElement = document.createElement('div');
         htmlElement.classList.add('dialog-input-area');
@@ -54,6 +54,9 @@ export default class Dialog
         htmlElementInput.classList.add('dialog-input');
         htmlElementInput.type = 'number';
         htmlElementInput.value = value;
+        htmlElementInput.max = max;
+        htmlElementInput.min = min;
+        htmlElementInput.step = step;
 
         htmlElement.appendChild(htmlElementLabel);
         htmlElement.appendChild(htmlElementInput);

tilorswift/js/dialog/DialogGravity.js

@@ -0,0 +1,22 @@
+import Dialog from "./Dialog.js";
+import TilorswiftGravityUpdatedEvent from "../events/TilorswiftGravityUpdatedEvent.js";
+
+export default class DialogGravity extends Dialog
+{
+    constructor(gravity)
+    {
+        super();
+        this.setMessage('Gravitation einstellen');
+        this.inputGravity = this.createInputNumber('Stärke', gravity, 0, 10, 0.01);
+        this.createButton('Abbrechen');
+        this.buttonOk = this.createButton('OK');
+        this.buttonOk.addEventListener(
+            'click',
+            () => {
+                window.dispatchEvent(
+                    new TilorswiftGravityUpdatedEvent(parseFloat(this.inputGravity.value))
+                );
+            }
+        )
+    }
+}

tilorswift/js/events/TilorswiftEvent.js

@@ -14,6 +14,8 @@ const TilorswiftEvent = {
     NEW_TERRAIN: 'newTerrain',
     NEW_TERRAIN_CLICKED: 'newTerrainClicked',
     TILESET_SELECTED: 'tilesetSelected',
+    MENU_GRAVITY_CLICKED: 'menuGravityClicked',
+    GRAVITY_UPDATED: 'gravityUpdated',
 };
 
 export default TilorswiftEvent;

tilorswift/js/events/TilorswiftGravityUpdatedEvent.js

@@ -0,0 +1,9 @@
+import TilorswiftEvent from "./TilorswiftEvent.js";
+
+export default class TilorswiftGravityUpdatedEvent extends Event
+{
+    constructor(gravity) {
+        super(TilorswiftEvent.GRAVITY_UPDATED);
+        this.gravity = gravity;
+    }
+}

tilorswift/js/events/TilorswiftMenuGravityClickedEvent.js

@@ -0,0 +1,9 @@
+import TilorswiftEvent from "./TilorswiftEvent.js";
+
+export default class TilorswiftMenuGravityClickedEvent extends Event
+{
+    constructor()
+    {
+        super(TilorswiftEvent.MENU_GRAVITY_CLICKED);
+    }
+}

tilorswift/js/menu/TilesetPickerWidget.js

@@ -42,6 +42,7 @@ export default class TilesetPickerWidget extends Widget
     {
         this.tileset = tileset;
         this.htmlElementSelector.innerHTML = '';
+        this.htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles))  * this.tileset.getTileWidth() + 'px';
         this.loadTileset();
     }
 

tilorswift/js/module.js

@@ -1,5 +1,4 @@
 import Terrain from "./Terrain.js";
-import FileLoader from "../../js/FileLoader.js";
 import TilorswiftEvent from "./events/TilorswiftEvent.js";
 import Mouse from "./Mouse.js";
 import Tileset from "./Tileset.js";
@@ -23,27 +22,27 @@ import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
 import TargetPointWidget from "./menu/TargetPointWidget.js";
 import GraphicSet from "../../js/GraphicSet.js";
 import Setting from "../../js/Setting.js";
+import Level from "../../js/Level.js";
+import TilorswiftMenuGravityClickedEvent from "./events/TilorswiftMenuGravityClickedEvent.js";
+import DialogGravity from "./dialog/DialogGravity.js";
+
+let level = Level.createFromFile('../levels/moonbase.json');
+
+if (GraphicSet[level.terrain.tileset.setId].backgroundImage !== null) {
+    document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[level.getTilesetId()].backgroundImage + '")';
+}
 
-let loader = new FileLoader('../levels/level01.json');
-let terrainData = JSON.parse(loader.getContent());
 let image = new Image();
-image.src = Setting.TILESET_LOCATION + GraphicSet[terrainData.tileset].tileset;
+image.src = Setting.TILESET_LOCATION + GraphicSet[level.terrain.tileset.setId].tileset;
 
 image.onload = function () {
-    let terrain = Terrain.createFromJson(terrainData);
+    document.body.style.backgroundColor = GraphicSet[level.terrain.tileset.setId].backgroundColor;
-
-    if (GraphicSet[terrainData.tileset].backgroundImage !== null) {
-        document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[terrainData.tileset].backgroundImage + '")';
-    }
-
-    document.body.style.backgroundColor = GraphicSet[terrainData.tileset].backgroundColor;
-
 
     let map = document.getElementById('map');
-    map.appendChild(terrain.getElement());
+    map.appendChild(level.terrain.getElement());
 
     let brush = new Brush();
-    let tileset = new Tileset(terrainData.tileset);
+    let tileset = new Tileset(level.terrain.tileset.setId);
     let widgetBar = new WidgetBar('widget-bar');
 
     let tilesetPicker = new TilesetPickerWidget(tileset, brush);
@@ -70,6 +69,10 @@ image.onload = function () {
     menuEdit.addMenuEntry(new MainMenuEntry('Spalten einfügen...', TilorswiftAddColumnsClickedEvent));
     mainbar.addMenuGroup(menuEdit);
 
+    let menuLevel = new MenuGroup('Level');
+    menuLevel.addMenuEntry(new MainMenuEntry('Gravitation...', TilorswiftMenuGravityClickedEvent));
+    mainbar.addMenuGroup(menuLevel);
+
     document.body.appendChild(mainbar.getElement());
 
     window.addEventListener(
@@ -78,7 +81,7 @@ image.onload = function () {
             if (brush.mode === BrushMode.TERRAIN && !event.getField().isEntrancePoint) {
                 switch (event.button) {
                     case 0:
-                        event.getField().setIndex(terrain.brushTileIndex);
+                        event.getField().setIndex(level.terrain.brushTileIndex);
                         break;
                     case 2:
                         event.getField().setIndex(-1);
@@ -86,15 +89,15 @@ image.onload = function () {
                 }
             } else if (brush.mode === BrushMode.ENTRANCE) {
                 if (event.getField().index === -1) {
-                    let coordinates = terrain.getFieldCoordinates(event.getField());
+                    let coordinates = level.terrain.getFieldCoordinates(event.getField());
-                    terrain.setEntrancePoint(coordinates.x, coordinates.y);
+                    level.terrain.setEntrancePoint(coordinates.x, coordinates.y);
                     brush.mode = BrushMode.TERRAIN;
                     widgetBar.enableWidgets();
                 }
             }  else if (brush.mode === BrushMode.EXIT) {
                 if (event.getField().index === -1) {
-                    let coordinates = terrain.getFieldCoordinates(event.getField());
+                    let coordinates = level.terrain.getFieldCoordinates(event.getField());
-                    terrain.setTargetPoint(coordinates.x, coordinates.y);
+                    level.terrain.setTargetPoint(coordinates.x, coordinates.y);
                     brush.mode = BrushMode.TERRAIN;
                     widgetBar.enableWidgets();
                 }
@@ -113,7 +116,7 @@ image.onload = function () {
         TilorswiftEvent.FIELD_ENTERED,
         (event) => {
             if (mouse.isPressedLeft) {
-                event.getField().setIndex(terrain.brushTileIndex);
+                event.getField().setIndex(level.terrain.brushTileIndex);
             } else if (mouse.isPressedRight) {
                 event.getField().setIndex(-1);
             }
@@ -127,6 +130,13 @@ image.onload = function () {
         }
     );
 
+    window.addEventListener(
+        TilorswiftEvent.MENU_GRAVITY_CLICKED,
+        () => {
+            new DialogGravity(level.gravity);
+        }
+    );
+
     window.addEventListener(
         TilorswiftEvent.ADD_ROWS_CLICKED,
         () => {
@@ -141,17 +151,24 @@ image.onload = function () {
         }
     );
 
+    window.addEventListener(
+        TilorswiftEvent.GRAVITY_UPDATED,
+        (event) => {
+            level.gravity = event.gravity;
+        }
+    );
+
     window.addEventListener(
         TilorswiftEvent.ADD_ROWS,
         function (event) {
-            terrain.addRows(event.beforeRow, event.rowCount);
+            level.terrain.addRows(event.beforeRow, event.rowCount);
         }
     );
 
     window.addEventListener(
         TilorswiftEvent.ADD_COLUMNS,
         function (event) {
-            terrain.addColumns(event.beforeColumn, event.columnCount);
+            level.terrain.addColumns(event.beforeColumn, event.columnCount);
         }
     );
 
@@ -159,12 +176,15 @@ image.onload = function () {
         TilorswiftEvent.NEW_TERRAIN,
         (event) => {
             let tileset = new Tileset(event.tilesetIndex);
-            terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
+            level.terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
+            document.body.style.backgroundColor = level.getBackgroundColor();
             if (GraphicSet[event.tilesetIndex].backgroundImage !== null) {
                 document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[event.tilesetIndex].backgroundImage + '")';
+            } else {
+                document.body.style.backgroundImage = 'none';
             }
             map.innerHTML = '';
-            map.appendChild(terrain.getElement());
+            map.appendChild(level.terrain.getElement());
             tilesetPicker.reloadTileset(tileset);
         }
     );
@@ -180,7 +200,7 @@ image.onload = function () {
     window.addEventListener(
         TilorswiftEvent.MENU_SAVE_CLICKED,
         function () {
-            if (Tilorswift.saveTerrainToFile(terrain)) {
+            if (Tilorswift.saveLevelToFile(level)) {
                 window.dispatchEvent(new TilorswiftSavedEvent());
             }
         }

tilorswift/style.css

@@ -232,7 +232,7 @@ body {
 }
 
 .dialog-input {
-    width: 100%;
+    width: 480px;
     margin-bottom: 20px;
 }