🦖 GamepadZilla la la!

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

🎮 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-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! 🎸

bun 🍚

bun run build

nodejs

npm install
npm run build

container 🐋

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-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`	`gpz-joy` `gpz-btn`	keyboard to emulate (follows anti-clockwise button pattern like:`WASD`)

This project is licensed under GNU Affero General Public License 3.0, please read the LICENSE file.

About

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

https://rodrigodornelles.github.io/npm-gamepadzilla/

GNU Affero General Public License v3.0

Languages

Language:TypeScript 100.0%