diff --git a/js/ImageLoader.js b/js/ImageLoader.js index e5dfa75..2ca30d2 100644 --- a/js/ImageLoader.js +++ b/js/ImageLoader.js @@ -29,4 +29,4 @@ export default class ImageLoader this.images.push(image); } -} \ No newline at end of file +} diff --git a/js/module.js b/js/module.js index 543759d..b4e1310 100644 --- a/js/module.js +++ b/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', () => { diff --git a/js/retro/RetroArchitecture.js b/js/retro/RetroArchitecture.js index 4a4bf5b..a90e05f 100644 --- 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; } }