{"id":18247826,"url":"https://github.com/npm-packages-collection/hud-gamepad","last_synced_at":"2025-07-18T13:34:21.506Z","repository":{"id":57269452,"uuid":"207384841","full_name":"npm-packages-collection/hud-gamepad","owner":"npm-packages-collection","description":"Do you need a HUD (Head Up Display) Gamepad for your Web Site / App...  ...Look No Further. This is your all in one solution.","archived":false,"fork":false,"pushed_at":"2025-03-20T02:57:35.000Z","size":7290,"stargazers_count":31,"open_issues_count":1,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-28T16:14:08.488Z","etag":null,"topics":["controller","gamepad","hud","keyboard","npm","npm-module","touch","webapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/npm-packages-collection.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["32teeth"],"buy_me_a_coffee":"32teeth"}},"created_at":"2019-09-09T19:08:58.000Z","updated_at":"2025-03-20T02:57:39.000Z","dependencies_parsed_at":"2024-10-29T21:03:49.767Z","dependency_job_id":null,"html_url":"https://github.com/npm-packages-collection/hud-gamepad","commit_stats":null,"previous_names":["npm-packages-collection/hud-gamepad"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/npm-packages-collection%2Fhud-gamepad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/npm-packages-collection%2Fhud-gamepad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/npm-packages-collection%2Fhud-gamepad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/npm-packages-collection%2Fhud-gamepad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/npm-packages-collection","download_url":"https://codeload.github.com/npm-packages-collection/hud-gamepad/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247202912,"owners_count":20900869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["controller","gamepad","hud","keyboard","npm","npm-module","touch","webapp"],"created_at":"2024-11-05T09:33:51.817Z","updated_at":"2025-04-04T15:31:44.284Z","avatar_url":"https://github.com/npm-packages-collection.png","language":"JavaScript","funding_links":["https://github.com/sponsors/32teeth","https://buymeacoffee.com/32teeth"],"categories":[],"sub_categories":[],"readme":"# HUD GamePad\n\u003e A fully customizable on-screen gamepad interface for HTML5 canvas applications\n\n```bash\nnpm i hud-gamepad\n```\n\n![HUD Game Pad](https://raw.githubusercontent.com/npm-packages-collection/hud-gamepad/refs/heads/main/assets/hud-gamepad.gif)\n\n### Quick Start\n```javascript\nimport { GamePad } from 'hud-gamepad';\n\n// Basic setup with joystick and default buttons\nGamePad.setup({\n  joystick: true\n});\n\n// Listen for state changes\nsetInterval(() =\u003e {\n  const state = GamePad.observe();\n  console.log(state);\n}, 16);\n```\n\n[Try the Live Demo](https://npm-packages-collection.github.io/hud-gamepad/example/)\n\n## Configuration Options\n\nThe GamePad is highly customizable with various options for buttons, layout, and behavior.\n\n| Property | Type | Values | Description | Example |\n|----------|------|--------|-------------|---------|\n| canvas | string | Canvas ID | Target canvas element (creates new if omitted) | `canvas: \"gamepad\"` |\n| joystick | boolean | true/false | Enable joystick (default: false) | `joystick: true` |\n| buttons | array | [{name, color, key}] | Button configurations | `buttons: [{name: \"a\", color: \"rgba(255,0,0,0.75)\"}]` |\n| layout | string | TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT | Controller position (default: BOTTOM_RIGHT) | `layout: \"BOTTOM_LEFT\"` |\n| start | boolean | true/false | Show start button (default: false) | `start: true` |\n| select | boolean | true/false | Show select button (default: false) | `select: true` |\n| debug | boolean | true/false | Show debug info (default: false) | `debug: true` |\n| trace | boolean | true/false | Show state trace (default: false) | `trace: true` |\n| hint | boolean | true/false | Show keyboard hints (default: false) | `hint: true` |\n| hidden | boolean | true/false | Hide gamepad (default: false) | `hidden: true` |\n\n### Button Configuration\nEach button can be customized with:\n```javascript\n{\n  name: \"a\",                    // Button label\n  color: \"rgba(255,0,0,0.75)\", // Button color\n  key: \"x\"                     // Keyboard binding\n}\n```\n\n### Example Configurations\n\n#### Basic Setup\n```javascript\nGamePad.setup();\n```\n\n#### Custom Button Configuration\n```javascript\nGamePad.setup({\n  buttons: [\n    { name: \"jump\", color: \"rgba(255,0,0,0.75)\", key: \"space\" },\n    { name: \"shoot\", color: \"rgba(0,255,0,0.75)\", key: \"x\" }\n  ],\n  joystick: true,\n  hint: true\n});\n```\n\n#### Full Configuration\n```javascript\nGamePad.setup({\n  canvas: \"gamepad\",\n  joystick: true,\n  start: true,\n  select: true,\n  debug: true,\n  trace: true,\n  hint: true,\n  layout: \"BOTTOM_RIGHT\",\n  buttons: [\n    { name: \"a\", color: \"rgba(255,0,0,0.75)\", key: \"x\" },\n    { name: \"b\", color: \"rgba(0,255,0,0.75)\", key: \"z\" },\n    { name: \"x\", color: \"rgba(0,0,255,0.75)\", key: \"a\" },\n    { name: \"y\", color: \"rgba(255,255,0,0.75)\", key: \"s\" }\n  ]\n});\n```\n\n### State Observation\nThe GamePad provides real-time state information through the observe method:\n\n```javascript\n// Get current state\nconst state = GamePad.observe();\n\n// State includes:\n// - Button states (0 or 1)\n// - Joystick axes (-1 to 1)\n// - Joystick directions (-1, 0, 1)\n\n// Example state object:\n{\n  \"a\": 0,          // Button a state\n  \"b\": 1,          // Button b state\n  \"x-axis\": 0.5,   // Joystick X position\n  \"y-axis\": -0.25, // Joystick Y position\n  \"x-dir\": 1,      // Joystick X direction\n  \"y-dir\": -1      // Joystick Y direction\n}\n```\n\n### Integration Example\n```javascript\n// Game loop integration\nfunction gameLoop() {\n  const state = GamePad.observe();\n\n  // Handle joystick\n  if (state[\"x-axis\"] !== 0 || state[\"y-axis\"] !== 0) {\n    player.move(state[\"x-axis\"], state[\"y-axis\"]);\n  }\n\n  // Handle buttons\n  if (state.a) {\n    player.jump();\n  }\n\n  requestAnimationFrame(gameLoop);\n}\n\ngameLoop();\n```\n\n### Example with Keyboard Support\n```javascript\nGamePad.setup({\n  canvas: \"controller\",\n  start: true,\n  select: true,\n  trace: true,\n  debug: true,\n  hint: true,\n  buttons: [\n    { name: \"a\", key: \"s\" },\n    { name: \"b\", key: \"a\" },\n    { name: \"x\", key: \"w\" },\n    { name: \"y\", key: \"q\" }\n  ]\n});\n```\n\n## Browser Support\n- Modern browsers with Canvas support\n- Touch events for mobile devices\n- Keyboard support for desktop\n\n## License\nISC License","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnpm-packages-collection%2Fhud-gamepad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnpm-packages-collection%2Fhud-gamepad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnpm-packages-collection%2Fhud-gamepad/lists"}