feat: Add flashlight battery and manual controls, enable post-processing, dim ambient light, and remove debug code.
This commit is contained in:
21
index.html
21
index.html
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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') {
|
||||||
|
|||||||
Reference in New Issue
Block a user