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
}








// Untuk background
var playerShipImg = new Image();
playerShipImg.src = 'img/fighterShip.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";












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



function drawGame() {

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