A DIY joystick for HTML5

A DIY joystick for HTML5

Some time ago, we published a speed test of our API. However, as a concrete example is sometimes more useful than numbers, we are proposing you today a small game written in Javascript (HTML5), which you can play with the keyboard or with a USB game pad based on a Yocto-Knob.

A video game is typically an application which requires a great reactivity: you can't fire on a moving target if firing happens a split second later than the expected time. Therefore, this is the ideal critical test to check the reactivity of our modules.

We have selected the Javascript (HTML5) language because it has a great potential for the creation of arcade games but lacks standards to access game peripherals. You'll find a plug-in on the Internet to access joysticks, but it's not standard and requires installing an extension in the web browser, which makes it impossible to use on iPads and other tablets. Moreover, it is limited to the functions of a standard joystick, which will never allow you to create your own airplane cockpit, for example. Whereas with a few Yocto-Knob and some time, everything is possible ... even if today we limit ourselves to a simpler game pad.

A button and a stick salvaged from an old RC model remote control
A button and a stick salvaged from an old RC model remote control



Making the joystick is very easy: we cut, in a plate of acrylic glass, holes to fix two buttons and a stick, salvaged from an old remote control, for example. Connections to the Yocto-Knob are very simple: each button and each potentiometer of the stick has a wire connected to one of the inputs, and a wire on the common ground:

Game pad connection diagram
Game pad connection diagram


The completed game pad
The completed game pad



Programming of the game itself is of no particular interest for this article; note only that it uses the HTML5 standard (canvas object for graphics, and audio object for sound) and therefore does not require Adobe Flash. If you use Internet Explorer, you'll need version 9 because prior versions do not support HTML5.

The interesting part is the interaction with the user. At the very beginning of the source code, you find the callback functions, to pilot the game either from the keyboard or from the joystick. Here is the control from the keyboard: we successively manage the arrow keys to turn and accelerate, the space bar to fire, and the return key to start the game.


function keydown(ev)
{
    if (!ev) ev = event;
    if (game) {
        if ((ev.keyCode == 37)||(ev.keyCode == 65)) game.turnShip(0.1);
        if ((ev.keyCode == 39)||(ev.keyCode == 68)) game.turnShip(-0.1);
        if ((ev.keyCode == 38)||(ev.keyCode == 87)) game.boostShip(10);  
        if (ev.keyCode == 32) game.shipFire();  
        if (ev.keyCode == 13) game.startGame();
    }
}
 



Let's now look at how to do the same for our joystick. Unlike for the keyboard, we can have an individual callback for each button or potentiometer. Let's start by the callback called for each modification of the position of the steering stick (the value passed as argument is a number ranging from 0 to 1000):


function turnknob(anbutton, value)
{
    if (game) {
        var pos = value - 500; // pos in [-500 .. +500]
        game.turnShip(pos / -2000);    // turn in [-0.25 .. +0.25]
    }
}
 



For the buttons, we add a variable to convert the analog value received in callback into a binary event, in a robust manner (relative threshold):


var prevThrust = 0;
function thrustbutton(anbutton, value)
{
    if(Math.abs(value-prevThrust) > 200) {
        if(value < 500 && game) game.boostShip(10);
        prevThrust = value;
    }
}
 



The remainder of the code specific to the game pad consists simply in initializing the API by giving the IP address where the Virtual Hub which provides access to the Yocto-Knob can be reached (yes, it works also if the game pad is not directly connected to the machine but on the network!), and in registering the callbacks. You can find the details in using View Source on the game below.

The game that we have selected to demonstrate the power of your Javascript API is an old classic from the end of the 70's, simple enough to be recoded in a few hours. You can see the game pad in action in the video below.

  



You can even try the game yourself. As we aren't mean, we included keyboard support in case you don't have a Yocto-Knob: use the arrows to pilot (or A, S, and D), and the space bar to fire.


Add a comment No comment yet
Back to blog












Yoctopuce, get your stuff connected.