From ad49a7d15deb1c7d40c1b0e8da7d87847ebee30b Mon Sep 17 00:00:00 2001 From: Bluwww Date: Mon, 15 Dec 2025 19:24:22 +0700 Subject: [PATCH] Reso change --- Script.js | 87 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 56 insertions(+), 31 deletions(-) diff --git a/Script.js b/Script.js index ea37334..29499c1 100644 --- a/Script.js +++ b/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; - c.height = window.innerHeight; - canvasWidth = c.width; - canvasHeight = c.height; + ctx = c.getContext("2d", { alpha: false }); + + c.width = canvasWidth; + 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; - if (shootChance > 0.1) shootChance = 0.1; + // BALANCING TEMBAKAN (Low Rate) + 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("LVL " + game.level, 1400, 50, "#00ff00"); + drawNewText( + "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("Bombs: " + abilityCharges, 50, 40, "#ffffffff"); + drawNewText(livesText, 30, canvasHeight - 50, "#ff3366"); + 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; - this.height = 105; + // --- SIZE MUSUH: Middle Ground --- + // 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( - canvasWidth / 2, - canvasHeight / 2, - 200, - canvasWidth / 2, - canvasHeight / 2, - canvasWidth - ); - grd.addColorStop(0, "rgba(0,0,0,0)"); - grd.addColorStop(1, "rgba(0,0,0,0.6)"); - ctx.fillStyle = grd; - ctx.fillRect(0, 0, canvasWidth, canvasHeight); + if (!vignetteCanvas) { + vignetteCanvas = document.createElement("canvas"); + vignetteCanvas.width = canvasWidth; + vignetteCanvas.height = canvasHeight; + const vCtx = vignetteCanvas.getContext("2d"); + + let grd = vCtx.createRadialGradient( + canvasWidth / 2, + canvasHeight / 2, + 200, + canvasWidth / 2, + 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;