From c398ba3087eb72f0a44d7b392d69bede9a1b34a8 Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Tue, 21 Aug 2018 16:58:30 +0200 Subject: [PATCH] Added background --- src/scene.js | 21 +++++++++++++++------ src/screen.js | 1 + 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/scene.js b/src/scene.js index ff6634a..937a110 100644 --- a/src/scene.js +++ b/src/scene.js @@ -36,9 +36,10 @@ class Scene extends Screen { } drawBackground() { - this.context.fillStyle = 'rgb(10, 0, 0)'; + let pattern = this.context.createPattern(Scene.background, 'repeat'); + this.context.fillStyle = pattern; this.context.beginPath(); - this.context.rect(0, 0, this.width(), this.height()); + this.context.rect(0, - this.cameraHeight * this.height(), this.width(), this.height()); this.context.fill(); } @@ -106,8 +107,8 @@ class Scene extends Screen { } // Collisions with the border of the screen - this.player.x = Math.max(this.player.x, this.player.size / 2); - this.player.x = Math.min(this.player.x, 1 - this.player.size / 2); + this.player.x = Math.max(this.player.x, this.player.size / 4); + this.player.x = Math.min(this.player.x, 1 - this.player.size / 4); } addPlatform(object) { @@ -116,6 +117,9 @@ class Scene extends Screen { render() { this.clear(); + + this.context.translate(0, this.cameraHeight * this.height()); + this.drawBackground(); for (let platform of this.platforms) { @@ -124,6 +128,8 @@ class Scene extends Screen { this.drawObject(this.player); + this.context.resetTransform(); + this.drawHud(); } @@ -134,7 +140,7 @@ class Scene extends Screen { Box.texture, 0, 64 * this.player.frameNumber, 64, 64, (object.x - object.size / 2) * this.width(), - (1 - object.y - object.size / 2 + this.cameraHeight) * this.height(), + (1 - object.y - object.size / 2) * this.height(), size, size ); } @@ -147,7 +153,7 @@ class Scene extends Screen { Platform.texture, 0, 0, 64, 64, (object.x - object.width / 2) * this.width(), - (1 - object.y - object.height / 2 + this.cameraHeight) * this.height(), + (1 - object.y - object.height / 2) * this.height(), width, width, ); } @@ -170,3 +176,6 @@ class Scene extends Screen { } } + +Scene.background = new Image(); +Scene.background.src = "img/background.png"; diff --git a/src/screen.js b/src/screen.js index 8225517..dddd309 100644 --- a/src/screen.js +++ b/src/screen.js @@ -47,6 +47,7 @@ class Screen { } clear() { + this.context.resetTransform(); this.context.clearRect(0, 0, this.width(), this.height()); }