diff --git a/Main.html b/Main.html index 08dcb68..97a86a4 100644 --- a/Main.html +++ b/Main.html @@ -14,7 +14,7 @@
-

SPACE ODDYSEY

+

GALAXY STRIKER

diff --git a/Script.js b/Script.js index aa4534f..708d1e2 100644 --- a/Script.js +++ b/Script.js @@ -2,293 +2,405 @@ var canvasWidth = 1280; var canvasHeight = 650; -var c = undefined; -var ctx = undefined; - -let gameStarted = false; -let musicMuted = false; +var c = undefined +var ctx = undefined var game = { - level: 1, - speed: 1, - gameOver: false, - frames: 0, - timer: 0, -}; - + level: 1, + speed: 1, + gameOver: false, + frames: 0, + timer: 0, +} var keys = { - up: false, - down: false, - left: false, - right: false, - fire: false, -}; + up: false, + down: false, + left: false, + right: false, + fire: false +} + + + + + + + +// Untuk background 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/bg_0.png'; var bg1 = new Image(); -bg1.src = "img/bg_0.png"; +bg1.src = "img/bg_1.png"; var bg2 = new Image(); -bg2.src = "img/bg_0.png"; +bg2.src = "img/bg_2.png"; + + + + + +var enemyImgArray = []; +enemyImgArray.length = 7; var enemy1 = new Image(); -enemy1.src = "img/alien_0.png"; +enemy1.src = "img/alien_0.png" -var backgroundMusic = document.createElement("audio"); + +var missilesArray = []; + + + + +var backgroundMusic = document.createElement('audio'); backgroundMusic.src = "music/Muriel-BobbyRichards.mp3"; var laser = document.createElement("audio"); laser.src = "music/laser2.mp3"; -var missilesArray = []; + + + + + + + + + + window.onload = function () { - init(); -}; + init() +} function init() { - c = document.getElementById("canvas"); - ctx = c.getContext("2d"); + c = document.getElementById("canvas"); + ctx = c.getContext('2d'); + document.addEventListener('keydown', keyDownPressed, false); + document.addEventListener('keyup', keyUpPressed, false); + gameLoop(); - document.addEventListener("keydown", keyDownPressed); - document.addEventListener("keyup", keyUpPressed); - 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(); - }; - requestAnimationFrame(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) { - clearGame(); - updateGame(); - drawGame(); - } + if (!gameStarted) return; + + clearGame(); + updateGame(); + drawGame(); requestAnimationFrame(gameLoop); } + function keyDownPressed(e) { - if (e.keyCode == 87) keys.up = true; - if (e.keyCode == 83) keys.down = true; - if (e.keyCode == 65) keys.left = true; - if (e.keyCode == 68) keys.right = true; + if (e.keyCode == 87) { + keys.up = true; + backgroundMusic.play(); + backgroundMusic.volume = 0.8; + } else if (e.keyCode == 83) { + keys.down = true + } - if (e.keyCode == 87) { - backgroundMusic.play(); - backgroundMusic.volume = 0.8; - } + 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) - ); + 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; - } + + laser.currentTime = 0; + laser.play(); + laser.volume = 0.4; + } } + + 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; + 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); + ctx.clearRect(0, 0, canvasWidth, canvasHeight); } + + + function updateGame() { - addStarField(); - planet.update(); - enemy.update(); - player1.update(); - - missilesArray.forEach((m) => m.update()); - - game.frames++; + addStarField(); + player1.update(); + + game.frames++; } + + function drawGame() { - planet.draw(); - enemy.draw(); - player1.draw(); + player1.draw(); - missilesArray.forEach((m) => m.draw()); + enemy.draw(); - drawNewText("Score: " + player1.score, 30, 610, "white"); - drawNewText("Player Lives: " + player1.lives, 1100, 610, "white"); + 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'); } -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; - } +function gameLoop(timestamp){ + clearGame(); + updateGame(); + drawGame(); + window.requestAnimationFrame(gameLoop); +} - draw() { - ctx.drawImage(this.image, this.x, this.y, this.width, this.height); - } +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 && this.y > 0) this.y -= this.speed; - if (keys.down && this.y < canvasHeight - this.height) this.y += this.speed; + update(){ + if (keys.up) { + if(this.y > 0){ + 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; - } + 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); +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.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); - } - update() { - this.x -= this.speed; - if (this.x < -2000) this.x = 2000; - } + + + + +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 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 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(); + background3.draw(); + background3.update(); + background3a.draw(); + background3a.update(); + + background2.draw(); + background2.update(); + background2a.draw(); + background2a.update(); + + background1.draw(); + background1.update(); + background1a.draw(); + background1a.update(); +} - background2.draw(); - background2.update(); - background2a.draw(); - background2a.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 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; - } -} + + + + + + + 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.drawImage(this.image, this.x, this.y, this.width, this.height); - } - - update() { - this.x -= this.speed; - } -} - -let enemy = new EnemyObj(800, 200, 12); - -class PlanetObj { - constructor(img, x, y, width, height, speed) { - this.img = img; - this.x = x; - this.y = y; - this.width = width; - this.height = height; - this.speed = speed; - this.visible = true; - } - - draw() { - if (this.visible) { - ctx.drawImage(this.img, this.x, this.y, this.width, this.height); + 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() { - if (!this.visible) return; - this.x -= this.speed; - - if (this.x < -this.width) this.visible = false; - } + update() { + this.x -= this.speed; + } } -let planet = new PlanetObj(bg0, 1400, 150, 400, 400, 1); +let enemy = new EnemyObj(800, 200, 12); \ No newline at end of file diff --git a/Style.css b/Style.css index a87f304..1d120fe 100644 --- a/Style.css +++ b/Style.css @@ -103,7 +103,7 @@ body { 0 4px 0 #00bcd4, 0 0 12px rgba(0, 234, 255, 0.4), inset 0 0 15px rgba(0, 234, 255, 0.2); - transition: 0.3s ease-in-out; + transition: 0.3ease-in-out; } .menuButton:hover { diff --git a/img/Player/ships.png b/img/Player/ships.png new file mode 100644 index 0000000..d231204 Binary files /dev/null and b/img/Player/ships.png differ