planet add

Script.js

@@ -2,8 +2,8 @@
 
 var canvasWidth = 1280;
 var canvasHeight = 650;
-var c = undefined
+var c = undefined;
-var ctx = undefined
+var ctx = undefined;
 
 var game = {
   level: 1,
@@ -11,29 +11,21 @@ var game = {
   gameOver: false,
   frames: 0,
   timer: 0,
-}
+};
 
 var keys = {
   up: false,
   down: false,
   left: false,
   right: false,
-    fire: false
+  fire: false,
-}
+};
 
-
-
-
-
-
-
-
-// Untuk background
 var playerShipImg = new Image();
-playerShipImg.src = 'img/ships2.png'
+playerShipImg.src = "img/ships2.png";
 
 var bg0 = new Image();
-bg0.src = 'img/bg_0.png';
+bg0.src = "img/bg_0.png";
 
 var bg1 = new Image();
 bg1.src = "img/bg_1.png";
@@ -41,65 +33,38 @@ bg1.src = "img/bg_1.png";
 var bg2 = new Image();
 bg2.src = "img/bg_2.png";
 
-
-
-
-
 var enemyImgArray = [];
 enemyImgArray.length = 7;
 
 var enemy1 = new Image();
-enemy1.src = "img/alien_0.png"
+enemy1.src = "img/alien_0.png";
-
 
 var missilesArray = [];
 
-
+var backgroundMusic = document.createElement("audio");
-
-
-var backgroundMusic = document.createElement('audio');
 backgroundMusic.src = "music/Muriel-BobbyRichards.mp3";
 
 var laser = document.createElement("audio");
 laser.src = "music/laser2.mp3";
 
-
+var planetImages = [];
-
+for (let i = 1; i <= 4; i++) {
-
+  let img = new Image();
-
+  img.src = `img/SpritesPlanet/planet_${i}.png`;
-
+  planetImages.push(img);
-
+}
-
-
-
-
 
 window.onload = function () {
-    init()
+  init();
-}
+};
 
 function init() {
   c = document.getElementById("canvas");
-    ctx = c.getContext('2d');
+  ctx = c.getContext("2d");
-    document.addEventListener('keydown', keyDownPressed, false);
+  document.addEventListener("keydown", keyDownPressed, false);
-    document.addEventListener('keyup', keyUpPressed, false);
+  document.addEventListener("keyup", keyUpPressed, false);
   gameLoop();
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
   document.getElementById("startBtn").onclick = () => {
     document.getElementById("startMenu").style.display = "none";
     gameStarted = true;
@@ -124,11 +89,8 @@ function init() {
   document.getElementById("exitBtn").onclick = () => {
     window.close();
   };
-
 }
 
-
-
 function gameLoop() {
   if (!gameStarted) return;
 
@@ -138,14 +100,13 @@ function gameLoop() {
   requestAnimationFrame(gameLoop);
 }
 
-
 function keyDownPressed(e) {
   if (e.keyCode == 87) {
     keys.up = true;
     backgroundMusic.play();
     backgroundMusic.volume = 0.8;
   } else if (e.keyCode == 83) {
-        keys.down = true
+    keys.down = true;
   }
 
   if (e.keyCode == 65) {
@@ -158,8 +119,9 @@ function keyDownPressed(e) {
 
   if (e.keyCode == 32) {
     keys.fire = true;
-        missilesArray.push(new Missile(player1.x + 120, player1.y + 50, 'white', 12));
+    missilesArray.push(
-
+      new Missile(player1.x + 120, player1.y + 50, "white", 12)
+    );
 
     laser.currentTime = 0;
     laser.play();
@@ -167,8 +129,6 @@ function keyDownPressed(e) {
   }
 }
 
-
-
 function keyUpPressed(e) {
   if (e.keyCode == 87) {
     keys.up = false;
@@ -193,25 +153,19 @@ function clearGame() {
   ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 }
 
-
-
-
 function updateGame() {
-
   addStarField();
   player1.update();
-    
+  spawnPlanet();
+  if (currentPlanet) currentPlanet.update();
   game.frames++;
 }
 
-
-
 function drawGame() {
+  if (currentPlanet) currentPlanet.draw(); // planet sekarang di background
 
   player1.draw();
-
   enemy.draw();
-
   enemy.update();
 
   for (var i = 0; i < missilesArray.length; i++) {
@@ -220,12 +174,11 @@ function drawGame() {
     m.update();
   }
 
-
+  drawNewText("Score: " + player1.score, 30, 610, "white");
-
+  drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
-    drawNewText('Score: ' +player1.score, 30, 610, 'white');
-    drawNewText('Player Lives: ' +player1.lives, 1100, 610, 'white');
 }
 
+
 function gameLoop(timestamp) {
   clearGame();
   updateGame();
@@ -256,9 +209,7 @@ class PlayerObject{
       if (this.y > 0) {
         this.y -= this.speed;
       }
-        }
+    } else if (keys.down) {
-
-        else if (keys.down) {
       if (this.x < canvasWidth - this.width) {
         this.y += this.speed;
       }
@@ -286,12 +237,6 @@ function drawNewText(txt, x, y, color){
   ctx.fillText(txt, x, y);
 }
 
-
-
-
-
-
-
 class backgroundObj {
   constructor(img, x, y, speed) {
     this.x = x;
@@ -313,14 +258,9 @@ class backgroundObj{
     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);
 
@@ -330,7 +270,6 @@ 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();
@@ -367,20 +306,10 @@ class Missile{
   }
 
   update() {
-        this.x += this.speed 
+    this.x += this.speed;
   }
 }
 
-
-
-
-
-
-
-
-
-
-
 class EnemyObj {
   constructor(x, y, speed) {
     this.x = x;
@@ -404,3 +333,36 @@ class EnemyObj {
 }
 
 let enemy = new EnemyObj(800, 200, 12);
+
+class Planet {
+  constructor(img) {
+    this.image = img;
+    this.width = 160;
+    this.height = 160;
+    this.x = canvasWidth + 50;
+    this.y = Math.random() * 300 + 50;
+    this.speed = 1.2;
+    this.active = true;
+  }
+
+  draw() {
+    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+  }
+
+  update() {
+    this.x -= this.speed;
+    if (this.x < -this.width) {
+      this.active = false;
+    }
+  }
+}
+
+let currentPlanet = null;
+
+function spawnPlanet() {
+  if (currentPlanet == null || currentPlanet.active === false) {
+    let randomImg =
+      planetImages[Math.floor(Math.random() * planetImages.length)];
+    currentPlanet = new Planet(randomImg);
+  }
+}