Background

Script.js

@@ -21,9 +21,27 @@ var keys = {
     fire: false
 }
 
+
+
+
+
+
 var playerShipImg = new Image();
 playerShipImg.src = 'img/pixelShip.png'
 
+var bg0 = new Image();
+bg0.src = 'img/bg_0.png';
+
+var bg1 = new Image();
+bg1.src = "img/bg_1.png";
+
+var bg2 = new Image();
+bg2.src = "img/bg_2.png";
+
+
+
+
+
 window.onload = function () {
     init()
 }
@@ -58,7 +76,7 @@ function keyDownPressed(e) {
 }
 
 
- 
+
 function keyUpPressed(e) {
     if (e.keyCode == 87) {
         keys.up = false;
@@ -84,12 +102,15 @@ function clearGame() {
 }
 
 function updateGame() {
+
+    addStarField();
     player1.update();
     
     game.frames++;
 }
 
-function drawGame(){
+function drawGame() {
+
     player1.draw(); 
 
     drawNewText('Score: ' +player1.score, 30, 610, 'white');
@@ -154,4 +175,66 @@ function drawNewText(txt, x, y, color){
     ctx.font = "20px Arial";
     ctx.fillStyle = color;
     ctx.fillText(txt, x, y);
+}
+
+
+
+
+
+
+
+class backgroundObj{
+    constructor(img, x, y, speed) {
+        this.x = x;
+        this.y = y;
+        this.width = 2000;
+        this.height = 1200;
+        this.img = img;
+        this.speed = speed;
+    }
+    draw() {
+        ctx.save();
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+        ctx.restore();
+    }
+
+    update() {
+        this.x -= this.speed;
+
+        if (this.x < -2000) {
+            this.x = 2000;
+        }
+
+    }
+
+}
+
+
+
+
+let background1 = new backgroundObj(bg0, 0, 0, game.speed*3);
+let background1a = new backgroundObj(bg0, 2000, 0, game.speed*3);
+
+let background2 = new backgroundObj(bg1, 0, 0, game.speed*2);
+let background2a = new backgroundObj(bg1, 2000, 0, game.speed*2);
+
+let background3 = new backgroundObj(bg2, 0, 0, game.speed*1);
+let background3a = new backgroundObj(bg2, 2000, 0, game.speed*1);
+
+
+function addStarField() {
+        background3.draw();
+        background3.update();
+        background3a.draw();
+        background3a.update();
+    
+        background2.draw();
+        background2.update();
+        background2a.draw();
+        background2a.update();
+    
+        background1.draw();
+        background1.update();
+        background1a.draw();
+        background1a.update();
 }