브라우저의 재발견

getGamepads

게임패드로 소방차 운전

해결하는 문제

체험 부스나 접근성 입력으로 게임패드를 쓰고 싶다.

USB·블루투스 게임패드의 스틱과 버튼을 매 순간 읽고, 패드에 진동을 돌려보냅니다.

체험하기

서버 의존도

서버 없이 브라우저 기본 기능만 씁니다.

브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요

데이터가 흐르는 길

무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.

들어오는 것스틱 축 값과 버튼 상태
브라우저가 하는 일매 프레임 getGamepads()로 읽기
나오는 것소방차 이동과 분사, 패드 진동

쓰는 브라우저 기술

Gamepad APIvibrationActuatorrequestAnimationFrame

라이브러리와 모델

외부 라이브러리 없이 브라우저 기본 기능만 씁니다.

바꿀 수 있는 옵션

  • 데드존: 스틱의 작은 흔들림 무시
  • 버튼 번호 배치
  • playEffect: 진동 세기와 길이

자주 막히는 곳

  • 버튼을 한 번 눌러야 브라우저가 패드를 인식한다
  • 제조사마다 버튼 번호가 다르다

이 능력으로 만들 수 있는 서비스

같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.

AI 서비스
  • 플레이 기록으로 반응 속도 분석
  • AI 상대 캐릭터
웹 서비스
  • 체험 부스 조작기
  • 재활 게임
피지컬 AI
  • 게임패드로 로봇·드론 조종 (웹이 중계)
  • 원격 센서 경보를 패드 진동으로 받기

넓히는 방법

  • 장애인용 스위치·발판 입력
  • 두 패드 협동 플레이
  • 패드로 발표 넘기기

지원 브라우저

PC 크롬·엣지된다
맥 사파리일부
안드로이드 크롬된다
아이폰 사파리일부

코딩 에이전트에게 줄 프롬프트

복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.

게임패드 왼쪽 스틱으로 소방차를 운전하고 A 버튼으로 물을 뿌려 불을 끄면 패드가 진동하는 게임을 Gamepad API로 만들어줘.

같은 분류의 능력

11 기기·센서에 속한 다른 능력입니다.

무료로 보는 것

체험 페이지, 한 줄 설명, 미리보기 영상

스킬팩 구성

full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md