planet add

Script.js

@@ -2,8 +2,8 @@
 
 var canvasWidth = 1280;
 var canvasHeight = 650;
-var c = undefined
-var ctx = undefined
+var c = 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');
-    document.addEventListener('keydown', keyDownPressed, false);
-    document.addEventListener('keyup', keyUpPressed, false);
+  ctx = c.getContext("2d");
+  document.addEventListener("keydown", keyDownPressed, 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,48 +153,41 @@ 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++){
+  for (var i = 0; i < missilesArray.length; i++) {
     var m = missilesArray[i];
     m.draw();
     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){
+
+function gameLoop(timestamp) {
   clearGame();
   updateGame();
   drawGame();
   window.requestAnimationFrame(gameLoop);
 }
 
-class PlayerObject{
-    constructor(x, y){
+class PlayerObject {
+  constructor(x, y) {
     this.x = x;
     this.y = y;
     this.width = 170;
@@ -245,20 +198,18 @@ class PlayerObject{
     this.score = 0;
     this.health = 100;
   }
-    draw(){
+  draw() {
     ctx.save();
     ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
     ctx.restore();
   }
 
-    update(){
+  update() {
     if (keys.up) {
-            if(this.y > 0){
+      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;
       }
@@ -280,19 +231,13 @@ class PlayerObject{
 
 let player1 = new PlayerObject(100, 100);
 
-function drawNewText(txt, x, y, color){
+function drawNewText(txt, x, y, color) {
   ctx.font = "20px Arial";
   ctx.fillStyle = color;
   ctx.fillText(txt, x, y);
 }
 
-
-
-
-
-
-
-class backgroundObj{
+class backgroundObj {
   constructor(img, x, y, speed) {
     this.x = x;
     this.y = y;
@@ -313,23 +258,17 @@ 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);
 
+let background2 = new backgroundObj(bg1, 0, 0, game.speed * 2);
+let background2a = new backgroundObj(bg1, 2000, 0, game.speed * 2);
 
-
-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);
-
+let background3 = new backgroundObj(bg2, 0, 0, game.speed * 1);
+let background3a = new backgroundObj(bg2, 2000, 0, game.speed * 1);
 
 function addStarField() {
   background3.draw();
@@ -348,8 +287,8 @@ function addStarField() {
   background1a.update();
 }
 
-class Missile{
-    constructor(x, y, color, speed){
+class Missile {
+  constructor(x, y, color, speed) {
     this.x = x;
     this.y = y;
     this.width = 3;
@@ -358,7 +297,7 @@ class Missile{
     this.speed = speed;
   }
 
-    draw(){
+  draw() {
     ctx.save();
     ctx.fillStyle = this.color;
     ctx.fillRect(this.x, this.y, this.width, this.height);
@@ -366,21 +305,11 @@ class Missile{
     ctx.restore();
   }
 
-    update(){
-        this.x += this.speed 
+  update() {
+    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);
+  }
+}