feat: Add flashlight battery and manual controls, enable post-processing, dim ambient light, and remove debug code.

This commit is contained in:
2026-01-03 07:44:04 +00:00
parent 220a3e5d6e
commit 6b9063bf34
5 changed files with 62 additions and 44 deletions

View File

@@ -6,24 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horror Game</title> <title>Horror Game</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script>
window.onerror = function (msg, url, lineNo, columnNo, error) {
const logDiv = document.getElementById('debug-log');
if (logDiv) {
logDiv.style.display = 'block';
logDiv.innerHTML += `<div style="color:red; background:white">CRITICAL: ${msg} [Line: ${lineNo}]</div>`;
}
return false;
};
window.test2D = function () {
const c = document.createElement('canvas');
c.width = 50; c.height = 50;
c.style.position = 'fixed'; c.bottom = '0'; c.right = '0'; c.zIndex = '10001';
document.body.appendChild(c);
const ctx = c.getContext('2d');
ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 50, 50);
};
</script>
</head> </head>
<body> <body>
@@ -39,8 +21,7 @@
<div id="battery">Battery: <span id="battery-level">100%</span></div> <div id="battery">Battery: <span id="battery-level">100%</span></div>
</div> </div>
<div id="debug-log" <div id="debug-log"
style="position: absolute; top: 10px; left: 10px; z-index: 10000; color: lime; font-family: monospace; pointer-events: none; background: rgba(0,0,0,0.8); max-height: 80%; overflow-y: auto; font-size: 14px; padding: 10px; width: 300px; display: block;"> style="position: absolute; top: 10px; left: 10px; z-index: 10000; color: lime; font-family: monospace; pointer-events: none; background: rgba(0,0,0,0.8); max-height: 50%; overflow-y: auto; font-size: 12px; padding: 10px; width: 300px; display: none;">
<div>> Logger Initialized</div>
</div> </div>
</div> </div>

View File

@@ -77,15 +77,6 @@ export class Graphics {
} }
render() { render() {
if (!this.renderCount) this.renderCount = 0;
this.renderCount++;
if (this.renderCount % 500 === 0) window.log(`Frame: ${this.renderCount}`);
// Diagnostic: Render 3D Scene directly to Screen
this.renderer.setRenderTarget(null);
this.renderer.render(this.scene, this.camera);
/*
// 1. Render 3D Scene to RenderTarget // 1. Render 3D Scene to RenderTarget
this.renderer.setRenderTarget(this.renderTarget); this.renderer.setRenderTarget(this.renderTarget);
this.renderer.render(this.scene, this.camera); this.renderer.render(this.scene, this.camera);
@@ -93,6 +84,5 @@ export class Graphics {
// 2. Render Post-Processing Quad to Screen // 2. Render Post-Processing Quad to Screen
this.renderer.setRenderTarget(null); this.renderer.setRenderTarget(null);
this.renderer.render(this.postScene, this.postCamera); this.renderer.render(this.postScene, this.postCamera);
*/
} }
} }

View File

