diff --git a/Script.js b/Script.js index 257f9c6..8b66c2d 100644 --- a/Script.js +++ b/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(); } \ No newline at end of file diff --git a/img/bg_0. Seamless looping animation b/img/bg_0. Seamless looping animation new file mode 100644 index 0000000..45bb862 Binary files /dev/null and b/img/bg_0. Seamless looping animation differ diff --git a/img/bg_0.png b/img/bg_0.png new file mode 100644 index 0000000..1cffb6c Binary files /dev/null and b/img/bg_0.png differ diff --git a/img/bg_1.png b/img/bg_1.png new file mode 100644 index 0000000..13a9826 Binary files /dev/null and b/img/bg_1.png differ diff --git a/img/bg_2.png b/img/bg_2.png new file mode 100644 index 0000000..4858abb Binary files /dev/null and b/img/bg_2.png differ