Level added

index.html

@@ -13,7 +13,6 @@
 			position: absolute;
 			top: 0;
 			left: 0;
-			cursor: none;
 		}
 	</style>
 	<link rel="shortcut icon" type="image/png" href="favicon.png">

js/module.js

@@ -103,6 +103,8 @@ function MainLoop(timestamp)
 
     /* Drawing */
     if (timestamp - lastRendered >= frameDuration) {
+        lastRendered = timestamp;
+
         if (gisela.currentAnimation !== 'LOOK_LEFT' && mrCroc.position.x < gisela.position.x) {
             gisela.currentAnimation = 'LOOK_LEFT';
         } else if (gisela.currentAnimation !== 'LOOK_RIGHT' && mrCroc.position.x >= gisela.position.x) {
@@ -110,12 +112,19 @@ 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);
-
-        lastRendered = timestamp;
     }
 
     lastTimestamp = timestamp;
@@ -140,6 +149,7 @@ const LEVEL = [
     'moon.json',
     'moonbase.json',
     'terrain8.json',
+    'darius.json',
 ];
 
 let urlGetter = new UrlParam();
@@ -154,7 +164,8 @@ let level = Level.createFromFile(Setting.LEVELS_LOCATION + LEVEL[levelIndex]);
 
 const GAME_SPEED = 1;
 const GRAVITY = level.gravity;
-let fps;
+let fps = 120;
+const browser = navigator.userAgent.indexOf('Firefox') === -1 ? 'Chrome' : 'Firefox';
 let frameDuration;
 let lastRendered = undefined;
 let lastTimestamp = undefined;
@@ -179,8 +190,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',
     () => {
@@ -227,13 +236,7 @@ window.addEventListener(
         gisela = new Gisela();
         architecture.setMovableToTargetPosition(gisela);
 
-        window.addEventListener(
+        frameDuration = 1000 / fps;
-            InterfaceEvent.FRAME_RATE_MEASURED,
+        window.requestAnimationFrame(MainLoop);
-            (event) => {
-                fps = event.frameRate;
-                frameDuration = 1000 / fps;
-                window.requestAnimationFrame(MainLoop);
-            }
-        );
     }
 );

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;
     }
 }