This commit is contained in:
Hijau-dev 2025-12-01 11:11:53 +07:00
parent 6232e81ab3
commit c6d7ffc56f

View File

@ -5,7 +5,6 @@ var canvasHeight = 650;
var c = undefined; var c = undefined;
var ctx = undefined; var ctx = undefined;
// STATE GAME
let gameStarted = false; let gameStarted = false;
let musicMuted = false; let musicMuted = false;
@ -17,7 +16,7 @@ var game = {
timer: 0, timer: 0,
}; };
// INPUT
var keys = { var keys = {
up: false, up: false,
down: false, down: false,
@ -26,7 +25,6 @@ var keys = {
fire: false, fire: false,
}; };
// IMAGE ASSET
var playerShipImg = new Image(); var playerShipImg = new Image();
playerShipImg.src = "img/fighterShip.png"; playerShipImg.src = "img/fighterShip.png";
@ -42,17 +40,14 @@ bg2.src = "img/bg_0.png";
var enemy1 = new Image(); var enemy1 = new Image();
enemy1.src = "img/alien_0.png"; enemy1.src = "img/alien_0.png";
// AUDIO
var backgroundMusic = document.createElement("audio"); var backgroundMusic = document.createElement("audio");
backgroundMusic.src = "music/Muriel-BobbyRichards.mp3"; backgroundMusic.src = "music/Muriel-BobbyRichards.mp3";
var laser = document.createElement("audio"); var laser = document.createElement("audio");
laser.src = "music/laser2.mp3"; laser.src = "music/laser2.mp3";
// MISILES & ENEMY
var missilesArray = []; var missilesArray = [];
// INIT GAME
window.onload = function () { window.onload = function () {
init(); init();
}; };
@ -61,11 +56,9 @@ function init() {
c = document.getElementById("canvas"); c = document.getElementById("canvas");
ctx = c.getContext("2d"); ctx = c.getContext("2d");
// INPUT HANDLER
document.addEventListener("keydown", keyDownPressed); document.addEventListener("keydown", keyDownPressed);
document.addEventListener("keyup", keyUpPressed); document.addEventListener("keyup", keyUpPressed);
// --- START MENU BUTTONS ---
document.getElementById("startBtn").onclick = () => { document.getElementById("startBtn").onclick = () => {
document.getElementById("startMenu").style.display = "none"; document.getElementById("startMenu").style.display = "none";
gameStarted = true; gameStarted = true;
@ -90,7 +83,6 @@ function init() {
requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop);
} }
// MAIN GAME LOOP
function gameLoop() { function gameLoop() {
if (gameStarted) { if (gameStarted) {
clearGame(); clearGame();
@ -100,12 +92,11 @@ function gameLoop() {
requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop);
} }
// INPUT HANDLER
function keyDownPressed(e) { function keyDownPressed(e) {
if (e.keyCode == 87) keys.up = true; // W if (e.keyCode == 87) keys.up = true;
if (e.keyCode == 83) keys.down = true; // S if (e.keyCode == 83) keys.down = true;
if (e.keyCode == 65) keys.left = true; // A if (e.keyCode == 65) keys.left = true;
if (e.keyCode == 68) keys.right = true; // D if (e.keyCode == 68) keys.right = true;
if (e.keyCode == 87) { if (e.keyCode == 87) {
backgroundMusic.play(); backgroundMusic.play();
@ -113,7 +104,6 @@ function keyDownPressed(e) {
} }
if (e.keyCode == 32) { if (e.keyCode == 32) {
// SPACE
keys.fire = true; keys.fire = true;
missilesArray.push( missilesArray.push(
new Missile(player1.x + 120, player1.y + 50, "white", 12) new Missile(player1.x + 120, player1.y + 50, "white", 12)
@ -133,12 +123,10 @@ function keyUpPressed(e) {
if (e.keyCode == 32) keys.fire = false; if (e.keyCode == 32) keys.fire = false;
} }
// CLEAR CANVAS
function clearGame() { function clearGame() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.clearRect(0, 0, canvasWidth, canvasHeight);
} }
// UPDATE GAME OBJECTS
function updateGame() { function updateGame() {
addStarField(); addStarField();
@ -151,7 +139,6 @@ function updateGame() {
game.frames++; game.frames++;
} }
// DRAW SPRITES
function drawGame() { function drawGame() {
planet.draw(); planet.draw();
@ -164,7 +151,6 @@ function drawGame() {
drawNewText("Player Lives: " + player1.lives, 1100, 610, "white"); drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
} }
// PLAYER
class PlayerObject { class PlayerObject {
constructor(x, y) { constructor(x, y) {
this.x = x; this.x = x;
@ -193,14 +179,12 @@ class PlayerObject {
let player1 = new PlayerObject(100, 100); let player1 = new PlayerObject(100, 100);
// TEXT
function drawNewText(txt, x, y, color) { function drawNewText(txt, x, y, color) {
ctx.font = "20px Arial"; ctx.font = "20px Arial";
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.fillText(txt, x, y); ctx.fillText(txt, x, y);
} }
// BACKGROUND
class backgroundObj { class backgroundObj {
constructor(img, x, y, speed) { constructor(img, x, y, speed) {
this.img = img; this.img = img;
@ -239,7 +223,6 @@ function addStarField() {
background2a.update(); background2a.update();
} }
// MISSILE
class Missile { class Missile {
constructor(x, y, color, speed) { constructor(x, y, color, speed) {
this.x = x; this.x = x;
@ -260,7 +243,6 @@ class Missile {
} }
} }
// ENEMY
class EnemyObj { class EnemyObj {
constructor(x, y, speed) { constructor(x, y, speed) {
this.x = x; this.x = x;
@ -284,7 +266,6 @@ class EnemyObj {
let enemy = new EnemyObj(800, 200, 12); let enemy = new EnemyObj(800, 200, 12);
// PLANET
class PlanetObj { class PlanetObj {
constructor(img, x, y, width, height, speed) { constructor(img, x, y, width, height, speed) {
this.img = img; this.img = img;