Added background

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.max(this.player.x, this.player.size / 4);
-        this.player.x = Math.min(this.player.x, 1 - this.player.size / 2);
+        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";

src/screen.js

@@ -47,6 +47,7 @@ class Screen {
     }
 
     clear() {
+        this.context.resetTransform();
         this.context.clearRect(0, 0, this.width(), this.height());
     }