90 lines
2.1 KiB
Markdown
90 lines
2.1 KiB
Markdown
# Escape From Teacher - WASM Web Version
|
|
|
|
## 🎮 Starten
|
|
|
|
```bash
|
|
# Im web-Verzeichnis einen HTTP-Server starten
|
|
cd cmd/client/web
|
|
python3 -m http.server 8000
|
|
```
|
|
|
|
Dann im Browser öffnen: **http://localhost:8000**
|
|
|
|
## ✨ Features
|
|
|
|
### Modernes HTML/CSS Menü
|
|
- **Custom Font**: Nutzt `front.ttf` aus dem assets-Ordner
|
|
- **Responsive Design**: Funktioniert auf Desktop, Tablet und Smartphone
|
|
- **Glassmorphism**: Moderner durchsichtiger Look mit Blur-Effekt
|
|
- **Smooth Animations**: Fade-in, Slide-up, Pulse-Effekte
|
|
|
|
### Menü-Optionen
|
|
1. **Solo spielen**: Einzelspieler-Modus
|
|
2. **Co-op spielen**: Multiplayer mit Raum-Code
|
|
3. **Leaderboard**: Top 10 Spieler anzeigen
|
|
4. **Einstellungen**: Musik & SFX Lautstärke einstellen
|
|
|
|
### Mobile-Optimiert
|
|
- Touch-freundliche Buttons
|
|
- Responsive Layout für kleine Bildschirme
|
|
- Viewport-Anpassung für Smartphones
|
|
|
|
## 🎨 Design-Features
|
|
|
|
- **Gradient Background**: Lila-Blauer Farbverlauf
|
|
- **Button Hover-Effekte**: Ripple-Animationen
|
|
- **Custom Scrollbars**: Für Leaderboard
|
|
- **Loading Screen**: Spinner während WASM lädt
|
|
- **Emoji-Icons**: 🏃 👥 🏆 ⚙️
|
|
|
|
## 📁 Dateien
|
|
|
|
- `index.html`: HTML-Struktur
|
|
- `style.css`: Alle Styles mit Custom Font
|
|
- `game.js`: JavaScript-Bridge zwischen HTML und WASM
|
|
- `wasm_exec.js`: Go WASM Runtime (von Go kopiert)
|
|
- `main.wasm`: Kompiliertes Spiel
|
|
|
|
## 🔧 Entwicklung
|
|
|
|
### WASM neu kompilieren
|
|
```bash
|
|
GOOS=js GOARCH=wasm go build -o cmd/client/web/main.wasm ./cmd/client
|
|
```
|
|
|
|
### Font ändern
|
|
Ersetze `cmd/client/assets/front.ttf` und aktualisiere den Pfad in `style.css`:
|
|
```css
|
|
@font-face {
|
|
font-family: 'GameFont';
|
|
src: url('../assets/front.ttf') format('truetype');
|
|
}
|
|
```
|
|
|
|
## 🎯 Keyboard Shortcuts
|
|
|
|
- **ESC**: Zurück zum Menü (während des Spiels)
|
|
|
|
## 📱 Mobile Testing
|
|
|
|
Für lokales Mobile Testing:
|
|
```bash
|
|
python3 -m http.server 8000
|
|
# Öffne auf Smartphone: http://[DEINE-IP]:8000
|
|
```
|
|
|
|
## 🚀 Production Deployment
|
|
|
|
Für Production alle Dateien hochladen:
|
|
- index.html
|
|
- style.css
|
|
- game.js
|
|
- wasm_exec.js
|
|
- main.wasm
|
|
- assets/ (Font-Ordner)
|
|
|
|
Server muss WASM mit korrektem MIME-Type ausliefern:
|
|
```
|
|
Content-Type: application/wasm
|
|
```
|