JavaScript Gamepad API, it does exist!

- Development, Firefox, HTML5, JavaScript, No category, Resources, Video

The joystick. The world of gaming console. A world that I never liked for the shooter, for other games joysticks are perfect. Yes I’ve never had the console apart from the mythical gameboy color.

WebGL has brought 3D on JavaScript but lacked a way to allow players to use their beloved joysticks!

The advantages are interesting to play, just attack the joystick, connect to a site, wait for the loading of material and press play. Think then with WebSockets for multiplayer games.
You not you get up from the chair ever again.

With the 3D and the joysticks the real web is taking a field that has never been so interactive.
Mte90 – Daniele Scasciafratte

Think of it as an Xbox or PlayStation console that supports this feature or the same Steam for PC.

Before you try a fun demo indeed a game some technical detail.

This API is in draft has been integrated in Firefox 29 and Chrome 21. Internet Explorer instead is in development. For the mobile browser is currently not planned (I think that expect an official standardization and a good number of games before integrating).

Could evolve in the future but is now well standardized and as always MDN has an excellent tutorial that explains how to use this API.

This API recognizes many joystick from those of the Xbox, PlayStation and those taken from 10 euro to the supermarket (I use these).

After my experiences in the events I felt the need to demo to show people these new APIs and technologies so I started looking on the web.

I came across this game Boxes Wot Shoot (do not open it right away that I have not finished), use Three.JS for 3D objects, the API for the html5 audio, localforage.JS for saving configurations and of course the Gamepad API.

The game is very simple you move in a circular area and shoot at the blocks that move towards you. With the two stick of the joystick you can move and shoot in 360 degrees which is very comfortable.

I like him and fork it (not because I like but for add some features, you that fork and then do nothing you are ugly people).

I added the feature:

  • Reset Configuration (if you’re wrong in the configuration when you first start it’s hard to do a reset) by pressing the R key on the keyboard
  • Multilingual taking advantage of webl10n by Gaia (the interface of Firefox OS)
  • Saving the best score

With these small feature the new demo exists and works (I made the pull request to the original project, are awaiting integration) . My changes were minimal but they serve to show this new API.

Connect your joystick to your computer (it is cross-platform and runs on Linux as well:-D), open Firefox or Chrome, and click here .
Follow the instructions and play.

This in addition to being a demo is a game that definitely will use in my presentations and events (bringing a joystick). Moreover even if it is WebGL does not require large hardware features for its simplicity.

Ideal for a short demo 🙂

For the gameplay or video you can see on the right (sorry for my bad english).

References

HTML5 Gamepad Tester – http://html5gamepad.com/

Examples of code – http://gamedevelopment.tutsplus.com/tutorials/using-the-html5-gamepad-api-to-add-controller-support-to-browser-games–cms-21345

Interactive examples with introduction – http://www.html5rocks.com/en/tutorials/doodles/gamepad/

Other documentation – http://docs.webplatform.org/wiki/tutorials/gamepad

Liked it? Take a second to support Mte90 on Patreon!

Become a Patreon
All the stuff released in this website, where the author is Daniele Scasciafratte, is under the GPL 2.0 license except when the resources have their licenses.

Leave a Reply