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.