diff --git a/Main.html b/Main.html index 8af858b..6f7524d 100644 --- a/Main.html +++ b/Main.html @@ -7,10 +7,18 @@ + +
+
SPACE GAME
+ + + + +
+
- diff --git a/Script.js b/Script.js index 1185772..57dca38 100644 --- a/Script.js +++ b/Script.js @@ -1,5 +1,6 @@ "use strict"; +/* ------------- AUDIO & BGM ------------- */ const bgmList = [ { normal: "music/Scary.mp3", gameover: "music/ScaryGO.mp3" }, { normal: "music/Fear.mp3", gameover: "music/FearGO.mp3" }, @@ -17,12 +18,11 @@ function pickRandomBGM() { gameOverBGM.src = bgm.gameover; } +/* ------------- CANVAS / GAME VARS ------------- */ var canvasWidth = 1280; var canvasHeight = 650; var c = undefined; var ctx = undefined; -var gameStarted = false; -var musicMuted = false; let lastFrameTime = 0; const frameInterval = 1000 / 80; @@ -35,6 +35,10 @@ var game = { timer: 0, }; +/* gameState: "menu" | "playing" | "paused" */ +let gameState = "menu"; + +/* ------------- INPUT STATE ------------- */ var keys = { up: false, down: false, @@ -43,6 +47,7 @@ var keys = { fire: false, }; +/* ------------- IMAGES & ASSETS ------------- */ var playerShipImg = new Image(); playerShipImg.src = "img/Player/pesawat22.png"; @@ -55,24 +60,11 @@ 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; - -let audioStarted = false; - -window.addEventListener("keydown", () => { - if (!audioStarted) { - currentBGM.play(); - audioStarted = true; - } -}); - for (var i = 0; i < enemyImgArray.length; i++) { enemyImgArray[i] = new Image(); - enemyImgArray[i].src = "img/alien_" + [i] + ".png"; + enemyImgArray[i].src = "img/alien_" + i + ".png"; } var missilesArray = []; @@ -92,26 +84,92 @@ for (let i = 1; i <= 4; i++) { } window.onload = function () { - init(); + setup(); }; -function init() { +function setup() { c = document.getElementById("canvas"); ctx = c.getContext("2d"); + window.addEventListener( + "keydown", + function (e) { + const block = ["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]; + if (block.includes(e.code)) e.preventDefault(); + }, + { passive: false } + ); + document.addEventListener("keydown", keyDownPressed, false); document.addEventListener("keyup", keyUpPressed, false); - gameStarted = true; + const startBtn = document.getElementById("startBtn"); + const costumeBtn = document.getElementById("costumeBtn"); + const optionBtn = document.getElementById("optionBtn"); + const exitBtn = document.getElementById("exitBtn"); + + if (startBtn) { + startBtn.onclick = function () { + startGame(); + }; + } + if (costumeBtn) { + costumeBtn.onclick = function () { + alert("Costume menu belum dibuat (kalau mau, aku bisa bikinin!)"); + }; + } + if (optionBtn) { + optionBtn.onclick = function () { + alert("Options menu belum dibuat."); + }; + } + if (exitBtn) { + exitBtn.onclick = function () { + alert("Terima kasih telah bermain!"); + }; + } + + clearGame(); +} + +let audioStarted = false; +function startGame() { + const menu = document.getElementById("startMenu"); + if (menu) menu.style.display = "none"; + + game.gameOver = false; + game.frames = 0; + game.timer = 0; + player1.x = 100; + player1.y = canvasHeight / 2 - player1.height / 2; + player1.vx = 0; + player1.vy = 0; + player1.lives = 3; + player1.score = 0; + enemyShipArray.length = 0; + missilesArray.length = 0; + pickRandomBGM(); currentBGM.volume = 1; - currentBGM.play(); + currentBGM.play().catch(() => { + }); + audioStarted = true; + gameState = "playing"; requestAnimationFrame(gameLoop); } +let gameStarted = false; + function gameLoop(timestamp) { - if (!gameStarted) return; + if (gameState !== "playing") { + return; + } + + if (!gameStarted) { + gameStarted = true; + lastFrameTime = timestamp; + } if (game.gameOver) { drawGameOver(); @@ -130,6 +188,9 @@ function gameLoop(timestamp) { } function keyDownPressed(e) { + + if (gameState !== "playing") return; + if (e.keyCode == 87 || e.keyCode == 38) { keys.up = true; } else if (e.keyCode == 83 || e.keyCode == 40) { @@ -145,18 +206,21 @@ function keyDownPressed(e) { } if (e.keyCode == 32) { + keys.fire = true; missilesArray.push( new LaserBullet(player1.x + player1.width, player1.y + player1.height / 2) ); laser.currentTime = 0; - laser.play(); laser.volume = 0.4; + laser.play(); } } function keyUpPressed(e) { + if (gameState !== "playing") return; + if (e.keyCode == 87 || e.keyCode == 38) { keys.up = false; } else if (e.keyCode == 83 || e.keyCode == 40) { @@ -176,11 +240,18 @@ function keyUpPressed(e) { } } +/* ------------- RENDER / UPDATE ------------- */ function clearGame() { + // clear and draw solid background so canvas never transparent ctx.clearRect(0, 0, canvasWidth, canvasHeight); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvasWidth, canvasHeight); } function updateGame() { + // Only update while playing (should already be true) + if (gameState !== "playing") return; + addStarField(); addShips(); @@ -238,17 +309,25 @@ function drawGame() { m.draw(); m.update(); + let hit = false; 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); + missilesArray.splice(i, 1); + + i--; + hit = true; + break; } } + if (hit) continue; + if (m.x > canvasWidth) { missilesArray.splice(i, 1); i--; diff --git a/Style.css b/Style.css index 1d120fe..37983ef 100644 --- a/Style.css +++ b/Style.css @@ -53,7 +53,7 @@ body { .title { font-size: 90px; - margin-bottom: 40px; + margin-bottom: 20px; color: #ffffff; letter-spacing: 4px; font-weight: 900;