moonrider

Mondreiter

Surfen Sie auf der musikalischen Straße zwischen Mond, Sternen und Nordlichtern.

Ein Nebenprojekt, das von zwei Leuten in ein paar Monaten erstellt wurde, um zu zeigen, wie VR auf einer Webseite läuft. Gebaut mit HTML, JavaScript und A-Frame. Es ist weder als offizielles Spiel noch als kommerzielles Produkt gedacht. Moon Rider soll eine Open-Source-Ressource sein, aus der die Webentwickler-Community lernen und die offene WebXR-Initiative vorantreiben kann.

Die Songkarten stammen von beatsaver. Unterstützt alle Browser und Headsets (inkl. Quest). Wenn es irgendwelche Probleme gibt, reichen Sie ein Problem hier auf GitHub ein oder hinterlassen Sie eine Nachricht im Supermedium Discord.

Probieren Sie die Seite jetzt in Ihrem Browser aus!

Mit verschiedenen Modi:

• Fahrmodus – Lehnen Sie sich einfach zurück und genießen Sie die Fahrt.

• Punch-Modus – Zerschmettere die Sterne.

• Viewer-Modus – Sehen Sie sich die Beatmap in Ihrem Browser an.

• Klassischer Modus – Surfen und Slice entlang der musikalischen Straße.

Vielen Dank an @elliottate für die Hilfe!

Entwicklung

Node (< v12, empfohlen v11) und npm installiert haben.

npm install
npm run start

Gehen Sie dann in Ihrem Browser zu localhost:3000 .

Remixen und Forken

Machen Sie dieses Spiel zu Ihrem eigenen! Einige einfache Möglichkeiten, herumzuspielen:

• Um weitere Farbpaletten zu ändern oder hinzuzufügen, ändern Sie src/constants/colors.js .

• Um Bilder zu ändern, ersetzen Sie die Bilder im Ordner src/assets/img/ . Ersetzen Sie beispielsweise den Mond unter „src/assets/img/moon.png“.

• Um Modelle zu ändern, ersetzen Sie die Modelle im Ordner src/assets/models/ . Ersetzen Sie beispielsweise die Pfeilblöcke unter src/assets/models/arrowblue.obj oder arrowred.obj .

• Um Sounds zu ändern, ersetzen Sie Sounds in src/assets/sounds . Ersetzen Sie beispielsweise die Treffersounds unter src/assets/sounds/ .

• Ändern Sie verschiedene Werte wie speed in src/state/index.js oder BEAT_PRELOAD_TIME in src/components/beat-generator.js um zu beeinflussen, wie schnell Sie sich entlang der Kurve bewegen oder wie lange die Reaktionszeit dauert, bis die Noten beim Player ankommen.

Andere Möglichkeiten wie das Hinzufügen weiterer Modi sind aufwändiger, aber mit Kenntnissen in A-Frame und JavaScript ist das machbar!

Testen Sie die URL-Parameter

URL-Parameter	Beschreibung
?debugcontroller={classic, Punch, Ride}	Controller anzeigen und mit Umschalt/Strg + {h, j, k, l} verschieben
?debugbeatpositioning={classic, Punch}	Alle Notizen in möglichen Positionierungen anzeigen.
?debugstate={Laden, Sieg}	Lade- oder Siegesbildschirm anzeigen.
?skipintro=true	Einführungsbildschirm überspringen.

Bereitstellung auf GitHub

Möchtest du ein paar verrückte Anpassungen vorführen? Aktivieren Sie die GitHub Pages-Bereitstellung, um gh-pages -Zweig bereitzustellen, und gehen Sie dann wie folgt vor:

npm run deploy

Die Website wird unter https://yourusername.github.io/moonrider/ verfügbar sein.