update

Script.js

@@ -2,38 +2,36 @@
 
 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,
+  level: 1,
-    speed: 1,
+  speed: 1,
-    gameOver: false,
+  gameOver: false,
-    frames: 0,
+  frames: 0,
-    timer: 0,
+  timer: 0,
-}
+};
 
+// INPUT
 var keys = {
-    up: false,
+  up: false,
-    down: false,
+  down: false,
-    left: false,
+  left: false,
-    right: 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,367 +39,252 @@ 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");
+  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;
+  };
 
+  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.");
+  };
 
+  document.getElementById("exitBtn").onclick = () => {
+    window.close();
+  };
 
-
-
-
-
-
-
-
-
-
-
-    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();
-    };
-
-}
-
-
-
-function gameLoop() {
-  if (!gameStarted) return;
-
-  clearGame();
-  updateGame();
-  drawGame();
   requestAnimationFrame(gameLoop);
 }
 
-
+// MAIN GAME LOOP
-function keyDownPressed(e) {
+function gameLoop() {
-    if (e.keyCode == 87) {
+  if (gameStarted) {
-        keys.up = true;
+    clearGame();
-        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));
-
-
-        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 == 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();
-
-    player1.update();
-
-    game.frames++;
-}
-
-
-
-function drawGame() {
-
-    planet.draw();
-
-    player1.draw(); 
-
-    enemy.draw();
-
-    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');
-}
-
-function gameLoop(timestamp){
-    clearGame(); 
     updateGame();
     drawGame();
-    window.requestAnimationFrame(gameLoop);
+  }
+  requestAnimationFrame(gameLoop);
 }
 
-class PlayerObject{
+// INPUT HANDLER
-    constructor(x, y){
+function keyDownPressed(e) {
-        this.x = x;
+  if (e.keyCode == 87) keys.up = true; // W
-        this.y = y;
+  if (e.keyCode == 83) keys.down = true; // S
-        this.width = 170;
+  if (e.keyCode == 65) keys.left = true; // A
-        this.height = 105;
+  if (e.keyCode == 68) keys.right = true; // D
-        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 (e.keyCode == 87) {
-        if (keys.up) {
+    backgroundMusic.play();
-            if(this.y > 0){
+    backgroundMusic.volume = 0.8;
-            this.y -= this.speed;
+  }
-            }
-        }
 
-        else if (keys.down) {
+  if (e.keyCode == 32) {
-            if (this.x < canvasWidth - this.width) {
+    // SPACE
-            this.y += this.speed;
+    keys.fire = true;
-            }
+    missilesArray.push(
-        }
+      new Missile(player1.x + 120, player1.y + 50, "white", 12)
+    );
 
-        if (keys.right) {
+    laser.currentTime = 0;
-            if (this.x < canvasWidth - this.width) {
+    laser.play();
-            this.x += this.speed;
+    laser.volume = 0.4;
-            }
+  }
-        }
+}
 
-        if (keys.left) {
+function keyUpPressed(e) {
-            if (this.x > 10) {
+  if (e.keyCode == 87) keys.up = false;
-            this.x -= this.speed;
+  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;
+}
+
+// CLEAR CANVAS
+function clearGame() {
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+}
+
+// UPDATE GAME OBJECTS
+function updateGame() {
+  addStarField();
+
+  planet.update();
+  enemy.update();
+  player1.update();
+
+  missilesArray.forEach((m) => m.update());
+
+  game.frames++;
+}
+
+// DRAW SPRITES
+function drawGame() {
+  planet.draw();
+
+  enemy.draw();
+  player1.draw();
+
+  missilesArray.forEach((m) => m.draw());
+
+  drawNewText("Score: " + player1.score, 30, 610, "white");
+  drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
+}
+
+// PLAYER
+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.drawImage(this.image, this.x, this.y, this.width, this.height);
+  }
+
+  update() {
+    if (keys.up && this.y > 0) this.y -= this.speed;
+    if (keys.down && this.y < canvasHeight - this.height) 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;
+  }
 }
 
 let player1 = new PlayerObject(100, 100);
 
-function drawNewText(txt, x, y, color){
+// TEXT
-    ctx.font = "20px Arial";
+function drawNewText(txt, x, y, color) {
-    ctx.fillStyle = color;
+  ctx.font = "20px Arial";
-    ctx.fillText(txt, x, y);
+  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.speed = speed;
+  }
 
+  draw() {
+    ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+  }
 
-
+  update() {
-
+    this.x -= this.speed;
-
+    if (this.x < -2000) this.x = 2000;
-
+  }
-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;
-
-        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 background2 = new backgroundObj(bg1, 0, 0, game.speed*2);
+let background3 = new backgroundObj(bg2, 0, 0, game.speed * 1);
-let background2a = new backgroundObj(bg1, 2000, 0, game.speed*2);
+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.draw();
-        background3.update();
+  background3.update();
-        background3a.draw();
+  background3a.draw();
-        background3a.update();
+  background3a.update();
-    
-        background2.draw();
-        background2.update();
-        background2a.draw();
-        background2a.update();
-} 
 
-class Missile{
+  background2.draw();
-    constructor(x, y, color, speed){
+  background2.update();
-        this.x = x;
+  background2a.draw();
-        this.y = y;
+  background2a.update();
-        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 
-    }
 }
 
+// MISSILE
+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.fillStyle = this.color;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+  }
 
+  update() {
+    this.x += this.speed;
+  }
+}
 
-
+// ENEMY
-
-
-
-
-
-
 class EnemyObj {
-    constructor(x, y, speed) {
+  constructor(x, y, speed) {
-        this.x = x;
+    this.x = x;
-        this.y = y;
+    this.y = y;
-        this.width = 170;
+    this.width = 170;
-        this.height = 105;
+    this.height = 105;
-        this.image = enemy1;
+    this.image = enemy1;
-        this.speed = speed;
+    this.speed = speed;
-        this.health = 100;
+    this.health = 100;
-        this.damage = 10;
+    this.damage = 10;
-    }
+  }
-    draw() {
-        ctx.save();
-        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
-        ctx.restore();
-    }
 
-    update() {
+  draw() {
-        this.x -= this.speed;
+    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
-    }
+  }
+
+  update() {
+    this.x -= this.speed;
+  }
 }
 
 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)
+}