Skins

Main.html

@@ -14,7 +14,7 @@
 
 
     <div id="startMenu">
-    <h1 class="title">SPACE ODDYSEY</h1>
+    <h1 class="title">GALAXY STRIKER</h1>
 
     <button class="menuButton" id="startBtn">Start</button>
     <button class="menuButton" id="optionsBtn">Options</button>

Script.js

@@ -2,11 +2,8 @@
 
 var canvasWidth = 1280;
 var canvasHeight = 650;
-var c = undefined;
-var ctx = undefined;
-
-let gameStarted = false;
-let musicMuted = false;
+var c = undefined
+var ctx = undefined
 
 var game = {
     level: 1,
@@ -14,100 +11,155 @@ 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/fighterShip.png";
+playerShipImg.src = 'img/fighterShip.png'
 
 var bg0 = new Image();
-bg0.src = "img/SpritesPlanet/BlueGiant.png";
+bg0.src = 'img/bg_0.png';
 
 var bg1 = new Image();
-bg1.src = "img/bg_0.png";
+bg1.src = "img/bg_1.png";
 
 var bg2 = new Image();
-bg2.src = "img/bg_0.png";
+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 backgroundMusic = document.createElement("audio");
+
+var missilesArray = [];
+
+
+
+
+var backgroundMusic = document.createElement('audio');
 backgroundMusic.src = "music/Muriel-BobbyRichards.mp3";
 
 var laser = document.createElement("audio");
 laser.src = "music/laser2.mp3";
 
-var missilesArray = [];
+
+
+
+
+
+
+
+
+
+
 
 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('keyup', keyUpPressed, false);
+    gameLoop();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-  document.addEventListener("keydown", keyDownPressed);
-  document.addEventListener("keyup", keyUpPressed);
 
     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 sedang dalam pengembangan.");
+      alert(
+        "Options menu belum dibuat. Kamu bisa tambah difficulty, sensitivity, dll."
+      );
     };
 
     document.getElementById("exitBtn").onclick = () => {
       window.close();
     };
 
-  requestAnimationFrame(gameLoop);
 }
 
+
+
 function gameLoop() {
-  if (gameStarted) {
+  if (!gameStarted) return;
+
   clearGame();
   updateGame();
   drawGame();
-  }
   requestAnimationFrame(gameLoop);
 }
 
-function keyDownPressed(e) {
-  if (e.keyCode == 87) keys.up = true; 
-  if (e.keyCode == 83) keys.down = true; 
-  if (e.keyCode == 65) keys.left = true; 
-  if (e.keyCode == 68) keys.right = true; 
 
+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 == 65) {
+        keys.left = true;
+    }
+    
+    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)
-    );
+        missilesArray.push(new Missile(player1.x + 120, player1.y + 50, 'white', 12));
+
 
         laser.currentTime = 0;
         laser.play();
@@ -115,44 +167,74 @@ function keyDownPressed(e) {
     }
 }
 
+
+
 function keyUpPressed(e) {
-  if (e.keyCode == 87) keys.up = false;
-  if (e.keyCode == 83) keys.down = false;
-  if (e.keyCode == 65) keys.left = false;
-  if (e.keyCode == 68) keys.right = false;
-  if (e.keyCode == 32) keys.fire = 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 == 68) {
+        keys.right = false;
+    }
+
+    if (e.keyCode == 32) {
+        keys.fire = false; 
+    }
 }
 
 function clearGame() {
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 }
 
+
+
+
 function updateGame() {
+
     addStarField();
-
-  planet.update();
-  enemy.update();
     player1.update();
     
-  missilesArray.forEach((m) => m.update());
-
     game.frames++;
 }
 
-function drawGame() {
-  planet.draw();
 
-  enemy.draw();
+
+function drawGame() {
+
     player1.draw(); 
 
-  missilesArray.forEach((m) => m.draw());
+    enemy.draw();
 
-  drawNewText("Score: " + player1.score, 30, 610, "white");
-  drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
+    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');
 }
 
-class PlayerObject {
-  constructor(x, y) {
+function gameLoop(timestamp){
+    clearGame(); 
+    updateGame();
+    drawGame();
+    window.requestAnimationFrame(gameLoop);
+}
+
+class PlayerObject{
+    constructor(x, y){
         this.x = x;
         this.y = y;
         this.width = 170;
@@ -163,53 +245,91 @@ 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() {
-    if (keys.up && this.y > 0) this.y -= this.speed;
-    if (keys.down && this.y < canvasHeight - this.height) this.y += this.speed;
+    update(){
+        if (keys.up) {
+            if(this.y > 0){
+            this.y -= this.speed;
+            }
+        }
 
-    if (keys.right && this.x < canvasWidth - this.width) this.x += this.speed;
-    if (keys.left && this.x > 10) this.x -= 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;
+            }
+        }
     }
 }
 
 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.img = img;
         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;
+
+        if (this.x < -2000) {
+            this.x = 2000;
         }
+
+    }
+
 }
 
-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 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();
@@ -221,10 +341,15 @@ function addStarField() {
         background2.update();
         background2a.draw();
         background2a.update();
+    
+        background1.draw();
+        background1.update();
+        background1a.draw();
+        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;
@@ -233,16 +358,29 @@ class Missile {
         this.speed = speed;
     }
 
-  draw() {
+    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;
+    update(){
+        this.x += this.speed 
     }
 }
 
+
+
+
+
+
+
+
+
+
+
 class EnemyObj {
     constructor(x, y, speed) {
         this.x = x;
@@ -254,9 +392,10 @@ class EnemyObj {
         this.health = 100;
         this.damage = 10;
     }
-
     draw() {
+        ctx.save();
         ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+        ctx.restore();
     }
 
     update() {
@@ -265,30 +404,3 @@ class EnemyObj {
 }
 
 let enemy = new EnemyObj(800, 200, 12);
-
-class PlanetObj {
-  constructor(img, x, y, width, height, speed) {
-    this.img = img;
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-    this.speed = speed;
-    this.visible = true;
-  }
-
-  draw() {
-    if (this.visible) {
-      ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-    }
-  }
-
-  update() {
-    if (!this.visible) return;
-    this.x -= this.speed;
-
-    if (this.x < -this.width) this.visible = false;
-  }
-}
-
-let planet = new PlanetObj(bg0, 1400, 150, 400, 400, 1);

Style.css

@@ -103,7 +103,7 @@ body {
         0 4px 0 #00bcd4,
         0 0 12px rgba(0, 234, 255, 0.4),
         inset 0 0 15px rgba(0, 234, 255, 0.2);
-    transition: 0.3s ease-in-out;
+    transition: 0.3ease-in-out;
 }
 
 .menuButton:hover {