🦖 GamepadZilla la la!
A plug-and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. No scripting required.
source code: https://github.com/rodrigodornelles/npm-gamepadzilla
- 🦍 demo website: https://rodrigodornelles.github.io/npm-gamepadzilla
| 🎮 Preview | 🕹️ Features |
|---|---|
 |
gpz is fast. (no DOM manpulation) gpz is easy. (no Javascript needed, use only html5 attributes) gpz is pure. (made with only typescript without dependencies) gpz hates the van's old-man! |
showcase
post your open-source game using gamepadzilla!
| game | stack | source |
|---|---|---|
| Coco Battle Royale 2 | C, Assembly 6502, WebAssembly, Html, gampadzila.js | repo |
How to use
- import library with npm or cdn. 🚐
- create html5 canvas elements with class
gpz-joyorgpz-btnand configure data attributes.
<!DOCTYPE html>
<html>
<head>
<script src='https://cdn.jsdelivr.net/npm/gamepadzilla@1/dist/gamepadzilla.js'></script>
</head>
<body style="touch-action: none">
<canvas
class="gpz-joy"
data-gpz-bind="ArrowUp ArrowLeft ArrowDown ArrowRight">
</canvas>
<canvas
class="gpz-btn"
data-gpz-bind="KeyF">
</canvas>
</body>
</html>How to build
if you intend to contribute, let's rock! 🎸
bun 🍚
bun run buildnodejs 
npm install
npm run buildcontainer 🐋
podman run --rm -v $(pwd):/app -w /app -it oven/bun bun run builddocker run --rm -v $(pwd):/app -w /app -it ove/bun bun run buildCheatsheet
main classes
| html5 class | description |
|---|---|
gpz-dpad |
virtual digital pad for directional input. |
gpz-joy |
virtual stick or gamepad analog for directional input. |
gpz-btn |
virtual circle buttons with various console layouts. |
data attributes
| html5 attribute | html5 class | description |
|---|---|---|
data-gpz-bind |
* | keyboard to emulate (follows anti-clockwise button pattern like:WASD) |
data-gpz-vibrate |
* | vibration animation when pressed for feedback |
data-gpz-color |
gpz-dpadgpz-btn
|
button colors when is not pressed |
data-gpz-color-action |
gpz-dpadgpz-btn
|
buttons colors when is pressed |
data-gpz-size |
gpz-dpad |
size of shapes elements |
data-gpz-offset |
gpz-dpad |
size of gap in elements |
This project is licensed under GNU Affero General Public License 3.0, please read the LICENSE file.