diff --git a/Main.html b/Main.html index 97a86a4..8af858b 100644 --- a/Main.html +++ b/Main.html @@ -11,17 +11,6 @@ - - -
-

GALAXY STRIKER

- - - - - -
- - \ No newline at end of file + diff --git a/Script.js b/Script.js index 0b7569e..ba324ef 100644 --- a/Script.js +++ b/Script.js @@ -1,5 +1,24 @@ "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; @@ -8,8 +27,9 @@ var gameStarted = false; var musicMuted = false; /// 90 FPS (Cause I got motion sickness while playing our game fr) let lastFrameTime = 0; -const frameInterval = 1000 / 30; // 90 FPS limit +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, @@ -39,37 +59,40 @@ 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; -//Stanley +///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 backgroundMusic = document.createElement("audio"); -backgroundMusic.src = "music/Muriel-BobbyRichards.mp3"; - var laser = document.createElement("audio"); laser.src = "music/laser2.mp3"; -var planetImages = []; +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`; @@ -83,40 +106,28 @@ window.onload = function () { 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(); - }; + gameStarted = true; + //randomb bgm yg kita punya we have 3 songs/// + pickRandomBGM(); + currentBGM.volume = 1; + currentBGM.play(); - 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(); - }; + 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; @@ -150,7 +161,6 @@ function keyDownPressed(e) { keys.fire = true; missilesArray.push(new LaserBullet(player1.x + 150, player1.y + 50)); - laser.currentTime = 0; laser.play(); laser.volume = 0.4; @@ -186,6 +196,9 @@ function updateGame() { addShips(); player1.update(); + + if (player1.invincible > 0) player1.invincible--; + spawnPlanet(); if (currentPlanet) currentPlanet.update(); game.frames++; @@ -196,7 +209,6 @@ function drawGame() { player1.draw(); - // Enemy ships for (var i = 0; i < enemyShipArray.length; i++) { var s = enemyShipArray[i]; s.draw(); @@ -204,16 +216,59 @@ function drawGame() { if (s.x < -200) { enemyShipArray.splice(i, 1); - i--; + i--; + continue; } - } - // Missiles + 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--; @@ -222,15 +277,6 @@ function drawGame() { 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 { @@ -244,6 +290,7 @@ class PlayerObject { this.lives = 3; this.score = 0; this.health = 100; + this.invincible = 0; } draw() { ctx.save(); @@ -365,14 +412,12 @@ class LaserBullet { } } - class EnemyObj { constructor(x, y, speed, img) { this.x = x; this.y = y; this.width = 170; this.height = 105; - //gambar this.image = img; this.speed = speed; this.health = 100; @@ -404,7 +449,7 @@ class Planet { draw() { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); - } + } update() { this.x -= this.speed; @@ -436,3 +481,45 @@ function addShips() { } } + +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; // smaller = slower fade + gameOverBGM.volume = 0; + gameOverBGM.play(); + + let fadeInterval = setInterval(() => { + currentBGM.volume -= fadeSpeed; + gameOverBGM.volume += fadeSpeed; + + if (currentBGM.volume <= 0) { + currentBGM.pause(); + currentBGM.volume = 1; + clearInterval(fadeInterval); + } + }, 1000 / 30); // 30 updates per second +} + diff --git a/music/Chill.mp3 b/music/Chill.mp3 new file mode 100644 index 0000000..5da8296 Binary files /dev/null and b/music/Chill.mp3 differ diff --git a/music/ChillGO.mp3 b/music/ChillGO.mp3 new file mode 100644 index 0000000..bcc4018 Binary files /dev/null and b/music/ChillGO.mp3 differ diff --git a/music/Fear.mp3 b/music/Fear.mp3 new file mode 100644 index 0000000..8f4ec33 Binary files /dev/null and b/music/Fear.mp3 differ diff --git a/music/FearGO.mp3 b/music/FearGO.mp3 new file mode 100644 index 0000000..d5de7f6 Binary files /dev/null and b/music/FearGO.mp3 differ diff --git a/music/Muriel-BobbyRichards.mp3 b/music/Muriel-BobbyRichards.mp3 deleted file mode 100644 index 6a9e45c..0000000 Binary files a/music/Muriel-BobbyRichards.mp3 and /dev/null differ diff --git a/music/Scary.mp3 b/music/Scary.mp3 new file mode 100644 index 0000000..5a0a852 Binary files /dev/null and b/music/Scary.mp3 differ diff --git a/music/ScaryGO.mp3 b/music/ScaryGO.mp3 new file mode 100644 index 0000000..c427be3 Binary files /dev/null and b/music/ScaryGO.mp3 differ diff --git a/music/explosion-small.mp3 b/music/explosion-small.mp3 new file mode 100644 index 0000000..3fff138 Binary files /dev/null and b/music/explosion-small.mp3 differ