Reso change

Script.js

@@ -19,14 +19,18 @@ function pickRandomBGM() {
   gameOverBGM.src = bgm.gameover;
 }
 
+// --- OPTIMASI 1: Resolusi Tetap (HD 720p) ---
 var canvasWidth = 1280;
-var canvasHeight = 650;
+var canvasHeight = 720;
 var c, ctx;
 var gameStarted = false;
 var musicMuted = false;
 
+// --- OPTIMASI 2: Cache Vignette ---
+let vignetteCanvas = null;
+
 let lastFrameTime = 0;
-const frameInterval = 1000 / 80;
+const frameInterval = 1000 / 60;
 
 let cameraY = 0;
 
@@ -116,12 +120,11 @@ window.onload = function () {
 
 function init() {
   c = document.getElementById("canvas");
-  ctx = c.getContext("2d");
 
-  c.width = window.innerWidth;
+  ctx = c.getContext("2d", { alpha: false });
-  c.height = window.innerHeight;
+
-  canvasWidth = c.width;
+  c.width = canvasWidth;
-  canvasHeight = c.height;
+  c.height = canvasHeight;
 
   document.addEventListener("keydown", keyDownPressed, false);
   document.addEventListener("keyup", keyUpPressed, false);
@@ -212,7 +215,6 @@ function clearGame() {
 function updateGame() {
   game.frames++;
 
-
   game.level = 1 + Math.floor(player1.score / 500);
   game.speed = 1 + game.level * 0.1;
 
@@ -304,8 +306,9 @@ function drawGame() {
       continue;
     }
 
-    let shootChance = 0.02 + game.level * 0.003;
+    // BALANCING TEMBAKAN (Low Rate)
-    if (shootChance > 0.1) shootChance = 0.1;
+    let shootChance = 0.005 + game.level * 0.0012;
+    if (shootChance > 0.04) shootChance = 0.04;
 
     if (!player1.dead && Math.random() < shootChance && s.x > player1.x + 50) {
       const ex = s.x;
@@ -433,15 +436,20 @@ function drawDebugHitbox(rect, color) {
 }
 
 function drawUI() {
-  drawNewText(" " + player1.score, 1400, 760, "white");
+  drawNewText(
-  drawNewText("LVL " + game.level, 1400, 50, "#00ff00");
+    "Score: " + player1.score,
+    canvasWidth - 200,
+    canvasHeight - 50,
+    "white"
+  );
+  drawNewText("LVL " + game.level, canvasWidth - 150, 50, "#00ff00");
 
   let livesText = "Lives:  ";
   for (let i = 0; i < player1.lives; i++) {
     livesText += "♥ ";
   }
-  drawNewText(livesText, 60, 760, "#ff3366");
+  drawNewText(livesText, 30, canvasHeight - 50, "#ff3366");
-  drawNewText("Bombs: " + abilityCharges, 50, 40, "#ffffffff");
+  drawNewText("Bombs: " + abilityCharges, 30, 50, "#ffffff");
 }
 
 class PlayerObject {
@@ -468,7 +476,9 @@ class PlayerObject {
     this.frameIndex = 2;
     this.spriteWidth = 0;
     this.sourceHeight = 0;
-    this.scale = 1.3;
+    // --- SIZE PLAYER: Middle Ground ---
+    // Awal: 1.3 | Kecil: 0.85 | Sekarang: 1.0
+    this.scale = 1.0;
 
     this.image.onload = () => {
       this.spriteWidth = this.image.width / this.totalFrames;
@@ -661,7 +671,8 @@ class LaserBullet {
   constructor(x, y) {
     this.x = x;
     this.y = y;
-    this.width = 14;
+    // Ukuran Bullet sedikit dibesarkan
+    this.width = 13;
     this.height = 4;
     this.speed = 16;
   }
@@ -696,8 +707,10 @@ class EnemyObj {
   constructor(x, y, speed, img, pattern = "straight") {
     this.x = x;
     this.y = y;
-    this.width = 170;
+    // --- SIZE MUSUH: Middle Ground ---
-    this.height = 105;
+    // Awal: 170 | Kecil: 120 | Sekarang: 145
+    this.width = 145;
+    this.height = 90;
     this.image = img;
     this.speed = speed;
     this.health = 100;
@@ -733,6 +746,7 @@ class EnemyBullet {
   constructor(x, y, targetX, targetY) {
     this.x = x;
     this.y = y;
+    // Ukuran Bullet sedikit dibesarkan
     this.width = 10;
     this.height = 4;
 
@@ -890,7 +904,9 @@ function spawnEnemyFromWave(wave) {
     wave.pattern === "sine" ? "sine" : "straight"
   );
 
-  enemy.health = 100 + game.level * 25;
+  // BALANCING HEALTH (Low)
+  enemy.health = 60 + game.level * 10;
+
   enemyShipArray.push(enemy);
 }
 
@@ -1092,18 +1108,27 @@ function drawPauseOverlay() {
 }
 
 function drawScreenShading() {
-  let grd = ctx.createRadialGradient(
+  if (!vignetteCanvas) {
-    canvasWidth / 2,
+    vignetteCanvas = document.createElement("canvas");
-    canvasHeight / 2,
+    vignetteCanvas.width = canvasWidth;
-    200,
+    vignetteCanvas.height = canvasHeight;
-    canvasWidth / 2,
+    const vCtx = vignetteCanvas.getContext("2d");
-    canvasHeight / 2,
+
-    canvasWidth
+    let grd = vCtx.createRadialGradient(
-  );
+      canvasWidth / 2,
-  grd.addColorStop(0, "rgba(0,0,0,0)");
+      canvasHeight / 2,
-  grd.addColorStop(1, "rgba(0,0,0,0.6)");
+      200,
-  ctx.fillStyle = grd;
+      canvasWidth / 2,
-  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+      canvasHeight / 2,
+      canvasWidth
+    );
+    grd.addColorStop(0, "rgba(0,0,0,0)");
+    grd.addColorStop(1, "rgba(0,0,0,0.6)");
+    vCtx.fillStyle = grd;
+    vCtx.fillRect(0, 0, canvasWidth, canvasHeight);
+  }
+
+  ctx.drawImage(vignetteCanvas, 0, 0);
 
   if (damageFlash > 0) {
     let alpha = (damageFlash / 20) * 0.6;