Skip to content
A small joystick for touchscreens for your html5 game.
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


This small javascript class turns a dom element into a joystick for touchscreens.


  • Easy and fast integration thanks to pretendKeydown
  • Supports all touchscreen devices
  • Small and high performance
  • Much styling can be done without changing the source code
  • Normaly doesn't break anything

Demo (official)

Integrated in projects: (feel free to add yours) (Press joystick to show it, you can use chrome to emulate touchevents)


You are free to use this code however you want.

How to use

  var joystick = new SQUARIFIC.framework.TouchControl(elem, settings); //e.g. elem = document.getElementById("joystick"); settings is explained later
	joystick.on("pretendKeydown", function (event) {console.log(event)});


Settings is an object containing the following:

		pretendArrowKeys: boolean, //Should it simulate keypresses of the arrows, default true
		mindistance: number, //Distance the joystick needs to move before an action should be taken
		maxdistance: number, //The maximum distance the joystick may move
		middleLeft: number, //Amount of pixels to the middle of the joystick from the left
		middleTop: number //Amount of pixels to the middle of the joystick from the top


The returned event object:

//pretendKeydown, pretendKeyup
		keyCode: 38;
		distance: number, //The distance from the beginpoint to the mouse
		angle: angle, //The angle between the x-axis and the line from the beginpoint to the mouse, up = -, down = +, left 180, right 0
		deltaX: deltaX, //The difference from the beginpoint to the mouse over the x-axis
		deltaY: deltaY //The difference from the beginpoint to the mouse over the y-axis

The following events are available:

  • pretendKeydown
  • pretendKeyup
  • joystickMove
You can’t perform that action at this time.