planet add

Script.js

@@ -2,38 +2,30 @@
 
 var canvasWidth = 1280;
 var canvasHeight = 650;
-var c = undefined
-var ctx = undefined
+var c = undefined;
+var ctx = undefined;
 
 var game = {
-    level: 1,
-    speed: 1,
-    gameOver: false,
-    frames: 0,
-    timer: 0,
-}
+  level: 1,
+  speed: 1,
+  gameOver: false,
+  frames: 0,
+  timer: 0,
+};
 
 var keys = {
-    up: false,
-    down: false,
-    left: false,
-    right: false,
-    fire: false
-}
+  up: false,
+  down: false,
+  left: false,
+  right: 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,94 +33,64 @@ 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);
+  c = document.getElementById("canvas");
+  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;
     gameLoop();
+  };
 
+  document.getElementById("musicBtn").onclick = () => {
+    musicMuted = !musicMuted;
+    backgroundMusic.muted = musicMuted;
 
+    document.getElementById("musicBtn").innerText = musicMuted
+      ? "Music: OFF"
+      : "Music: ON";
+  };
 
+  document.getElementById("optionsBtn").onclick = () => {
+    alert(
+      "Options menu belum dibuat. Kamu bisa tambah difficulty, sensitivity, dll."
+    );
+  };
 
-
-
-
-
-
-
-
-
-
-
-
-
-    document.getElementById("startBtn").onclick = () => {
-      document.getElementById("startMenu").style.display = "none";
-      gameStarted = true;
-      gameLoop();
-    };
-
-    document.getElementById("musicBtn").onclick = () => {
-      musicMuted = !musicMuted;
-      backgroundMusic.muted = musicMuted;
-
-      document.getElementById("musicBtn").innerText = musicMuted
-        ? "Music: OFF"
-        : "Music: ON";
-    };
-
-    document.getElementById("optionsBtn").onclick = () => {
-      alert(
-        "Options menu belum dibuat. Kamu bisa tambah difficulty, sensitivity, dll."
-      );
-    };
-
-    document.getElementById("exitBtn").onclick = () => {
-      window.close();
-    };
-
+  document.getElementById("exitBtn").onclick = () => {
+    window.close();
+  };
 }
 
-
-
 function gameLoop() {
   if (!gameStarted) return;
 
@@ -138,269 +100,269 @@ 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
-    }
+  if (e.keyCode == 87) {
+    keys.up = true;
+    backgroundMusic.play();
+    backgroundMusic.volume = 0.8;
+  } else if (e.keyCode == 83) {
+    keys.down = true;
+  }
 
-    if (e.keyCode == 65) {
-        keys.left = true;
-    }
-    
-    if (e.keyCode == 68) {
-        keys.right = true;
-    }
+  if (e.keyCode == 65) {
+    keys.left = true;
+  }
 
-    if (e.keyCode == 32) {
-        keys.fire = true;
-        missilesArray.push(new Missile(player1.x + 120, player1.y + 50, 'white', 12));
+  if (e.keyCode == 68) {
+    keys.right = true;
+  }
 
+  if (e.keyCode == 32) {
+    keys.fire = true;
+    missilesArray.push(
+      new Missile(player1.x + 120, player1.y + 50, "white", 12)
+    );
 
-        laser.currentTime = 0;
-        laser.play();
-        laser.volume = 0.4;
-    }
+    laser.currentTime = 0;
+    laser.play();
+    laser.volume = 0.4;
+  }
 }
 
-
-
 function keyUpPressed(e) {
-    if (e.keyCode == 87) {
-        keys.up = false;
-    } else if (e.keyCode == 83) {
-        keys.down = false;
-    }
+  if (e.keyCode == 87) {
+    keys.up = false;
+  } else if (e.keyCode == 83) {
+    keys.down = false;
+  }
 
-    if (e.keyCode == 65) {
-        keys.left = false;
-    }
+  if (e.keyCode == 65) {
+    keys.left = false;
+  }
 
-    if (e.keyCode == 68) {
-        keys.right = false;
-    }
+  if (e.keyCode == 68) {
+    keys.right = false;
+  }
 
-    if (e.keyCode == 32) {
-        keys.fire = false; 
-    }
+  if (e.keyCode == 32) {
+    keys.fire = false;
+  }
 }
 
 function clearGame() {
-    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 }
 
-
-
-
 function updateGame() {
-
-    addStarField();
-    player1.update();
-    
-    game.frames++;
+  addStarField();
+  player1.update();
+  spawnPlanet();
+  if (currentPlanet) currentPlanet.update();
+  game.frames++;
 }
 
