Kelompok09-SPOILER/Script.js

"use strict";

var canvasWidth = 1280;
var canvasHeight = 650;
var c = undefined;
var ctx = undefined;

// STATE GAME
let gameStarted = false;
let musicMuted = false;

var game = {
  level: 1,
  speed: 1,
  gameOver: false,
  frames: 0,
  timer: 0,
};

// INPUT
var keys = {
  up: false,
  down: false,
  left: false,
  right: false,
  fire: false,
};

// IMAGE ASSET
var playerShipImg = new Image();
playerShipImg.src = "img/fighterShip.png";

var bg0 = new Image();
bg0.src = "img/SpritesPlanet/BlueGiant.png";

var bg1 = new Image();
bg1.src = "img/bg_0.png";

var bg2 = new Image();
bg2.src = "img/bg_0.png";

var enemy1 = new Image();
enemy1.src = "img/alien_0.png";

// 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();
};

function init() {
  c = document.getElementById("canvas");
  ctx = c.getContext("2d");

  // 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();
  };

  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) {
    backgroundMusic.play();
    backgroundMusic.volume = 0.8;
  }

  if (e.keyCode == 32) {
    // SPACE
    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;
  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);

// 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.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;
  }
}

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();

  background2.draw();
  background2.update();
  background2a.draw();
  background2a.update();
}

// 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) {
    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);

// PLANET
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);