48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="tr">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>RAYCASTER-3D — Retro FPS Motoru</title>
|
|||
|
|
<link rel="stylesheet" href="style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Üst bilgi -->
|
|||
|
|
<header class="topbar">
|
|||
|
|
<span class="logo">⟁ RAYCASTER<span class="dim">-3D</span></span>
|
|||
|
|
<span class="tag">Wolfenstein '92 · saf 2D canvas · DDA ışın</span>
|
|||
|
|
<span class="hint">W/A/S/D yürü · ←/→ veya A/D dön</span>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main class="stage">
|
|||
|
|
<!-- 3D görünüm -->
|
|||
|
|
<div class="viewport">
|
|||
|
|
<canvas id="game"></canvas>
|
|||
|
|
<!-- Retro hedef (çapraz) -->
|
|||
|
|
<div class="crosshair" aria-hidden="true">
|
|||
|
|
<span class="x"></span><span class="y"></span>
|
|||
|
|
</div>
|
|||
|
|
<!-- Radar minimap (sağ üst) -->
|
|||
|
|
<div class="minimap-wrap">
|
|||
|
|
<canvas id="minimap" width="160" height="160"></canvas>
|
|||
|
|
<span class="mm-label">RADAR</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Retro durum çubuğu -->
|
|||
|
|
<footer class="hudbar">
|
|||
|
|
<div class="hud-block"><label>FPS</label><strong id="hud-fps">60</strong></div>
|
|||
|
|
<div class="hud-block"><label>X</label><strong id="hud-x">2.50</strong></div>
|
|||
|
|
<div class="hud-block"><label>Y</label><strong id="hud-y">2.50</strong></div>
|
|||
|
|
<div class="hud-block"><label>BAKIŞ</label><strong id="hud-ang">30°</strong></div>
|
|||
|
|
<div class="hud-fill"></div>
|
|||
|
|
<div class="hud-copy">NUMEX · ENGINE 2D // RETRO-RAY © 2026</div>
|
|||
|
|
</footer>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<!-- Engine yüklenir: önce motor, sonra oyun mantığı -->
|
|||
|
|
<script src="engine.js"></script>
|
|||
|
|
<script src="app.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|