Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/supermedium/moonrider
🌕🏄🏿 Surf the musical road among the stars. Side project built by two people in a few months to demonstrate WebXR.
https://github.com/supermedium/moonrider
aframe browser html javascript threejs web webgl webvr webxr
Last synced: 6 days ago
JSON representation
🌕🏄🏿 Surf the musical road among the stars. Side project built by two people in a few months to demonstrate WebXR.
- Host: GitHub
- URL: https://github.com/supermedium/moonrider
- Owner: supermedium
- License: mit
- Created: 2019-04-11T08:32:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T12:08:12.000Z (9 months ago)
- Last Synced: 2025-01-13T01:03:26.038Z (13 days ago)
- Topics: aframe, browser, html, javascript, threejs, web, webgl, webvr, webxr
- Language: JavaScript
- Homepage: https://moonrider.xyz
- Size: 24 MB
- Stars: 607
- Watchers: 20
- Forks: 240
- Open Issues: 80
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- vr-resources - Moonrider, A Surf the musical road among the stars. Side project built by two people in a few months to demonstrate WebXR
README
# Moon Rider
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](https://beatsaver.com). 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](https://supermedium.com/discord).
[**Try the site out now in your browser!**](https://supermedium.com/moonrider/)
Featuring various modes:
- **Ride Mode** - Just sit back and enjoy the ride.
- **Punch Mode** - Crush the stars.
- **Viewer Mode** - Watch the beatmap within your browser.
- **Classic Mode** - Surf and slice along the musical road.
Big thanks to @elliottate for helping out with this!
## Development
Have Node (< v12, recommended v11) and npm installed.
```
npm install
npm run start
```
Then head to `localhost:3000` in your browser.
### Remixing and Forking
Make this game your own! Some easy ways to mess around:
- To modify or add more color palettes, change `src/constants/colors.js`.
- To change images, replace images in `src/assets/img/` folder. For example,
replace the moon at `src/assets/img/moon.png'.
- To change models, replace models in `src/assets/models/` folder. For example,
replace the arrow blocks at `src/assets/models/arrowblue.obj` or
`arrowred.obj`.
- To change sounds, replace sounds in `src/assets/sounds`. For example, replace
the hit sounds at `src/assets/sounds/`.
- Change various values such as `speed` in `src/state/index.js` or
`BEAT_PRELOAD_TIME` in `src/components/beat-generator.js` to mess with how
fast you travel along the curve, or how much reaction time until the notes
arrive to the player.
Other ways such as adding more modes are more involved, but with knowledge of
A-Frame and JavaScript, is doable!
### Test URL Parameters
| 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. |
### Deploying to GitHub
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/`.