https://github.com/RodrigoDornelles/npm-gamepadzilla
A plug-and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. No scripting required.
https://github.com/RodrigoDornelles/npm-gamepadzilla
gamepad gamepad-library gamepad-viewer gamepadlistener html5-canvas html5-game
Last synced: 2 days ago
JSON representation
A plug-and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. No scripting required.
- Host: GitHub
- URL: https://github.com/RodrigoDornelles/npm-gamepadzilla
- Owner: RodrigoDornelles
- License: agpl-3.0
- Created: 2023-11-04T13:20:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-02T02:35:54.000Z (4 months ago)
- Last Synced: 2025-04-30T16:05:16.940Z (9 days ago)
- Topics: gamepad, gamepad-library, gamepad-viewer, gamepadlistener, html5-canvas, html5-game
- Language: TypeScript
- Homepage: https://rodrigodornelles.github.io/npm-gamepadzilla/
- Size: 59.6 KB
- Stars: 50
- Watchers: 1
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-bun - Gamepadzilla - and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. _No scripting required._ (Extensions / Frameworks)
README
# :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.