Alfonsos Adventure

A work in progress cross browser three.js endless runner game controlled by either desktop keyboard or device orientation events. Using a query URL the game can also be viewed in virtual reality mode.

Tool kit

View Project

This is something I've been tinkering with for a while but my primary motivation for creating this project is that I was intrigued to see how possible it would be to create not only a browser based game that would work just as well on device as it would on desktop (cross platform). But to also see if the same code base could be used to create a virtually reality version.

Turns out it is. Three.js has a really simple way of creating the renderer 'stereo effect' which is required for virtual reality, with an option to adjust the distance between the left and right scenes, this is called 'eye separation'

App.three.effect = new THREE.StereoEffect(App.three.renderer); App.three.effect.eyeSeparation = 5000;

If you do have cardboard to hand visit on your mobile


There's still the matter of controlling the movement which i've half started using the DeviceOrientation event to obtain a compass heading as outlined on w3c

I'm also working on the backend using npm twitter to look up the users Twitter user name, grab their 'screen_name' which i'll use along with their score to add to a database.

If you'd like to know more all the source code is available on my GitHub