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,293 +2,405 @@
 
 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,
-  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/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");
+    c = document.getElementById("canvas");
+    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;
-  };
 
-  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();
-  };
 
-  requestAnimationFrame(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("exitBtn").onclick = () => {
+      window.close();
+    };
+
 }
 
+
+
 function gameLoop() {
-  if (gameStarted) {
-    clearGame();
-    updateGame();
-    drawGame();
-  }
+  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; 
+    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) {
-    backgroundMusic.play();
-    backgroundMusic.volume = 0.8;
-  }
+    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)
-    );
+    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;
-  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);
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 }
 
+
+
+
 function updateGame() {
-  addStarField();
 
-  planet.update();
-  enemy.update();
-  player1.update();
-
-  missilesArray.forEach((m) => m.update());
-
-  game.frames++;
+    addStarField();
+    player1.update();
+    
+    game.frames++;
 }
 
+
+
 function drawGame() {
-  planet.draw();
 
-  enemy.draw();
-  player1.draw();
+    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) {
-    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;
-  }
+function gameLoop(timestamp){
+    clearGame(); 
+    updateGame();
+    drawGame();
+    window.requestAnimationFrame(gameLoop);
+}
 
-  draw() {
-    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
-  }
+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 && 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) {
-  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.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 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();
-  background3.update();
-  background3a.draw();
-  background3a.update();
+        background3.draw();
+        background3.update();
+        background3a.draw();
+        background3a.update();
+    
+        background2.draw();
+        background2.update();
+        background2a.draw();
+        background2a.update();
+    
+        background1.draw();
+        background1.update();
+        background1a.draw();
+        background1a.update();
+} 
 
-  background2.draw();
-  background2.update();
-  background2a.draw();
-  background2a.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 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;
-  }
-}
+
+
+
+
+
+
+
 
 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.drawImage(this.image, this.x, this.y, this.width, this.height);
-  }
-
-  update() {
-    this.x -= this.speed;
-  }
-}
-
-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);
+    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() {
-    if (!this.visible) return;
-    this.x -= this.speed;
-
-    if (this.x < -this.width) this.visible = false;
-  }
+    update() {
+        this.x -= this.speed;
+    }
 }
 
-let planet = new PlanetObj(bg0, 1400, 150, 400, 400, 1);
+let enemy = new EnemyObj(800, 200, 12);

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 {