Parcourez la route musicale parmi la lune, les étoiles et les aurores boréales.
Un projet parallèle construit par deux personnes en quelques mois pour montrer la réalité virtuelle exécutée dans une page Web. Construit avec HTML, JavaScript et A-Frame. Ce n'est pas destiné à être un jeu officiel ni un produit commercial. Moon Rider est censé être une ressource open source permettant à la communauté des développeurs Web d'apprendre et de faire avancer l'initiative ouverte WebXR.
Les cartes de chansons proviennent de Beatsaver. Prend en charge tous les navigateurs et casques (y compris Quest). S'il y a des problèmes, signalez-le ici sur GitHub ou laissez un message dans le Supermedium Discord.
Essayez le site maintenant dans votre navigateur !
Doté de différents modes :
Mode conduite : asseyez-vous et profitez de la balade.
Mode Punch - Écrasez les étoiles.
Mode Visionneuse - Regardez la beatmap dans votre navigateur.
Mode Classique - Surfez et parcourez la route musicale.
Un grand merci à @elliottate pour son aide !
Avoir Node (<v12, v11 recommandé) et npm installés.
npm install npm run start
Rendez-vous ensuite sur localhost:3000
dans votre navigateur.
Appropriez-vous ce jeu ! Quelques moyens simples de déconner :
Pour modifier ou ajouter plus de palettes de couleurs, changez src/constants/colors.js
.
Pour modifier les images, remplacez les images dans le dossier src/assets/img/
. Par exemple, remplacez la lune par `src/assets/img/moon.png'.
Pour changer de modèle, remplacez les modèles dans le dossier src/assets/models/
. Par exemple, remplacez les blocs fléchés dans src/assets/models/arrowblue.obj
ou arrowred.obj
.
Pour changer les sons, remplacez les sons dans src/assets/sounds
. Par exemple, remplacez les sons de frappe par src/assets/sounds/
.
Modifiez diverses valeurs telles que speed
dans src/state/index.js
ou BEAT_PRELOAD_TIME
dans src/components/beat-generator.js
pour modifier la vitesse à laquelle vous voyagez le long de la courbe ou le temps de réaction jusqu'à ce que les notes arrivent au lecteur.
D'autres moyens, tels que l'ajout de modes supplémentaires, sont plus complexes, mais avec la connaissance d'A-Frame et de JavaScript, c'est faisable !
Paramètre d'URL | Description |
---|---|
?debugcontroller={classique, punch, ride} | Afficher les contrôleurs et déplacez-les avec shift/ctrl + {h, j, k, l} |
?debugbeatpositioning={classique, punch} | Afficher toutes les notes dans les positionnements possibles. |
?debugstate={chargement, victoire} | Afficher l'écran de chargement ou de victoire. |
?skipintro=vrai | Passer l’écran d’introduction. |
Vous montrez des personnalisations folles ? Activez le déploiement de GitHub Pages pour déployer la branche gh-pages
, puis :
npm run deploy
Le site Web sera disponible sur https://yourusername.github.io/moonrider/
.