diff --git a/Script.js b/Script.js index e9d4c30..0578949 100644 --- a/Script.js +++ b/Script.js @@ -2,38 +2,36 @@ var canvasWidth = 1280; var canvasHeight = 650; -var c = undefined -var ctx = undefined +var c = undefined; +var ctx = undefined; + +// STATE GAME +let gameStarted = false; +let musicMuted = false; var game = { - level: 1, - speed: 1, - gameOver: false, - frames: 0, - timer: 0, -} + level: 1, + speed: 1, + gameOver: false, + frames: 0, + timer: 0, +}; +// INPUT var keys = { - up: false, - down: false, - left: false, - right: false, - fire: false -} + up: false, + down: false, + left: false, + right: false, + fire: false, +}; - - - - - - - -// Untuk background +// IMAGE ASSET var playerShipImg = new Image(); -playerShipImg.src = 'img/fighterShip.png' +playerShipImg.src = "img/fighterShip.png"; var bg0 = new Image(); -bg0.src = 'img/SpritesPlanet/BlueGiant.png'; +bg0.src = "img/SpritesPlanet/BlueGiant.png"; var bg1 = new Image(); bg1.src = "img/bg_0.png"; @@ -41,367 +39,252 @@ bg1.src = "img/bg_0.png"; var bg2 = new Image(); bg2.src = "img/bg_0.png"; - - - - -var enemyImgArray = []; -enemyImgArray.length = 7; - var enemy1 = new Image(); -enemy1.src = "img/alien_0.png" +enemy1.src = "img/alien_0.png"; - -var missilesArray = []; - - - - -var backgroundMusic = document.createElement('audio'); +// AUDIO +var backgroundMusic = document.createElement("audio"); backgroundMusic.src = "music/Muriel-BobbyRichards.mp3"; var laser = document.createElement("audio"); laser.src = "music/laser2.mp3"; +// MISILES & ENEMY +var missilesArray = []; - - - - - - - - - - +// INIT GAME window.onload = function () { - init() -} + init(); +}; function init() { - c = document.getElementById("canvas"); - ctx = c.getContext('2d'); - document.addEventListener('keydown', keyDownPressed, false); - document.addEventListener('keyup', keyUpPressed, false); - gameLoop(); + c = document.getElementById("canvas"); + ctx = c.getContext("2d"); + // INPUT HANDLER + document.addEventListener("keydown", keyDownPressed); + document.addEventListener("keyup", keyUpPressed); + // --- START MENU BUTTONS --- + document.getElementById("startBtn").onclick = () => { + document.getElementById("startMenu").style.display = "none"; + gameStarted = true; + }; + 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 sedang dalam pengembangan."); + }; + document.getElementById("exitBtn").onclick = () => { + window.close(); + }; - - - - - - - - - - - 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(); - planet.update(); - - player1.update(); - - game.frames++; -} - - - -function drawGame() { - - planet.draw(); - - 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(); +// MAIN GAME LOOP +function gameLoop() { + if (gameStarted) { + clearGame(); updateGame(); drawGame(); - window.requestAnimationFrame(gameLoop); + } + 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(); - } +// INPUT HANDLER +function keyDownPressed(e) { + if (e.keyCode == 87) keys.up = true; // W + if (e.keyCode == 83) keys.down = true; // S + if (e.keyCode == 65) keys.left = true; // A + if (e.keyCode == 68) keys.right = true; // D - update(){ - if (keys.up) { - if(this.y > 0){ - this.y -= this.speed; - } - } + if (e.keyCode == 87) { + backgroundMusic.play(); + backgroundMusic.volume = 0.8; + } - else if (keys.down) { - if (this.x < canvasWidth - this.width) { - this.y += this.speed; - } - } + if (e.keyCode == 32) { + // SPACE + keys.fire = true; + missilesArray.push( + new Missile(player1.x + 120, player1.y + 50, "white", 12) + ); - if (keys.right) { - if (this.x < canvasWidth - this.width) { - this.x += this.speed; - } - } + laser.currentTime = 0; + laser.play(); + laser.volume = 0.4; + } +} - if (keys.left) { - if (this.x > 10) { - this.x -= this.speed; - } - } - } +function keyUpPressed(e) { + if (e.keyCode == 87) keys.up = false; + 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; +} + +// CLEAR CANVAS +function clearGame() { + ctx.clearRect(0, 0, canvasWidth, canvasHeight); +} + +// UPDATE GAME OBJECTS +function updateGame() { + addStarField(); + + planet.update(); + enemy.update(); + player1.update(); + + missilesArray.forEach((m) => m.update()); + + game.frames++; +} + +// DRAW SPRITES +function drawGame() { + planet.draw(); + + enemy.draw(); + player1.draw(); + + missilesArray.forEach((m) => m.draw()); + + drawNewText("Score: " + player1.score, 30, 610, "white"); + drawNewText("Player Lives: " + player1.lives, 1100, 610, "white"); +} + +// PLAYER +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.drawImage(this.image, this.x, this.y, this.width, this.height); + } + + update() { + if (keys.up && this.y > 0) this.y -= this.speed; + if (keys.down && this.y < canvasHeight - this.height) this.y += this.speed; + + if (keys.right && this.x < canvasWidth - this.width) this.x += this.speed; + if (keys.left && 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); +// TEXT +function drawNewText(txt, x, y, color) { + ctx.font = "20px Arial"; + ctx.fillStyle = color; + ctx.fillText(txt, x, y); } +// BACKGROUND +class backgroundObj { + constructor(img, x, y, speed) { + this.img = img; + this.x = x; + this.y = y; + this.width = 2000; + this.height = 1200; + this.speed = speed; + } + draw() { + ctx.drawImage(this.img, this.x, this.y, this.width, this.height); + } - - - - -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; - } - - } - + update() { + this.x -= this.speed; + if (this.x < -2000) this.x = 2000; + } } +let background2 = new backgroundObj(bg1, 0, 0, game.speed * 2); +let background2a = new backgroundObj(bg1, 2000, 0, game.speed * 2); -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); - +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(); -} + background3.draw(); + background3.update(); + background3a.draw(); + background3a.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 - } + background2.draw(); + background2.update(); + background2a.draw(); + background2a.update(); } +// MISSILE +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.fillStyle = this.color; + ctx.fillRect(this.x, this.y, this.width, this.height); + } + update() { + this.x += this.speed; + } +} - - - - - - - +// ENEMY 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(); - } + 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; + } - update() { - this.x -= this.speed; - } + draw() { + ctx.drawImage(this.image, this.x, this.y, this.width, this.height); + } + + update() { + this.x -= this.speed; + } } let enemy = new EnemyObj(800, 200, 12); - - - +// PLANET class PlanetObj { constructor(img, x, y, width, height, speed) { this.img = img; @@ -421,12 +304,9 @@ class PlanetObj { update() { if (!this.visible) return; - this.x -= this.speed; - if (this.x < -this.width) { - this.visible = false; - } + if (this.x < -this.width) this.visible = false; } } diff --git a/Style.css b/Style.css index cd860d0..47884b9 100644 --- a/Style.css +++ b/Style.css @@ -40,35 +40,67 @@ body { height: 650px; top: 0; left: 0; - background: rgba(0,0,0,0.85); + + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(6px); + display: flex; flex-direction: column; justify-content: center; align-items: center; + z-index: 10; - font-family: Arial, sans-serif; + + font-family: 'Poppins', Arial, sans-serif; + + animation: fadeIn 1s ease-out; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } } .title { - font-size: 60px; - margin-bottom: 50px; - color: white; - letter-spacing: 3px; + font-size: 70px; + margin-bottom: 40px; + color: #ffffff; + letter-spacing: 4px; + + text-shadow: + 0 0 10px #00eaff, + 0 0 20px #00eaff, + 0 0 30px rgba(0, 234, 255, 0.7); + + animation: glow 3s infinite alternate ease-in-out; +} + +@keyframes glow { + from { text-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; } + to { text-shadow: 0 0 20px #00eaff, 0 0 40px #00eaff; } } .menuButton { - font-size: 30px; - padding: 10px 40px; + font-size: 28px; + padding: 12px 50px; margin: 10px; cursor: pointer; - background: #222; - border: 2px solid white; + + background: rgba(20, 20, 20, 0.8); color: white; - border-radius: 10px; - transition: 0.2s; + + border: 2px solid #00eaff; + border-radius: 12px; + + box-shadow: 0 0 10px rgba(0, 234, 255, 0.4); + + transition: 0.3s ease-in-out; } + .menuButton:hover { - background: white; - color: black; -} + background: #00eaff; + color: #000; + box-shadow: 0 0 20px #00eaff; + transform: scale(1.05) +} \ No newline at end of file diff --git a/img/SBS - 2D Planet Pack 2 - Shaded 512x512.rar b/img/SBS - 2D Planet Pack 2 - Shaded 512x512.rar deleted file mode 100644 index fab2b56..0000000 Binary files a/img/SBS - 2D Planet Pack 2 - Shaded 512x512.rar and /dev/null differ