performance tuning

Author: Your Correct Name

js/DebugWindow.js

@@ -0,0 +1,30 @@
+class DebugWindow {
+    constructor() {
+        this.visible = false;
+        this.accumulatedTime = 0;
+        this.frameCount = 0;
+        this.fps = 0;
+        // Pre-set font string to reduce repeated construction
+        this.fontStyle = '14px monospace';
+    }
+    
+    update(delta) {
+        this.accumulatedTime += delta;
+        this.frameCount++;
+        if (this.accumulatedTime >= 1) {
+            this.fps = this.frameCount;
+            this.frameCount = 0;
+            this.accumulatedTime = 0;
+        }
+    }
+    
+    draw(ctx) {
+        ctx.save();
+        ctx.font = this.fontStyle;
+        ctx.fillStyle = 'yellow';
+        ctx.fillText(`FPS: ${this.fps}`, 10, 20);
+        ctx.restore();
+    }
+}
+
+export default DebugWindow;

js/game.js

@@ -6,6 +6,7 @@ import PatternFormation from './PatternFormation.js';  // Add this import
 import IntroScreen from './screens/IntroScreen.js';
 import MusicPlayer from './audio/MusicPlayer.js';
 import StartupScreen from './screens/StartupScreen.js';
+import DebugWindow from './DebugWindow.js';
 
 class Game {
     constructor() {
@@ -75,6 +76,9 @@ class Game {
 
         // Initialize music player without starting it
         this.musicPlayer = new MusicPlayer();
+        // Create persistent offscreen canvas for player tinting effects
+        this.offCanvasCache = document.createElement('canvas');
+        this.debugWindow = new DebugWindow();
     }
 
     initGameScreen() {
@@ -146,7 +150,13 @@ class Game {
     }
 
     bindEvents() {
-        window.addEventListener('resize', () => this.setupCanvas());
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                this.setupCanvas();
+            }, 100);
+        });
     }
 
     reset() {
@@ -157,6 +167,10 @@ class Game {
     }
 
     handleInput(e) {
+        // Toggle debug window when d is pressed
+        if(e.key === 'd' || e.key === 'D'){
+            this.debugWindow.visible = !this.debugWindow.visible;
+        }
         // Add null check for current screen
         if (this.screens[this.currentScreen] && this.screens[this.currentScreen].handleInput) {
             const nextScreen = this.screens[this.currentScreen].handleInput(e.key);
@@ -193,105 +207,98 @@ class Game {
     update(timestamp) {
         const delta = (timestamp - (this.lastTime || timestamp)) / 1000;
         this.lastTime = timestamp;
-
-        // Check if startup screen is complete
-        if (this.currentScreen === 'startup') {
-            this.screens.startup.update(delta);
-            if (this.screens.startup.complete) {
-                this.switchScreen('intro');
-            }
-        } else if (this.currentScreen === 'intro') {
-            this.screens.intro.update(delta);
-        } else if (this.currentScreen === 'game') {
+        
+        if (this.currentScreen === 'game') {
+            // Cache properties to avoid repeated lookups
+            const player = this.player;
+            const formation = this.formation;
+            
             this.bgScroller.update(delta);
-            this.player.update(delta);
-            // Update emitter positions relative to the player's sprite.
-            const engine1X = this.player.x + this.player.width / 2;
-            const engine1Y = this.player.y + this.player.height - 25; // was 50
-            // For engine 2 and 3, adjust: 10px down and 8px inward.
-            const engine2X = engine1X - 25 + 4;  // was 50+8
-            const engine2Y = engine1Y - 25 + 5;  // was 50+10
-            const engine3X = engine1X + 25 - 4;  // was 50-8
-            const engine3Y = engine1Y - 25 + 5;  // was 50+10
+            player.update(delta);
+            
+            // Update emitter positions with local variables
+            const engine1X = player.x + player.width / 2;
+            const engine1Y = player.y + player.height - 25;
+            const engine2X = engine1X - 21;   // simplified math
+            const engine2Y = engine1Y - 20;
+            const engine3X = engine1X + 21;
+            const engine3Y = engine1Y - 20;
+            
             this.particleEngine.setEmitter(engine1X, engine1Y);
             this.particleEngine2.setEmitter(engine2X, engine2Y);
             this.particleEngine3.setEmitter(engine3X, engine3Y);
-            // Update particle engines with the new emitter positions.
             this.particleEngine.update(delta);
             this.particleEngine2.update(delta);
             this.particleEngine3.update(delta);
 
-            // Update laser firing state
-            this.laserEngineLeft.setFiring(this.player.isFiring);
-            this.laserEngineRight.setFiring(this.player.isFiring);
-            
-            // Update laser emitter positions (from top of sprite, spread apart)
-            const laserLeftX = this.player.x + this.player.width * 0.3; // 30% from left
-            const laserRightX = this.player.x + this.player.width * 0.7; // 70% from left
-            const laserY = this.player.y; // Top of sprite
-            
+            // Update lasers using cached firing state
+            const firing = player.isFiring;
+            this.laserEngineLeft.setFiring(firing);
+            this.laserEngineRight.setFiring(firing);
+            const laserLeftX = player.x + player.width * 0.3;
+            const laserRightX = player.x + player.width * 0.7;
+            const laserY = player.y;
             this.laserEngineLeft.setEmitter(laserLeftX, laserY);
             this.laserEngineRight.setEmitter(laserRightX, laserY);
 
             this.laserEngineLeft.update(delta);
             this.laserEngineRight.update(delta);
 
-            this.formation.update(delta);
-
-            // Check player collision with alien lasers with pixel-perfect detection
-            const alienLasers = this.formation.lasers;
-            for (const laser of alienLasers) {
-                // Only check collision if laser is within player bounds
-                if (laser.x >= this.player.x && 
-                    laser.x <= this.player.x + this.player.width &&
-                    laser.y >= this.player.y && 
-                    laser.y <= this.player.y + this.player.height) {
-                    
-                    // Do pixel-perfect collision test
-                    if (this.player.checkPixelCollision(laser.x, laser.y)) {
+            formation.update(delta);
+            
+            // Collision detection using cached player bounds
+            const px = player.x, py = player.y, pw = player.width, ph = player.height;
+            for (const laser of formation.lasers) {
+                if (laser.x >= px && laser.x <= px + pw &&
+                    laser.y >= py && laser.y <= py + ph) {
+                    if (player.checkPixelCollision(laser.x, laser.y)) {
                         this.handlePlayerHit();
-                        laser.life = 0; // Destroy laser
-                        break; // Exit loop after hit
+                        laser.life = 0;
+                        break;
                     }
                 }
             }
-
-            // Check laser collisions with aliens
-            if (this.laserEngineLeft) {
-                this.laserEngineLeft.particles.forEach(laser => {
-                    if (this.formation.checkCollision(laser.x, laser.y)) {
-                        laser.life = 0; // Destroy laser on hit
-                    }
-                });
-            }
-            if (this.laserEngineRight) {
-                this.laserEngineRight.particles.forEach(laser => {
-                    if (this.formation.checkCollision(laser.x, laser.y)) {
-                        laser.life = 0; // Destroy laser on hit
+            
+            // Check collisions for player lasers
+            [this.laserEngineLeft, this.laserEngineRight].forEach(engine => {
+                engine.particles.forEach(laser => {
+                    if (formation.checkCollision(laser.x, laser.y)) {
+                        laser.life = 0;
                     }
                 });
-            }
-
-            // Check if all aliens are destroyed
-            if (this.formation.aliens.length === 0) {
-                // Create new formation with increased difficulty
+            });
+            
+            if (formation.aliens.length === 0) {
                 this.formation = new PatternFormation(this.ctx, {
                     virtualWidth: this.virtualWidth,
                     virtualHeight: this.virtualHeight,
                     pattern: 'infinity',
                     bgScroller: this.bgScroller,
-                    difficulty: this.formation.difficulty + 1
+                    difficulty: formation.difficulty + 1
                 });
             }
-
-            // Handle invulnerability
+            
             if (this.playerInvulnerable) {
                 this.invulnerabilityTimer += delta;
                 if (this.invulnerabilityTimer >= this.invulnerabilityTime) {
                     this.playerInvulnerable = false;
                     this.invulnerabilityTimer = 0;
                 }
             }
+        } else {
+            // ...existing screen update code...
+            // Check if startup screen is complete
+            if (this.currentScreen === 'startup') {
+                this.screens.startup.update(delta);
+                if (this.screens.startup.complete) {
+                    this.switchScreen('intro');
+                }
+            } else if (this.currentScreen === 'intro') {
+                this.screens.intro.update(delta);
+            }
+        }
+        if(this.debugWindow.visible){
+            this.debugWindow.update(delta);
         }
     }
 
@@ -331,11 +338,12 @@ class Game {
                 );
 
                 // Draw player with radiosity effect applied directly on the player's image
-                // Create an offscreen canvas to tint the image
-                const offCanvas = document.createElement('canvas');
+                // Use offCanvasCache instead of creating a new canvas each frame
+                const offCanvas = this.offCanvasCache;
                 offCanvas.width = this.player.img.width;
                 offCanvas.height = this.player.img.height;
                 const offCtx = offCanvas.getContext('2d');
+                offCtx.clearRect(0, 0, offCanvas.width, offCanvas.height);
                 offCtx.drawImage(this.player.img, 0, 0);
                 offCtx.globalCompositeOperation = 'source-atop';
                 offCtx.fillStyle = `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, 0.33)`;
@@ -367,6 +375,11 @@ class Game {
             // Draw HUD if in game screen
             this.drawHUD();
         }
+        
+        // Draw debug window if enabled
+        if(this.debugWindow.visible){
+            this.debugWindow.draw(this.ctx);
+        }
     }
 
     drawHUD() {

js/imageBackgroundScroller.js

@@ -35,6 +35,15 @@ class ImageBackgroundScroller {
         // Track flip states for each position instead of toggling
         this.position1Flipped = false;
         this.position2Flipped = true; // Start second position flipped for alternating pattern
+
+        // Create a reusable temporary canvas for sampling background color.
+        this.tempCanvas = document.createElement('canvas');
+        this.tempCanvas.width = 20;
+        this.tempCanvas.height = 20;
+        // Cache the 2D context once
+        this.tempCtx = this.tempCanvas.getContext('2d');
+
+        this.lastColorSample = { x: null, y: null, color: null, time: 0 };
     }
 
     update(delta) {
@@ -103,40 +112,42 @@ class ImageBackgroundScroller {
     }
 
     getColorAt(x, y) {
-        // Create a small temporary canvas for sampling
-        const tempCanvas = document.createElement('canvas');
-        const tempCtx = tempCanvas.getContext('2d');
-        tempCanvas.width = 20;  // Sample area size
-        tempCanvas.height = 20;
+        const now = performance.now();
+        // Increase threshold to 100ms to reduce frequent sampling
+        if (
+            this.lastColorSample.x === x &&
+            this.lastColorSample.y === y &&
+            now - this.lastColorSample.time < 100
+        ) {
+            return this.lastColorSample.color;
+        }
 
-        // Draw the currently visible portion of background
+        const tempCtx = this.tempCtx;
+        tempCtx.clearRect(0, 0, 20, 20);
         const activeImg = this.images[this.currentImageIndex];
         const activePos = this.currentImageIndex === 0 ? this.position1 : this.position2;
 
         tempCtx.drawImage(
             activeImg,
-            x - 10, y - 10 - activePos,  // Center the sampling area
-            20, 20,                       // Source size
-            0, 0,                         // Dest position
-            20, 20                        // Dest size
+            x - 10, y - 10 - activePos, 20, 20,
+            0, 0, 20, 20
         );
 
-        // Get average color
         const data = tempCtx.getImageData(0, 0, 20, 20).data;
         let r = 0, g = 0, b = 0, count = 0;
-        
         for (let i = 0; i < data.length; i += 4) {
             r += data[i];
             g += data[i + 1];
             b += data[i + 2];
             count++;
         }
-        
-        return {
+        const color = {
             r: r / count,
             g: g / count,
             b: b / count
         };
+        this.lastColorSample = { x, y, color, time: now };
+        return color;
     }
 }