update

Script.js

@@ -2,8 +2,12 @@
 
 var canvasWidth = 1280;
 var canvasHeight = 650;
-var c = undefined
+var c = undefined;
-var ctx = undefined
+var ctx = undefined;
+
+// STATE GAME
+let gameStarted = false;
+let musicMuted = false;
 
 var game = {
   level: 1,
@@ -11,29 +15,23 @@ var game = {
   gameOver: false,
   frames: 0,
   timer: 0,
-}
+};
 
+// INPUT
 var keys = {
   up: false,
   down: false,
   left: false,
   right: false,
-    fire: false
+  fire: false,
-}
+};
 
-
+// IMAGE ASSET
-
-
-
-
-
-
-// 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/SpritesPlanet/BlueGiant.png";
 
 var bg1 = new Image();
 bg1.src = "img/bg_0.png";
@@ -41,125 +39,85 @@ bg1.src = "img/bg_0.png";
 var bg2 = new Image();
 bg2.src = "img/bg_0.png";
 
-
-
-
-
-var enemyImgArray = [];
-enemyImgArray.length = 7;
-
 var enemy1 = new Image();
-enemy1.src = "img/alien_0.png"
+enemy1.src = "img/alien_0.png";
 
-
+// AUDIO
-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";
 
+// MISILES & ENEMY
+var missilesArray = [];
 
-
+// INIT GAME
-
-
-
-
-
-
-
-
-
 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();
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
+  // INPUT HANDLER
+  document.addEventListener("keydown", keyDownPressed);
+  document.addEventListener("keyup", keyUpPressed);
 
+  // --- START MENU BUTTONS ---
   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(
+    alert("Options menu sedang dalam pengembangan.");
-        "Options menu belum dibuat. Kamu bisa tambah difficulty, sensitivity, dll."
-      );
   };
 
   document.getElementById("exitBtn").onclick = () => {
     window.close();
   };
 
-}
-
-
-
-function gameLoop() {
-  if (!gameStarted) return;
-
-  clearGame();
-  updateGame();
-  drawGame();
   requestAnimationFrame(gameLoop);
 }
 
+// MAIN GAME LOOP
+function gameLoop() {
+  if (gameStarted) {
+    clearGame();
+    updateGame();
+    drawGame();
+  }
+  requestAnimationFrame(gameLoop);
+}
 
+// INPUT HANDLER
 function keyDownPressed(e) {
+  if (e.keyCode == 87) keys.up = true; // W
+  if (e.keyCode == 83) keys.down = true; // S
+  if (e.keyCode == 65) keys.left = true; // A
+  if (e.keyCode == 68) keys.right = true; // D
+
   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) {
+    // SPACE
     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,76 +125,46 @@ function keyDownPressed(e) {
   }
 }
 
-
-
 function keyUpPressed(e) {
-    if (e.keyCode == 87) {
+  if (e.keyCode == 87) keys.up = false;
-        keys.up = false;
+  if (e.keyCode == 83) keys.down = false;
-    } else if (e.keyCode == 83) {
+  if (e.keyCode == 65) keys.left = false;
-        keys.down = false;
+  if (e.keyCode == 68) keys.right = false;
-    }
+  if (e.keyCode == 32) keys.fire = false;
-
-    if (e.keyCode == 65) {
-        keys.left = false;
-    }
-
-    if (e.keyCode == 68) {
-        keys.right = false;
-    }
-
-    if (e.keyCode == 32) {
-        keys.fire = false; 
-    }
 }
 
+// CLEAR CANVAS
 function clearGame() {
   ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 }
 
-
+// UPDATE GAME OBJECTS
-
-
 function updateGame() {
-
   addStarField();
-    planet.update();
 
+  planet.update();
+  enemy.update();
   player1.update();
 
+  missilesArray.forEach((m) => m.update());
+
   game.frames++;
 }
 
-
+// DRAW SPRITES
-
 function drawGame() {
-
   planet.draw();
 
+  enemy.draw();
   player1.draw();
 
-    enemy.draw();
+  missilesArray.forEach((m) => m.draw());
 
-    enemy.update();
+  drawNewText("Score: " + player1.score, 30, 610, "white");
-
+  drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
-    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');
-}
-
-function gameLoop(timestamp){
-    clearGame(); 
-    updateGame();
-    drawGame();
-    window.requestAnimationFrame(gameLoop);
 }
 
