HTML and CSS Reference
In-Depth Information
The first setting will actually enable gamepad support and the second setting will give you access to events
that are not yet in the specification draft: gamepadbuttonup , gamepadbuttondown , and gamepadaxismove . It won't
be necessary to enable gamepad support in the near future as the Firefox browser from version 28 on will have this
enabled by default.
A second browser, Chrome, supports the Gamepad API from version 21 and above out of the box. This means
that you don't have to search for any flags in your browser settings. You can just plug in your device and it will work
right away.
Both browsers support the Gamepad API on the Windows, Mac, and Linux platforms. Other browsers, like Opera,
Safari, and Internet Explorer, have not implemented the API to date, but this may change in the near future.
Supported Devices
When you want to test the Gamepad API, it's important to know which devices are supported. There are plenty of
gamepads out there, and some have a better chance of working with the API than others. The best devices to use are
the wired XBox (older ones from XBox 360 and the newer ones from XBox One) and the Play Station (PS3 and PS4)
controllers, both on Windows; although I've tested the wireless XBox 360 and PS3 on Mac OS X and they all worked
just fine. The easiest way to see if it works is to visit a test web site with Gamepad API support and just plug in the
device to test it out.
Gamepad API Implementation
Now you know the browsers that have implemented Gamepad API and the supported devices that you can use, so
let's dive into code! The first thing to do will be to plug in the device and then detect its presence. The XBox wireless
device, for example, has a receiver that you plug into the USB port. After connecting the gamepad with the receiver,
you will be able to detect it in your browser.
Project Setup
Usually when you work on more complicated projects there's a strict structure of folders, such as separate ones for
JavaScript, CSS, and images. As you want to have a working demo quickly cooked up, let's just put everything in a
single HTML file.
Use you favorite text editor to create new text file and name it index.html . Populate it with the following HTML
code to have the starting structure of your basic test web site:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gamepad API Test</title>
</head>
<body>
<p>Check the browser's JavaScript console for output.</p>
<script>
/* The JavaScript code we'll write goes here */
</script>
</body>
</html>
 
Search WWH ::




Custom Search