Kelompok09-SPOILER/Script.js

"use strict";

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

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

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

var playerShipImg = new Image();
playerShipImg.src = "img/ships2.png";

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

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

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

var enemyImgArray = [];
enemyImgArray.length = 7;

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

var missilesArray = [];

var backgroundMusic = document.createElement("audio");
backgroundMusic.src = "music/Muriel-BobbyRichards.mp3";

var laser = document.createElement("audio");
laser.src = "music/laser2.mp3";

var planetImages = [];
for (let i = 1; i <= 4; i++) {
  let img = new Image();
  img.src = `img/SpritesPlanet/planet_${i}.png`;
  planetImages.push(img);
}

window.onload = function () {
  init();
};

function init() {
  c = document.getElementById("canvas");
  ctx = c.getContext("2d");
  document.addEventListener("keydown", keyDownPressed, false);
  document.addEventListener("keyup", keyUpPressed, false);
  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) return;

  clearGame();
  updateGame();
  drawGame();
  requestAnimationFrame(gameLoop);
}

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 LaserBullet(player1.x + 150, player1.y + 50));


    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();
  player1.update();
  spawnPlanet();
  if (currentPlanet) currentPlanet.update();
  game.frames++;
}

function drawGame() {
  if (currentPlanet) currentPlanet.draw(); // planet sekarang di background

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

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) {
      if (this.y > 0) {
        this.y -= 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);
}

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

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

  background1.draw();
  background1.update();
  background1a.draw();
  background1a.update();
}

class LaserBullet {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 14;
    this.height = 4;
    this.speed = 16;
  }

  draw() {
    let g = ctx.createLinearGradient(
      this.x,
      this.y,
      this.x + this.width,
      this.y
    );
    g.addColorStop(0, "#00e1ff");
    g.addColorStop(0.5, "#ffffff");
    g.addColorStop(1, "#00e1ff");
    ctx.fillStyle = g;
    ctx.shadowColor = "#00ffff";
    ctx.shadowBlur = 15;
    ctx.fillRect(this.x, this.y, this.width, this.height);
    ctx.shadowBlur = 0;
  }

  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.save();
    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
    ctx.restore();
  }

  update() {
    this.x -= this.speed;
  }
}

let enemy = new EnemyObj(800, 200, 12);

class Planet {
  constructor(img) {
    this.image = img;
    this.width = 160;
    this.height = 160;
    this.x = canvasWidth + 50;
    this.y = Math.random() * 300 + 50;
    this.speed = 1.2;
    this.active = true;
  }

  draw() {
    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
  }

  update() {
    this.x -= this.speed;
    if (this.x < -this.width) {
      this.active = false;
    }
  }
}

let currentPlanet = null;

function spawnPlanet() {
  if (currentPlanet == null || currentPlanet.active === false) {
    let randomImg =
      planetImages[Math.floor(Math.random() * planetImages.length)];
    currentPlanet = new Planet(randomImg);
  }
}