Adding Nintendo Joycon Support to Your Website with the Gamepad API
After playing Skyrim on the Nintendo Switch for a few hours, I found myself sleepy eyed and yawning. After putting my Switch back in its dock, I started browsing Twitter mindlessly until I stumbled upon something interesting…
A software developer I follow on Twitter had connected the Nintendo Switch Joycon controller to his laptop.
The replies to the tweet were filled with developers talking about how they got the controller working on their website with the “Gamepad API”.
The Gamepad API is something I’ve heard of before but never took the time to investigate. The concept of developing HTML5 games with support for major console controllers seems like a big oversight for a majority of software developers. Let’s fix that.
Quick Glance
“The Gamepad API is a way for developers and designers to access and use gamepads and other game controllers.” — MDN Web Docs: Using the Gamepad API
Connecting the Joycon
To connect the Joycon to your computer, make sure Bluetooth is enabled, and hold down the small indented button on the side that connects to the Switch. You’ll find it located between the SL and SR triggers, and next to the strip of four LEDs.
Each Joycon will need to be connected individually as shown below.
With one or both Joycons connected, you’re ready for action!
Detecting the Joycon from the Browser
The Gamepad API adds the window events gamepadconnected & gamepaddisconnected for detecting a change in gamepad status. As shown below, the Gamepad property contains a few values we are interested in.
index: The index of the gamepad in the list of all connected gamepad devices. (We will be connecting multiple gamepads later in the example)id: String of information describing the gamepadbutton: An array ofgamepadButtonobjects each describing the button’s index and its state (pressed / not pressed)axes: An array representing the controls with axes (analog thumb sticks) and their current direction.
Listening to Button Presses (The Fun Part)
For the sake of this example, I’ll be writing the code in a Google Chrome compatible way. At the time of writing this, Google Chrome has the highest browser usage share.
“Chrome does things differently here. Instead of constantly storing the gamepad’s latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the
Gamepadobject in code when it is available.” — MDN Web Doc: Using the Gamepad API
In the below code we call the function pollGamepads every 100ms to get the state of all gamepads currently connected.
We can take this one step further and loop through all gamepad objects and all gamepadButton objects, and check if their property pressed is true.
A Working Example
In the example below I connect both Joycons and map the buttons from 0 to 31. When a button or combination of buttons are pressed they are embedded in the HTML. Connect your Joycons and try it out!
For a downloadable version of this code visit my Github repo Joycon-fun.
