75 lines
2.9 KiB
HTML
75 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Horror Game</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script>
|
|
window.onerror = function (msg, url, lineNo, columnNo, error) {
|
|
const logDiv = document.getElementById('debug-log');
|
|
if (logDiv) {
|
|
const err = document.createElement('div');
|
|
err.style.color = 'red';
|
|
err.style.fontWeight = 'bold';
|
|
err.style.background = 'white';
|
|
err.style.padding = '5px';
|
|
err.style.margin = '5px 0';
|
|
err.textContent = `CRITICAL ERROR: ${msg} [Line: ${lineNo}]`;
|
|
logDiv.appendChild(err);
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
function checkWebGL() {
|
|
try {
|
|
const canvas = document.createElement('canvas');
|
|
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
|
|
if (gl && gl instanceof WebGLRenderingContext) return "WebGL Supported";
|
|
else return "WebGL NOT Supported";
|
|
} catch (e) { return "WebGL Error: " + e.message; }
|
|
}
|
|
function test2D() {
|
|
try {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 100;
|
|
canvas.height = 100;
|
|
canvas.style.position = 'fixed';
|
|
canvas.style.bottom = '10px';
|
|
canvas.style.right = '10px';
|
|
canvas.style.zIndex = '10001';
|
|
canvas.style.border = '2px solid white';
|
|
document.body.appendChild(canvas);
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillRect(0, 0, 100, 100);
|
|
window.log("2D Canvas Test: Rendered Red Square");
|
|
} catch (e) { window.log("2D Canvas Error: " + e.message); }
|
|
}
|
|
window.addEventListener('load', test2D);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="game-container"></div>
|
|
<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;">
|
|
</div>
|
|
|
|
<div id="ui-layer">
|
|
<div id="start-screen">
|
|
<h1>ECHOES</h1>
|
|
<p>Click to Start</p>
|
|
<p class="controls">WASD to Move | Mouse to Look | E to Interact</p>
|
|
</div>
|
|
<div id="hud" style="display: none;">
|
|
<div id="battery">Battery: <span id="battery-level">100%</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
|
|
</html> |