retro joystick for online games or touchscreen games
Clone or download

Retro Joystick

A traditional joystick for web apps


alt text

Check It Out

View a demo online


  • Continuing attempts to solidfy API & distribution for a 1.0, hardening distribution format
  • Working on figuring out a nice bower workflow


This is available in a couple of ways

  • Using the css / js via polymer & bower
  • Using the css / js via bower (not vetted yet)
  • Consuming the css / js manually through your own process (not vetted yet)

Using via Polymer & Bower

If you don't have npm:

If you don't have bower: sudo npm install -g bower

Install joystick via

bower install retro-joystick

Copy the example file from bower_components/retro-joystick/bower_usage_example.html and put it in your main directory.

cp bower_components/retro-joystick/bower_usage_example.html .

Party on

Joystick API

Instanciate RetroJoyStick

var retroJoyStick = new RetroJoyStick();

You are able to view when joystick position changes

retroJoyStick.on('change', function () {
  // do something here

You are able to access the following properties



You are able to access the following methods:


The following options are optional via the constructor:

retroJoyStick = new RetroJoyStick({
  snapping: true, // false
  snappingPixels: 8, // pixels away from snapping point
  speedAdjustment: 0.08, // 1 = 1:1 pixels from maxDistanceFromCenter, when adjusting pixels.
  maxDistanceFromCenter: 100, // how many pxiels away from the center of the joystick?
  container: document.getElementById('controls'), // where to insert markup? (default: body),
  position: 'bottom_left', // or 'bottom_right'
  // @todo/@inprogress pass in pre-build element or wrapper element.



This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details at or

Target environments

This is for modern web browsers, targeted at the latest chrome/firefox at the moment. @TODO: crossbrowserness.


These notes are here because i dont even remember shit after like 5 months when i pick this up once and a great while.

Create a new bower release:

commit your changes to the major branch 0.0.5-dev

git commit -m 'updates...'

remember to push to branch

git push origin 0.0.5-dev

tag the commit, list tags:

git tag -l

tag the release

git tag -a v0.0.5-dev.2 -m "Release version v0.0.5"

push the release

git push origin master --tags

test bower release (empty dir):

bower info retro-joystick

bower install retro-joystick

cp bower_components/retro-joystick/index.html .



  • Test touch devices
  • Adjustable dimensions for joystick