529 lines
11 KiB
JavaScript
529 lines
11 KiB
JavaScript
"use strict";
|
|
|
|
|
|
// BGM system
|
|
const bgmList = [
|
|
{ normal: "music/Scary.mp3", gameover: "music/ScaryGO.mp3" },
|
|
{ normal: "music/Fear.mp3", gameover: "music/FearGO.mp3" },
|
|
{ normal: "music/Chill.mp3", gameover: "music/ChillGO.mp3" }
|
|
];
|
|
|
|
let currentBGM = new Audio();
|
|
let gameOverBGM = new Audio();
|
|
currentBGM.loop = true;
|
|
gameOverBGM.loop = true;
|
|
|
|
function pickRandomBGM() {
|
|
const bgm = bgmList[Math.floor(Math.random() * bgmList.length)];
|
|
currentBGM.src = bgm.normal;
|
|
gameOverBGM.src = bgm.gameover;
|
|
}
|
|
|
|
var canvasWidth = 1280;
|
|
var canvasHeight = 650;
|
|
var c = undefined;
|
|
var ctx = undefined;
|
|
var gameStarted = false;
|
|
var musicMuted = false;
|
|
/// 90 FPS (Cause I got motion sickness while playing our game fr)
|
|
let lastFrameTime = 0;
|
|
const frameInterval = 1000 / 80; // 90 FPS limit right now it's capped at 80
|
|
// 90 FPS mark (change the const x/x to what fps you want)
|
|
// Changing FPS actually makes the game slower ya or faster, tergantung(?)
|
|
|
|
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 enemy1 = new Image();
|
|
enemy1.src = "img/alien_0.png";
|
|
|
|
var enemyImgArray = [];
|
|
enemyImgArray.length = 4;
|
|
|
|
///Key listen
|
|
let audioStarted = false;
|
|
|
|
window.addEventListener("keydown", () => {
|
|
if (!audioStarted) {
|
|
currentBGM.play();
|
|
audioStarted = true;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
//Stanley
|
|
for (var i = 0; i < enemyImgArray.length; i++) {
|
|
enemyImgArray[i] = new Image();
|
|
enemyImgArray[i].src = 'img/alien_' + [i] + '.png';
|
|
}
|
|
|
|
var missilesArray = [];
|
|
var enemyShipArray = [];
|
|
|
|
var laser = document.createElement("audio");
|
|
laser.src = "music/laser2.mp3";
|
|
|
|
var explosion_enemy = document.createElement("audio");
|
|
explosion_enemy.src = "music/explosion-small.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);
|
|
|
|
gameStarted = true;
|
|
//randomb bgm yg kita punya we have 3 songs///
|
|
pickRandomBGM();
|
|
currentBGM.volume = 1;
|
|
currentBGM.play();
|
|
|
|
requestAnimationFrame(gameLoop);
|
|
}
|
|
|
|
//Aku ganti function game loop that follows the 90FPS Cap rule
|
|
function gameLoop(timestamp) {
|
|
if (!gameStarted) return;
|
|
|
|
if (game.gameOver) {
|
|
drawGameOver();
|
|
return;
|
|
}
|
|
|
|
if (timestamp - lastFrameTime >= frameInterval) {
|
|
lastFrameTime = timestamp;
|
|
|
|
clearGame();
|
|
updateGame();
|
|
drawGame();
|
|
}
|
|
|
|
requestAnimationFrame(gameLoop);
|
|
}
|
|
// End of 90fps mark
|
|
|
|
function keyDownPressed(e) {
|
|
if (e.keyCode == 87) {
|
|
keys.up = true;
|
|
} 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();
|
|
addShips();
|
|
|
|
player1.update();
|
|
|
|
if (player1.invincible > 0) player1.invincible--;
|
|
|
|
spawnPlanet();
|
|
if (currentPlanet) currentPlanet.update();
|
|
game.frames++;
|
|
}
|
|
|
|
function drawGame() {
|
|
if (currentPlanet) currentPlanet.draw();
|
|
|
|
player1.draw();
|
|
|
|
for (var i = 0; i < enemyShipArray.length; i++) {
|
|
var s = enemyShipArray[i];
|
|
s.draw();
|
|
s.update();
|
|
|
|
if (s.x < -200) {
|
|
enemyShipArray.splice(i, 1);
|
|
i--;
|
|
continue;
|
|
}
|
|
|
|
if (Tabrakan(player1, s)) {
|
|
if (player1.invincible <= 0) {
|
|
|
|
player1.lives--;
|
|
player1.invincible = 60;
|
|
//self note: change this later
|
|
explosion_enemy.play();
|
|
player1.x = 15;
|
|
player1.y = 300;
|
|
game.frames = 0;
|
|
|
|
enemyShipArray.splice(i, 1);
|
|
i--;
|
|
|
|
if (player1.lives <= 0) {
|
|
game.gameOver = true;
|
|
crossfadeToGameOver();
|
|
|
|
}
|
|
|
|
continue;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < missilesArray.length; i++) {
|
|
var m = missilesArray[i];
|
|
m.draw();
|
|
m.update();
|
|
|
|
|
|
|
|
|
|
// Hit detecttion
|
|
for (var j = 0; j < enemyShipArray.length; j++) {
|
|
var en = enemyShipArray[j];
|
|
|
|
if (Tabrakan(m, en)) {
|
|
player1.score += 100;
|
|
explosion_enemy.play();
|
|
missilesArray.splice(i, 1);
|
|
enemyShipArray.splice(j, 1);
|
|
}
|
|
}
|
|
//Hits end
|
|
|
|
|
|
|
|
|
|
if (m.x > canvasWidth) {
|
|
missilesArray.splice(i, 1);
|
|
i--;
|
|
}
|
|
}
|
|
|
|
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;
|
|
this.invincible = 0;
|
|
}
|
|
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, img) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = 170;
|
|
this.height = 105;
|
|
this.image = img;
|
|
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, enemyImgArray[0]);
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
function addShips() {
|
|
if (game.frames > 200) {
|
|
|
|
if (game.frames % 150 == 0) {
|
|
var randomY = Math.floor(Math.random() * 500) + 20;
|
|
var randomSpeed = Math.floor(Math.random() * 10) + 1;
|
|
var randomShip = Math.floor(Math.random() * enemyImgArray.length);
|
|
enemyShipArray.push(new EnemyObj(1300, randomY, randomSpeed, enemyImgArray[randomShip]));
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function Tabrakan(o, p){
|
|
if (o.x + o.width > p.x &&
|
|
o.x < p.x + p.width &&
|
|
o.y + o.height > p.y &&
|
|
o.y < p.y + p.height) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function drawGameOver() {
|
|
ctx.fillStyle = "rgba(0,0,0,0.7)";
|
|
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
|
|
|
ctx.font = "80px Arial";
|
|
ctx.fillStyle = "red";
|
|
ctx.textAlign = "center";
|
|
ctx.fillText("GAME OVER", canvasWidth / 2, canvasHeight / 2 - 50);
|
|
|
|
ctx.font = "40px Arial";
|
|
ctx.fillStyle = "white";
|
|
ctx.fillText("Refresh to Restart", canvasWidth / 2, canvasHeight / 2 + 30);
|
|
}
|
|
|
|
function crossfadeToGameOver() {
|
|
let fadeSpeed = 0.02;
|
|
|
|
gameOverBGM.volume = 0;
|
|
gameOverBGM.play();
|
|
|
|
let fadeInterval = setInterval(() => {
|
|
|
|
currentBGM.volume -= fadeSpeed;
|
|
if (currentBGM.volume < 0) currentBGM.volume = 0;
|
|
|
|
gameOverBGM.volume += fadeSpeed;
|
|
if (gameOverBGM.volume > 1) gameOverBGM.volume = 1;
|
|
|
|
if (currentBGM.volume === 0) {
|
|
currentBGM.pause();
|
|
clearInterval(fadeInterval);
|
|
}
|
|
|
|
}, 1000 / 30);
|
|
}
|
|
|