Level added

Mouse cursor is visible again
Double frame rate
2022-05-16 17:18:06 +02:00 · 2021-09-21 11:19:05 +02:00 · 2021-09-21 09:48:54 +02:00 · 2021-09-21 09:47:27 +02:00 · 2021-09-15 17:24:53 +02:00
5 changed files with 72 additions and 25 deletions
--- a/index.html
+++ b/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">
@ -22,4 +21,4 @@
 <body>
 	<canvas id="canvas"></canvas>
 </body>
-</html>
+</html>
--- a/js/ImageLoader.js
+++ b/js/ImageLoader.js
@ -29,4 +29,4 @@ export default class ImageLoader

        this.images.push(image);
    }
-}
+}
--- a/js/module.js
+++ b/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(
-            InterfaceEvent.FRAME_RATE_MEASURED,
-            (event) => {
-                fps = event.frameRate;
-                frameDuration = 1000 / fps;
-                window.requestAnimationFrame(MainLoop);
-            }
-        );
+        frameDuration = 1000 / fps;
+        window.requestAnimationFrame(MainLoop);
    }
-);
+);
--- a/js/retro/RetroArchitecture.js
+++ b/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));
-        let viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
-        let viewY = parseInt(Math.floor(Math.max(0, camera.position.y)) / this.tileHeight);
-        let viewHeight = parseInt(Math.min(Math.ceil(camera.height), this.rows));
+        const viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
+        const viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
+        const viewY = parseInt(Math.floor(Math.max(0, camera.position.y)) / this.tileHeight);
+        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;
    }
-}
+}
--- a/levels/darius.json
+++ b/levels/darius.json
Author	SHA1	Message	Date
Mal	83c1ae8119	Level added	2022-05-16 17:18:06 +02:00
Mal	e476e689e1	Mouse cursor is visible again	2021-09-21 11:19:05 +02:00
Mal	2fe9b63c70	Double frame rate	2021-09-21 09:48:54 +02:00
Mal	598dbc67ac	Optimization for Firefox and Chrome	2021-09-21 09:47:27 +02:00
Mal	46c584d9ee	Static frame rate established	2021-09-15 17:24:53 +02:00