-
-
 function drawGame() {
+  if (currentPlanet) currentPlanet.draw(); // planet sekarang di background
 
-    player1.draw(); 
+  player1.draw();
+  enemy.draw();
+  enemy.update();
 
-    enemy.draw();
+  for (var i = 0; i < missilesArray.length; i++) {
+    var m = missilesArray[i];
+    m.draw();
+    m.update();
+  }
 
-    enemy.update();
-
-    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){
-    clearGame(); 
-    updateGame();
-    drawGame();
-    window.requestAnimationFrame(gameLoop);
+
+function gameLoop(timestamp) {
+  clearGame();
+  updateGame();
+  drawGame();
+  window.requestAnimationFrame(gameLoop);
 }
 
-class PlayerObject{
-    constructor(x, y){
-        this.x = x;
-        this.y = y;
-        this.width = 170;
-        this.height = 105;
-        this.image = playerShipImg;
-        this.speed = 8;
-        this.lives = 3;
-        this.score = 0;
-        this.health = 100;
-    }
-    draw(){
-        ctx.save();
-        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
-        ctx.restore(); 
+class PlayerObject {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+    this.width = 170;
+    this.height = 105;
+    this.image = playerShipImg;
+    this.speed = 8;
+    this.lives = 3;
+    this.score = 0;
+    this.health = 100;
+  }
+  draw() {
+    ctx.save();
+    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+    ctx.restore();
+  }
+
+  update() {
+    if (keys.up) {
+      if (this.y > 0) {
+        this.y -= this.speed;
+      }
+    } else if (keys.down) {
+      if (this.x < canvasWidth - this.width) {
+        this.y += this.speed;
+      }
     }
 
-    update(){
-        if (keys.up) {
-            if(this.y > 0){
-            this.y -= this.speed;
-            }
-        }
-
-        else if (keys.down) {
-            if (this.x < canvasWidth - this.width) {
-            this.y += this.speed;
-            }
-        }
-
-        if (keys.right) {
-            if (this.x < canvasWidth - this.width) {
-            this.x += this.speed;
-            }
-        }
-
-        if (keys.left) {
-            if (this.x > 10) {
-            this.x -= this.speed;
-            }
-        }
+    if (keys.right) {
+      if (this.x < canvasWidth - this.width) {
+        this.x += this.speed;
+      }
     }
+
+    if (keys.left) {
+      if (this.x > 10) {
+        this.x -= this.speed;
+      }
+    }
+  }
 }
 
 let player1 = new PlayerObject(100, 100);
 
-function drawNewText(txt, x, y, color){
-    ctx.font = "20px Arial";
-    ctx.fillStyle = color;
-    ctx.fillText(txt, x, y);
+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;
 
-
-
-
-
-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;
+    if (this.x < -2000) {
+      this.x = 2000;
     }
-    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 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();
-        background3.update();
-        background3a.draw();
-        background3a.update();
-    
-        background2.draw();
-        background2.update();
-        background2a.draw();
-        background2a.update();
-    
-        background1.draw();
-        background1.update();
-        background1a.draw();
-        background1a.update();
-} 
+  background3.draw();
+  background3.update();
+  background3a.draw();
+  background3a.update();
 
-class Missile{
-    constructor(x, y, color, speed){
-        this.x = x;
-        this.y = y;
-        this.width = 3;
-        this.height = 10;
-        this.color = color;
-        this.speed = speed;
-    }
+  background2.draw();
+  background2.update();
+  background2a.draw();
+  background2a.update();
 
-    draw(){
-        ctx.save();
-        ctx.fillStyle = this.color;
-        ctx.fillRect(this.x, this.y, this.width, this.height);
-        ctx.fill();
-        ctx.restore();
-    }
-
-    update(){
-        this.x += this.speed 
-    }
+  background1.draw();
+  background1.update();
+  background1a.draw();
+  background1a.update();
 }
 
+class Missile {
+  constructor(x, y, color, speed) {
+    this.x = x;
+    this.y = y;
+    this.width = 3;
+    this.height = 10;
+    this.color = color;
+    this.speed = speed;
+  }
 
+  draw() {
+    ctx.save();
+    ctx.fillStyle = this.color;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+    ctx.fill();
+    ctx.restore();
+  }
 
-
-
-
-
-
-
-
+  update() {
+    this.x += this.speed;
+  }
+}
 
 class EnemyObj {
-    constructor(x, y, speed) {
-        this.x = x;
-        this.y = y;
-        this.width = 170;
-        this.height = 105;
-        this.image = enemy1;
-        this.speed = speed;
-        this.health = 100;
-        this.damage = 10;
-    }
-    draw() {
-        ctx.save();
-        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
-        ctx.restore();
-    }
+  constructor(x, y, speed) {
+    this.x = x;
+    this.y = y;
+    this.width = 170;
+    this.height = 105;
+    this.image = enemy1;
+    this.speed = speed;
+    this.health = 100;
+    this.damage = 10;
+  }
+  draw() {
+    ctx.save();
+    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+    ctx.restore();
+  }
 
-    update() {
-        this.x -= this.speed;
-    }
+  update() {
+    this.x -= this.speed;
+  }
 }
 
-let enemy = new EnemyObj(800, 200, 12);
+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);
+  }
+}