diff --git a/Script.js b/Script.js index eb3579c..3bff911 100644 --- a/Script.js +++ b/Script.js @@ -2,38 +2,30 @@ var canvasWidth = 1280; var canvasHeight = 650; -var c = undefined -var ctx = undefined +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/ships2.png' +playerShipImg.src = "img/ships2.png"; var bg0 = new Image(); -bg0.src = 'img/bg_0.png'; +bg0.src = "img/bg_0.png"; var bg1 = new Image(); bg1.src = "img/bg_1.png"; @@ -41,94 +33,64 @@ bg1.src = "img/bg_1.png"; var bg2 = new Image(); 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 missilesArray = []; - - - -var backgroundMusic = document.createElement('audio'); +var backgroundMusic = document.createElement("audio"); backgroundMusic.src = "music/Muriel-BobbyRichards.mp3"; var laser = document.createElement("audio"); laser.src = "music/laser2.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() -} + init(); +}; function init() { - c = document.getElementById("canvas"); - ctx = c.getContext('2d'); - document.addEventListener('keydown', keyDownPressed, false); - document.addEventListener('keyup', keyUpPressed, false); + 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(); + }; + 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("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(); - }; - + document.getElementById("exitBtn").onclick = () => { + window.close(); + }; } - - function gameLoop() { if (!gameStarted) return; @@ -138,269 +100,269 @@ function gameLoop() { 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 == 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 == 65) { + keys.left = true; + } - if (e.keyCode == 32) { - keys.fire = true; - missilesArray.push(new Missile(player1.x + 120, player1.y + 50, 'white', 12)); + 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; - } + 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 == 87) { + keys.up = false; + } else if (e.keyCode == 83) { + keys.down = false; + } - if (e.keyCode == 65) { - keys.left = false; - } + if (e.keyCode == 65) { + keys.left = false; + } - if (e.keyCode == 68) { - keys.right = false; - } + if (e.keyCode == 68) { + keys.right = false; + } - if (e.keyCode == 32) { - keys.fire = 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(); - player1.update(); - - game.frames++; + addStarField(); + player1.update(); + spawnPlanet(); + if (currentPlanet) currentPlanet.update(); + game.frames++; } - - function drawGame() { + if (currentPlanet) currentPlanet.draw(); // planet sekarang di background - player1.draw(); + player1.draw(); + enemy.draw(); + enemy.update(); - enemy.draw(); + for (var i = 0; i < missilesArray.length; i++) { + var m = missilesArray[i]; + m.draw(); + m.update(); + } - 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'); + drawNewText("Score: " + player1.score, 30, 610, "white"); + drawNewText("Player Lives: " + player1.lives, 1100, 610, "white"); } -function gameLoop(timestamp){ - clearGame(); - updateGame(); - drawGame(); - window.requestAnimationFrame(gameLoop); + +function gameLoop(timestamp) { + clearGame(); + updateGame(); + drawGame(); + window.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(); +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) { + if (this.y > 0) { + this.y -= this.speed; + } + } else if (keys.down) { + if (this.x < canvasWidth - this.width) { + this.y += this.speed; + } } - 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; - } - } + 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.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; - - - - -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; + if (this.x < -2000) { + this.x = 2000; } - 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 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); - +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(); -} + 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; - } + background2.draw(); + background2.update(); + background2a.draw(); + background2a.update(); - 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 - } + background1.draw(); + background1.update(); + background1a.draw(); + background1a.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 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; + } + draw() { + ctx.save(); + ctx.drawImage(this.image, this.x, this.y, this.width, this.height); + ctx.restore(); + } - update() { - this.x -= this.speed; - } + update() { + this.x -= this.speed; + } } -let enemy = new EnemyObj(800, 200, 12); \ No newline at end of file +let enemy = new EnemyObj(800, 200, 12); + +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); + } +} diff --git a/img/SpritesPlanet/BlueGiant.png b/img/SpritesPlanet/planet_1.png similarity index 100% rename from img/SpritesPlanet/BlueGiant.png rename to img/SpritesPlanet/planet_1.png diff --git a/img/SpritesPlanet/planet_2.png b/img/SpritesPlanet/planet_2.png new file mode 100644 index 0000000..4178d85 Binary files /dev/null and b/img/SpritesPlanet/planet_2.png differ diff --git a/img/SpritesPlanet/planet_3.png b/img/SpritesPlanet/planet_3.png new file mode 100644 index 0000000..119cb83 Binary files /dev/null and b/img/SpritesPlanet/planet_3.png differ diff --git a/img/SpritesPlanet/planet_4.png b/img/SpritesPlanet/planet_4.png new file mode 100644 index 0000000..e64f3f6 Binary files /dev/null and b/img/SpritesPlanet/planet_4.png differ