Web Games Manager

Self-hosted Web Games Portal mit Benutzeranmeldung. Spiele HTML5-Spiele direkt im Browser oder lade ROMs hoch und emuliere Retro-Konsolen (NES, SNES, Game Boy, N64, PlayStation, ...) via EmulatorJS.

Features

• Benutzeranmeldung - Login/Registrierung mit sicherer Passwort-Verschluesselung (bcrypt)
• 8 eingebaute HTML5-Spiele - Snake, Tetris, 2048, Breakout, Flappy Bird, Minesweeper, Pong, Memory
• ROM-Upload & Emulation - Lade eigene ROMs hoch und spiele sie direkt im Browser via EmulatorJS
• Unterstuetzte Konsolen - NES, SNES, Game Boy, Game Boy Advance, Nintendo 64, Sega Genesis/Mega Drive, PlayStation 1, Nintendo DS
• Favoriten-System - Markiere Spiele als Favoriten fuer schnellen Zugriff
• Kategorien & Suche - Filtere nach Arcade, Puzzle, Action, Retro oder suche per Textfeld
• Responsive Design - Funktioniert auf Desktop, Tablet und Handy
• Erster Benutzer = Admin - Der erste registrierte Account bekommt Admin-Rechte
• Einfaches Deployment - Node.js + SQLite, keine externe Datenbank noetig

Tech Stack

• Backend: Node.js, Express
• Datenbank: SQLite (via better-sqlite3) - keine externe DB noetig
• Auth: express-session + bcryptjs (Session-basiert, 7 Tage gueltig)
• Session Store: SQLite (connect-sqlite3)
• Emulation: EmulatorJS (wird vom CDN geladen)
• File Upload: multer (bis zu 100MB pro ROM)
• Frontend: Vanilla HTML/CSS/JS (keine Build-Tools noetig)

Installation

Voraussetzungen

• Node.js 18+ (empfohlen: 20+)

Setup

# Repository klonen
git clone <repo-url>
cd web-games-manager

# Dependencies installieren
npm install

# Server starten
npm start

Der Server laeuft standardmaessig auf http://localhost:3000.

Umgebungsvariablen

Variable	Standard	Beschreibung
PORT	3000	Server-Port
SESSION_SECRET	change-this-secret-in-production	Geheimnis fuer Session-Cookies (UNBEDINGT aendern!)

Beispiel:

PORT=8080 SESSION_SECRET=mein-super-geheimes-passwort npm start

Benutzung

Erster Start

1. Server starten mit npm start
2. Im Browser http://localhost:3000 oeffnen
3. Auf "Registrieren" klicken und ein Konto erstellen
4. Der erste Account wird automatisch Admin

Eingebaute Spiele

Sofort spielbar nach dem Login:

Spiel	Kategorie	Steuerung
Snake	Arcade	Pfeiltasten / WASD / Touch-Swipe
Tetris	Puzzle	Pfeiltasten / WASD
2048	Puzzle	Pfeiltasten / WASD / Touch-Swipe
Breakout	Arcade	Maus / Touch
Flappy Bird	Arcade	Klick / Leertaste / Touch
Minesweeper	Puzzle	Linksklick = aufdecken, Rechtsklick = Flagge
Pong	Arcade	Spieler 1: W/S, Spieler 2: Pfeiltasten (+ KI-Modus)
Memory	Puzzle	Klick / Touch

ROMs hochladen (Emulation)

1. Im Portal auf das + Symbol klicken
2. Titel und Beschreibung eingeben
3. Konsole/Core auswaehlen (NES, SNES, GB, GBA, N64, Sega, PSX, NDS)
4. ROM-Datei hochladen (max 100MB)
5. Optional: Thumbnail-Bild hochladen
6. Spiel erscheint sofort in der Bibliothek

Hinweis: Du musst deine eigenen ROM-Dateien bereitstellen. Der Besitz der Originalspiele wird vorausgesetzt.

Projektstruktur

web-games-manager/
├── server.js              # Express-Server (Einstiegspunkt)
├── db.js                  # SQLite Datenbank-Setup
├── package.json           # Dependencies
├── .gitignore
├── routes/
│   ├── auth.js            # Login/Register/Logout Routen
│   └── api.js             # Game-API (CRUD, Favoriten, Upload)
├── public/                # Oeffentliche Dateien (Login/Register)
│   ├── login.html
│   ├── register.html
│   └── auth.css
├── views/                 # Geschuetzte Dateien (nach Login)
│   ├── index.html         # Haupt-Portal
│   ├── style.css          # Portal-Styles
│   ├── app.js             # Portal-Logik
│   └── emulator.html      # EmulatorJS Wrapper
├── games/                 # Eingebaute HTML5-Spiele
│   ├── snake/
│   ├── tetris/
│   ├── 2048/
│   ├── breakout/
│   ├── flappy/
│   ├── minesweeper/
│   ├── pong/
│   └── memory/
├── data/                  # (auto-generiert) SQLite Datenbanken
└── uploads/               # (auto-generiert) Hochgeladene ROMs/Thumbnails

API-Endpunkte

Alle /api/* Endpunkte erfordern eine aktive Session (Login).

Methode	Pfad	Beschreibung
POST	/auth/login	Anmelden
POST	/auth/register	Registrieren
POST	/auth/logout	Abmelden
GET	/auth/me	Aktueller Benutzer
GET	/api/games/builtin	Liste der eingebauten Spiele
GET	/api/games/custom	Liste der hochgeladenen ROM-Spiele
POST	/api/games/upload	ROM hochladen (multipart/form-data)
DELETE	/api/games/custom/:id	ROM-Spiel loeschen (nur Admin)
GET	/api/favorites	Favoriten des Benutzers
POST	/api/favorites/:gameId	Favorit hinzufuegen
DELETE	/api/favorites/:gameId	Favorit entfernen

Deployment

Einfach (direkt auf Server)

# Auf dem Server
git clone <repo-url>
cd web-games-manager
npm install --production
SESSION_SECRET=$(openssl rand -hex 32) PORT=3000 node server.js

Mit systemd (Linux)

# /etc/systemd/system/games.service
[Unit]
Description=Web Games Manager
After=network.target

[Service]
Type=simple
User=www-data
WorkingDirectory=/opt/web-games-manager
Environment=PORT=3000
Environment=SESSION_SECRET=dein-geheimes-passwort
ExecStart=/usr/bin/node server.js
Restart=on-failure

[Install]
WantedBy=multi-user.target

sudo systemctl enable games
sudo systemctl start games

Mit Reverse Proxy (nginx)

server {
    listen 80;
    server_name games.example.com;

    client_max_body_size 110M;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_cache_bypass $http_upgrade;
    }
}

Sicherheit

• Passwoerter werden mit bcrypt gehasht (10 Salt-Runden)
• Session-basierte Authentifizierung (kein Token im Frontend)
• Alle Spiel-Dateien und API-Routen sind nur nach Login erreichbar
• File-Upload begrenzt auf 100MB
• Wichtig: SESSION_SECRET in Produktion unbedingt aendern!
• Fuer HTTPS: Reverse Proxy (nginx/caddy) mit SSL-Zertifikat (z.B. Let's Encrypt) verwenden

Lizenz

MIT

---

Last reviewed: 2026-04-11