43 lines
1.9 KiB
Markdown
43 lines
1.9 KiB
Markdown
# raycaster-3d
|
||
|
||
Saf **HTML5 2D Canvas** (`2d` context) üzerine inşa edilmiş, **3D retro FPS raycasting motoru** — *Wolfenstein 3D (1992)* klonu.
|
||
|
||
> ⛔ **Three.js / Babylon.js / WebGL kullanılmadı.** Tüm "3D" görüntü, ekranın her dikey piksel sütunu için fırlatılan ışınların (DDA) canvas `fillRect` ile boyamasından üretilir: gerçek 3D yok, perspektif illüzyonu var — tıpkı 1992'de olduğu gibi.
|
||
|
||
## Harita Düzeni (16×16)
|
||
| Değer | Anlam |
|
||
|-------|-------|
|
||
| `0` | Boş / geçilebilir zemin |
|
||
| `1` | Neon mavi duvar |
|
||
| `2` | Yeşil duvar |
|
||
| `3` | Kırmızı tuğla duvar |
|
||
|
||
## Teknik Özellikler
|
||
- **Raycasting & matematik motoru:** her dikey piksel sütunu için bir ışın; DDA (Digital Differential Analyzer) ışın yürütme.
|
||
- **Fisheye düzeltmesi:** `perpDist = dist * Math.cos(rayAngle - playerAngle)` ile kavisli duvar görünümü engellenir.
|
||
- **Derinlik gölgelendirme:** uzak dilimler koyu, yakınlar parlak.
|
||
- **Tavan/zemin:** gökyüzü kısmen koyu gri→siyah degrade, zemin koyu füme; dikey dilimler hâlinde boyanır.
|
||
- **Kontroller:** `W/S` ileri-geri, `A/D` veya `←/→` dönüş.
|
||
- **Çarpışma:** oyuncu duvarlardan geçemez (DDA + grid bounding).
|
||
- **HUD & Minimap:** sağ üstte grid tabanlı canlı radar (duvarlar + oyuncu + ışın konisi), altta retro durum çubuğu — canlı FPS sayacı, oyuncu `x / y`, retro hedef (crosshair).
|
||
|
||
## Çalıştırma
|
||
```bash
|
||
npm install
|
||
npm start
|
||
# -> http://localhost:4173
|
||
```
|
||
veya başka port: `PORT=5000 npm start`
|
||
|
||
## Dosyalar
|
||
```
|
||
public/
|
||
index.html — sayfa yapısı, canvas + HUD + minimap
|
||
style.css — retro arayüz
|
||
engine.js — raycasting/görüntüleme çekirdeği (saf 2D canvas)
|
||
app.js — oyun döngüsü, kontroller, fizik, HUD/minimap, minimap ışını
|
||
server.js — Express statik sunucu
|
||
```
|
||
|
||
Oda oklarıyla dön, W/S ile yürü. İyi avlar 👾
|