Awesome

:t-rex: GamepadZilla la la!

</div>

A plug-and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. No scripting required.

:octocat: source code: https://github.com/rodrigodornelles/npm-gamepadzilla
:gorilla: demo website: https://rodrigodornelles.github.io/npm-gamepadzilla

:video_game: Preview	:joystick: Features
	gpz is fast. (no DOM manpulation)<br/><br/>gpz is easy. (no Javascript needed, use only html5 attributes)<br/><br/>gpz is pure. (made with only typescript without dependencies)<br/><br/>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	:octocat:repo

How to use

import library with npm or cdn. :minibus:
create html5 canvas elements with class gpz-joy or gpz-btn and 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! :guitar:

bun :rice:

bun run build

nodejs :rage1:

npm install
npm run build

container :whale2:

podman run --rm -v $(pwd):/app -w /app  -it oven/bun bun run build

docker run --rm -v $(pwd):/app -w /app  -it ove/bun bun run build

Cheatsheet

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<br/>(follows anti-clockwise button pattern like:<kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd>)
`data-gpz-vibrate`	*	vibration animation when pressed for feedback
`data-gpz-color`	`gpz-dpad`<br/>`gpz-btn`	button colors when is not pressed
`data-gpz-color-action`	`gpz-dpad`<br/>`gpz-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.