@@ -25,9 +25,14 @@ export class Player {
this.moveBackward = false; this.moveBackward = false;
this.moveLeft = false; this.moveLeft = false;
this.moveRight = false; this.moveRight = false;
this.adjustDim = false; // 'K' key
this.adjustBright = false; // 'L' key
this.velocity = new THREE.Vector3(); this.velocity = new THREE.Vector3();
this.direction = new THREE.Vector3(); this.direction = new THREE.Vector3();
this.direction = new THREE.Vector3();
this.flashlightOn = true; // Started as ON this.flashlightOn = true; // Started as ON
this.battery = 100.0;
this.baseDrain = 0.5; // Drain per second at base intensity
this.setupInput(); this.setupInput();
this.setupFlashlight(); this.setupFlashlight();
@@ -37,8 +42,8 @@ export class Player {
this.flashlight = new THREE.SpotLight(0xffffff, 10); this.flashlight = new THREE.SpotLight(0xffffff, 10);
this.flashlight.angle = Math.PI / 6; this.flashlight.angle = Math.PI / 6;
this.flashlight.penumbra = 0.3; this.flashlight.penumbra = 0.3;
this.flashlight.decay = 2; this.flashlight.decay = 1.5; // Lower decay for further reach
this.flashlight.distance = 15; this.flashlight.distance = 60; // Significantly increased range
this.camera.add(this.flashlight); this.camera.add(this.flashlight);
this.flashlight.position.set(0, 0, 0); this.flashlight.position.set(0, 0, 0);
@@ -54,6 +59,8 @@ export class Player {
case 'KeyS': this.moveBackward = true; break; case 'KeyS': this.moveBackward = true; break;
case 'KeyD': this.moveRight = true; break; case 'KeyD': this.moveRight = true; break;
case 'KeyF': this.toggleFlashlight(); break; case 'KeyF': this.toggleFlashlight(); break;
case 'KeyK': this.adjustDim = true; break;
case 'KeyL': this.adjustBright = true; break;
} }
}; };
@@ -63,6 +70,8 @@ export class Player {
case 'KeyA': this.moveLeft = false; break; case 'KeyA': this.moveLeft = false; break;
case 'KeyS': this.moveBackward = false; break; case 'KeyS': this.moveBackward = false; break;
case 'KeyD': this.moveRight = false; break; case 'KeyD': this.moveRight = false; break;
case 'KeyK': this.adjustDim = false; break;
case 'KeyL': this.adjustBright = false; break;
} }
}; };
@@ -76,6 +85,11 @@ export class Player {
// Better to allow F only when locked to avoid confusion. // Better to allow F only when locked to avoid confusion.
if (!this.controls.isLocked) return; if (!this.controls.isLocked) return;
if (this.battery <= 0 && this.flashlightOn === false) {
window.log('Cannot turn on: Battery empty');
return;
}
this.flashlightOn = !this.flashlightOn; this.flashlightOn = !this.flashlightOn;
if (this.flashlight) { if (this.flashlight) {
this.flashlight.visible = this.flashlightOn; this.flashlight.visible = this.flashlightOn;
@@ -147,9 +161,51 @@ export class Player {
// Keep player on ground // Keep player on ground
playerPos.y = this.height; playerPos.y = this.height;
// Flashlight flicker effect (subtle) // Flashlight flicker effect (subtle) & Battery Logic
if (this.flashlight && this.flashlightOn) { if (this.flashlight && this.flashlightOn) {
this.flashlight.intensity = 10 + Math.random() * 0.5; // Battery Drain
// Base intensity is ~10. Drain proportional to intensity.
const drainFactor = this.flashlight.intensity / 10.0;
const drain = this.baseDrain * drainFactor * dt;
this.battery = Math.max(0, this.battery - drain);
// Update UI
const battEl = document.getElementById('battery-level');
if (battEl) battEl.textContent = Math.floor(this.battery) + '%';
if (this.battery <= 20) {
if (battEl) battEl.style.color = 'red';
} else {
if (battEl) battEl.style.color = 'white';
}
// Die if empty
if (this.battery <= 0) {
this.flashlightOn = false;
this.flashlight.visible = false;
window.log('Battery depleted!');
}
// Handle manual adjustment
if (this.adjustDim || this.adjustBright) {
const speed = 2.0 * dt;
const angleSpeed = 0.5 * dt;
if (this.adjustDim) {
this.flashlight.intensity = Math.max(0, this.flashlight.intensity - speed * 10);
this.flashlight.angle = Math.max(0.1, this.flashlight.angle - angleSpeed);
}
if (this.adjustBright) {
this.flashlight.intensity = Math.min(50, this.flashlight.intensity + speed * 10);
this.flashlight.angle = Math.min(Math.PI / 2, this.flashlight.angle + angleSpeed);
}
// Log occasionally for feedback
if (Math.random() < 0.1) window.log(`Light: Int=${this.flashlight.intensity.toFixed(1)} Ang=${this.flashlight.angle.toFixed(2)}`);
} else {
// Only flicker if not adjusting? Or flicker on top of base intensity.
// Let's modify base intensity and add flicker
// Simplified: just flicker around the current value
this.flashlight.intensity += (Math.random() - 0.5) * 0.5;
}
} }
} }
} }

View File

@@ -8,7 +8,7 @@ export class World {
load() { load() {
// Standard lighting for horror // Standard lighting for horror
const ambientLight = new THREE.AmbientLight(0x404040, 1.0); // Full brightness ambient for testing const ambientLight = new THREE.AmbientLight(0x404040, 0.2); // Very dim ambient
this.scene.add(ambientLight); this.scene.add(ambientLight);
// Floor // Floor

View File

@@ -8,17 +8,8 @@ window.log = (msg) => {
logDiv.appendChild(span); logDiv.appendChild(span);
logDiv.scrollTop = logDiv.scrollHeight; logDiv.scrollTop = logDiv.scrollHeight;
} }
console.log(msg);
}; };
if (window.test2D) window.test2D();
window.log(`Searching for WebGL...`);
try {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
window.log(gl ? "WebGL Found" : "WebGL NOT Found");
} catch (e) { window.log("WebGL Check Error: " + e.message); }
// Toggle debug log with 'P' // Toggle debug log with 'P'
window.addEventListener('keydown', (e) => { window.addEventListener('keydown', (e) => {
if (e.code === 'KeyP') { if (e.code === 'KeyP') {