+// PLAYER
 class PlayerObject {
   constructor(x, y) {
     this.x = x;
@@ -249,87 +177,56 @@ class PlayerObject{
     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 (keys.up && this.y > 0) this.y -= this.speed;
-            if(this.y > 0){
+    if (keys.down && this.y < canvasHeight - this.height) this.y += this.speed;
-            this.y -= this.speed;
-            }
-        }
 
-        else if (keys.down) {
+    if (keys.right && this.x < canvasWidth - this.width) this.x += this.speed;
-            if (this.x < canvasWidth - this.width) {
+    if (keys.left && this.x > 10) this.x -= this.speed;
-            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);
 
+// TEXT
 function drawNewText(txt, x, y, color) {
   ctx.font = "20px Arial";
   ctx.fillStyle = color;
   ctx.fillText(txt, x, y);
 }
 
-
+// BACKGROUND
-
-
-
-
-
 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);
 
-
 function addStarField() {
   background3.draw();
   background3.update();
@@ -342,6 +239,7 @@ function addStarField() {
   background2a.update();
 }
 
+// MISSILE
 class Missile {
   constructor(x, y, color, speed) {
     this.x = x;
@@ -353,28 +251,16 @@ class Missile{
   }
 
   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 
+    this.x += this.speed;
   }
 }
 
-
+// ENEMY
-
-
-
-
-
-
-
-
-
 class EnemyObj {
   constructor(x, y, speed) {
     this.x = x;
@@ -386,10 +272,9 @@ 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() {
@@ -399,9 +284,7 @@ class EnemyObj {
 
 let enemy = new EnemyObj(800, 200, 12);
 
-
+// PLANET
-
-
 class PlanetObj {
   constructor(img, x, y, width, height, speed) {
     this.img = img;
@@ -421,12 +304,9 @@ class PlanetObj {
 
   update() {
     if (!this.visible) return;
-
     this.x -= this.speed;
 
-    if (this.x < -this.width) {
+    if (this.x < -this.width) this.visible = false;
-      this.visible = false;
-    }
   }
 }
 

Style.css

@@ -40,35 +40,67 @@ body {
     height: 650px;
     top: 0;
     left: 0;
-    background: rgba(0,0,0,0.85);
+
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(6px);
+
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     z-index: 10;
-    font-family: Arial, sans-serif;
+
+    font-family: 'Poppins', Arial, sans-serif;
+
+    animation: fadeIn 1s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
 .title {
-    font-size: 60px;
+    font-size: 70px;
-    margin-bottom: 50px;
+    margin-bottom: 40px;
-    color: white;
+    color: #ffffff;
-    letter-spacing: 3px;
+    letter-spacing: 4px;
+
+    text-shadow: 
+        0 0 10px #00eaff,
+        0 0 20px #00eaff,
+        0 0 30px rgba(0, 234, 255, 0.7);
+
+    animation: glow 3s infinite alternate ease-in-out;
+}
+
+@keyframes glow {
+    from { text-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; }
+    to   { text-shadow: 0 0 20px #00eaff, 0 0 40px #00eaff; }
 }
 
 .menuButton {
-    font-size: 30px;
+    font-size: 28px;
-    padding: 10px 40px;
+    padding: 12px 50px;
     margin: 10px;
     cursor: pointer;
-    background: #222;
+
-    border: 2px solid white;
+    background: rgba(20, 20, 20, 0.8);
     color: white;
-    border-radius: 10px;
+
-    transition: 0.2s;
+    border: 2px solid #00eaff;
+    border-radius: 12px;
+
+    box-shadow: 0 0 10px rgba(0, 234, 255, 0.4);
+
+    transition: 0.3s ease-in-out;
 }
 
+
 .menuButton:hover {
-    background: white;
+    background: #00eaff;
-    color: black;
+    color: #000;
+    box-shadow: 0 0 20px #00eaff;
+    transform: scale(1.05)
 }