A tiny, dependency-free JavaScript library for adding on-screen touch joysticks ("touchpads") to mobile web games and apps. Each touchpad renders a pot (the outer base) with a draggable stick, and reports position, angle, and power back to your code through callbacks.
- No dependencies. ~200 lines of plain JS.
- UMD wrapper — works with an AMD loader (
define) or as a globalwindow.TouchPad. - Reports x/y offset, angle (radians or degrees), and power (0–1) on every touch event.
- Multiple pads on one screen (e.g. move + aim); retrieve them all with
TouchPad.getPads(). - Optional built-in
"simple"theme, or style it yourself via CSS classes.
Drop the file into your project and include it:
<script src="TouchPad.js"></script>
Or load it as an AMD module named TouchPad.
var pad = TouchPad({ parent: document.querySelector('#controls'), // defaults to <body> pot: { radius: 75, theme: 'simple' }, // outer base stick: { radius: 40, theme: 'simple' }, // draggable knob cb: { start: function (s) { /* touch down */ }, move: function (s) { /* dragging */ }, end: function (s) { /* released */ }, }, });
Each callback receives a state object:
| Field | Meaning |
|---|---|
x, y |
Stick offset from center, in pixels |
power |
Distance from center as a ratio, 0–1 |
rads |
Stick angle in radians |
degs |
Stick angle in degrees |
On release the stick recenters automatically and end fires with a zeroed state.
The pot and stick get the CSS classes tc_pot and tc_stick. Either use the bundled theme: 'simple' preset or leave the theme off and style those classes yourself.
| Call | Description |
|---|---|
TouchPad(opts) |
Create and mount a touchpad, returns the instance |
instance.show() / instance.hide() |
Toggle visibility |
instance.centerStick() |
Recenter the stick programmatically |
instance.getStickAngle('rads'|'degs') |
Current angle |
instance.getPower() |
Current power, 0–1 |
TouchPad.getPads() |
Array of all created touchpads |
MIT — see LICENSE.