Optimization for Firefox and Chrome

js/module.js

@@ -112,7 +112,16 @@ function MainLoop(timestamp)
         }
 
         context.clearRect(0, 0, window.innerWidth, window.innerHeight);
-        architecture.draw(context, camera);
+
+        switch (browser) {
+            case 'Chrome':
+                architecture.drawForChrome(context, camera);
+                break;
+
+            default:
+                architecture.drawForFirefox(context, camera);
+        }
+
         mrCroc.draw(context, camera);
         gisela.draw(context, camera);
         userInterface.draw(context);
@@ -154,7 +163,8 @@ let level = Level.createFromFile(Setting.LEVELS_LOCATION + LEVEL[levelIndex]);
 
 const GAME_SPEED = 1;
 const GRAVITY = level.gravity;
-let fps = 120;
+let fps = 60;
+const browser = navigator.userAgent.indexOf('Firefox') === -1 ? 'Chrome' : 'Firefox';
 let frameDuration;
 let lastRendered = undefined;
 let lastTimestamp = undefined;
@@ -179,8 +189,6 @@ loader.addImage(Setting.TILESET_LOCATION + GraphicSet[level.getTilesetId()].tile
 loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
 loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-left.png');
 
-// new FrameRateMeasurer();
-
 window.addEventListener(
     'imagesloaded',
     () => {

js/retro/RetroArchitecture.js

@@ -5,6 +5,7 @@ import GeometryPoint from "../geometry/GeometryPoint.js";
 import GeometryRect from "../geometry/GeometryRect.js";
 import GraphicSet from "../GraphicSet.js";
 import Setting from "../Setting.js";
+import Camera from "../Camera.js";
 
 export default class RetroArchitecture
 {
@@ -19,6 +20,10 @@ export default class RetroArchitecture
         this.matrix = [];
         this.tileWidth = this.tilesetSprite.getWidth() / this.tiles;
         this.tileHeight = this.tilesetSprite.getHeight();
+        this.terrainCanvas = document.createElement('canvas');
+        this.terrainCanvas.width = this.tileWidth * this.columns;
+        this.terrainCanvas.height = this.tileHeight * this.rows;
+        this.terrainContext = this.terrainCanvas.getContext('2d');
         this.startX = 0;
         this.startY = 0;
         this.targetX = 0;
@@ -41,6 +46,23 @@ export default class RetroArchitecture
         }
     }
 
+    render()
+    {
+        const camera = new Camera();
+
+        for (let y = 0; y < this.rows; y++) {
+            for (let x = 0; x < this.columns; x++) {
+                const field = this.matrix[y][x];
+
+                if (field === null) {
+                    continue;
+                }
+
+                this.drawField(this.terrainContext, x, y, camera, field);
+            }
+        }
+    }
+
     setBackgroundColor(color)
     {
         this.backgroundColor = color;
@@ -202,16 +224,16 @@ export default class RetroArchitecture
             tileRect.isContainingPoint(movable.getPositionFootRight());
     }
 
-    draw(context, camera = new Camera())
+    drawForFirefox(context, camera = new Camera())
     {
-        let viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
+        const viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
-        let viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
+        const viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
-        let viewY = parseInt(Math.floor(Math.max(0, camera.position.y)) / this.tileHeight);
+        const viewY = parseInt(Math.floor(Math.max(0, camera.position.y)) / this.tileHeight);
-        let viewHeight = parseInt(Math.min(Math.ceil(camera.height), this.rows));
+        const viewHeight = parseInt(Math.min(Math.ceil(camera.height), this.rows));
 
         for (let y = viewY; y < viewHeight; y++) {
             for (let x = viewX; x < viewWidth; x++) {
-                let field = this.matrix[y][x];
+                const field = this.matrix[y][x];
 
                 if (field !== null) {
                     this.drawField(context, x, y, camera, field);
@@ -220,6 +242,26 @@ export default class RetroArchitecture
         }
     }
 
+    /**
+     *
+     * @param context
+     * @param camera Camera
+     */
+    drawForChrome(context, camera)
+    {
+        context.drawImage(
+            this.terrainCanvas,
+            camera.position.x,
+            camera.position.y,
+            camera.width,
+            camera.height,
+            0,
+            0,
+            camera.width,
+            camera.height
+        );
+    }
+
     drawField(context, x, y, camera, field)
     {
         context.drawImage(
@@ -274,6 +316,8 @@ export default class RetroArchitecture
             }
         }
 
+        architecture.render();
+
         return architecture;
     }
 }