🌕🏄🏿 Surf the musical road among the stars. Side project built by two people in a few months to demonstrate WebXR.
MIT License
Surf the musical road among the moon, stars, and northern lights.
A side project built by two people in a few months to show off VR running inside a webpage. Built with HTML, JavaScript, and A-Frame. Not meant to be an official game nor commerical product. Moon Rider is meant to be an open source resource for the web developer community to learn from, and to push forward the open WebXR initiative.
Song maps are sourced from beatsaver. Supports all browsers and headsets (incl. Quest). If there are any issues, file an issue here on GitHub or leave a message in the Supermedium Discord.
Try the site out now in your browser!
Featuring various modes:
Big thanks to @elliottate for helping out with this!
Have Node (< v12, recommended v11) and npm installed.
npm install
npm run start
Then head to localhost:3000
in your browser.
Make this game your own! Some easy ways to mess around:
src/constants/colors.js
.src/assets/img/
folder. For example,src/assets/models/
folder. For example,src/assets/models/arrowblue.obj
orarrowred.obj
.src/assets/sounds
. For example, replacesrc/assets/sounds/
.speed
in src/state/index.js
orBEAT_PRELOAD_TIME
in src/components/beat-generator.js
to mess with howOther ways such as adding more modes are more involved, but with knowledge of A-Frame and JavaScript, is doable!
URL Parameter | Description |
---|---|
?debugcontroller={classic, punch, ride} | Show controllers and move them with shift/ctrl + {h, j, k, l} |
?debugbeatpositioning={classic, punch} | Show all notes in possible positionings. |
?debugstate={loading, victory} | Show loading or victory screen. |
?skipintro=true | Skip introduction screen. |
Showing off some crazy customizations? Enable GitHub Pages deployment to deploy
gh-pages
branch, and then:
npm run deploy
The website will be available on https://yourusername.github.io/moonrider/
.