# :t-rex: GamepadZilla la la!
[](https://www.npmjs.com/package/gamepadzilla)
[](https://www.jsdelivr.com/package/npm/gamepadzilla)
[](https://codeclimate.com/github/RodrigoDornelles/npm-gamepadzilla/test_coverage)
[](https://codeclimate.com/github/RodrigoDornelles/npm-gamepadzilla/maintainability)
> A plug-and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. _No scripting required._
* :octocat: **source code:**
* :gorilla: **demo website:**
| :video_game: Preview | :joystick: Features |
| :------------------- | :------------------- |
[](https://rodrigodornelles.github.io/npm-gamepadzilla) | 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](https://psywave-games.github.io/coco-battle-royale-2) | C, Assembly 6502, WebAssembly, Html, gampadzila.js | [:octocat:repo](https://github.com/psywave-games/coco-battle-royale-2) |
| [Pong](https://pong.gamely.com.br)
[CapyBird](https://capybird.gamely.com.br)
[AsteroidsTV](https://asteroids.gamely.com.br)
| Lua, Gly Engine, WebAssembly, Html, gampadzila.js | [:octocat:repo](https://github.com/gamelly/gly-engine) |
## How to use
* import library with [npm](https://www.npmjs.com/package/gamepadzilla) or [cdn](https://www.jsdelivr.com/package/npm/gamepadzilla). :minibus:
* create html5 **canvas** elements with class `gpz-joy` or `gpz-btn` and configure data attributes.
```html
```
## How to build
if you intend to contribute, let's rock! :guitar:
### bun :rice: ###
```bash
bun run build
```
### nodejs :rage1: ###
```bash
npm install
npm run build
```
### container :whale2: ###
```bash
podman run --rm -v $(pwd):/app -w /app -it oven/bun bun run build
```
```bash
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. |
| `gpz-btn4` | virtual set of four action buttons for game controls. |
### 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 | feedback vibration when interact |
| `data-gpz-color` | `gpz-dpad`
`gpz-btn` | button colors when is not pressed |
| `data-gpz-color-action` | `gpz-dpad`
`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](LICENSE) file.