Revision 513519 of GamepadButton

<p>{{APIRef()}}</p>
<div class="summary">
 <p>The GamepadButton Interface of the Gamepad API defines an individual button of a gamepad or other controller, allowing access to the current state of different types of button available on the control device.</p>
</div>
<p>A <code>GamepadButton</code> object is returned by querying any value of the array returned by the <code>buttons</code> property of the {{ domxref("Gamepad") }} interface.</p>
<div class="note">
 <p><strong>Note</strong>: this is the case in Firefox Gecko 28 and later; Chrome and earlier Firefox versions still return an array of double values when this property is accesssed.</p>
</div>
<h2 id="Properties">Properties</h2>
<dl>
 <dt>
  {{ domxref("GamepadButton.value") }} {{readonlyInline}}</dt>
 <dd>
  A double value used to enable represent the current state of analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0 —1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.</dd>
 <dt>
  {{ domxref("GamepadButton.pressed") }} {{readonlyInline}}</dt>
 <dd>
  A boolean indicating whether the button is currently pressed (<code>true</code>) or unpressed (<code>false</code>).</dd>
</dl>
<h2 id="Example">Example</h2>
<p>The following code is taken from my Gamepad API button demo (you can <a href="https://chrisdavidmills.github.io/gamepad-buttons/">view the demo live</a>, and <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">find the source code</a> on Github.) Note the code fork — in Chrome {{ domxref("Navigator.getGamepads") }} needs a <code>webkit</code> prefix and the button values are stores as an array of double values, whereas in Firefox {{ domxref("Navigator.getGamepads") }} doesn't need a prefix, and the button values are stored as an array of {{ domxref("GamepadButton") }} objects; it is the {{ domxref("GamepadButton.value") }} or {{ domxref("GamepadButton.pressed") }} properties of these we need to access, depending on what type of buttons they are. In this simple example I've just allowed either.</p>
<pre>
function gameLoop() {
&nbsp; if(navigator.webkitGetGamepads) {
&nbsp;&nbsp;&nbsp; var gp = navigator.webkitGetGamepads()[0];

&nbsp;&nbsp;&nbsp; if(gp.buttons[0] == 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b--;
&nbsp;&nbsp;&nbsp; } else if(gp.buttons[1] == 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a++;
&nbsp;&nbsp;&nbsp; } else if(gp.buttons[2] == 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b++;
&nbsp;&nbsp;&nbsp; } else if(gp.buttons[3] == 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a--;
&nbsp;&nbsp;&nbsp; }
&nbsp; } else {
&nbsp;&nbsp;&nbsp; var gp = navigator.getGamepads()[0];

&nbsp;&nbsp;&nbsp; if(gp.buttons[0].value &gt; 0 || gp.buttons[0].pressed == true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b--;
&nbsp;&nbsp;&nbsp; } else if(gp.buttons[1].value &gt; 0 || gp.buttons[1].pressed == true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a++;
&nbsp;&nbsp;&nbsp; } else if(gp.buttons[2].value &gt; 0 || gp.buttons[2].pressed == true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b++;
&nbsp;&nbsp;&nbsp; } else if(gp.buttons[3].value &gt; 0 || gp.buttons[3].pressed == true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a--;
&nbsp;&nbsp;&nbsp; }
&nbsp; }

&nbsp; ball.style.left = a*2 + "px";
&nbsp; ball.style.top = b*2 + "px";

&nbsp; var start = rAF(gameLoop);
};</pre>
<h2 id="Specifications">Specifications</h2>
<p>{{page("/en-US/docs/Gamepad","Specifications")}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{page("/en-US/docs/Gamepad","Browser_compatibility")}}</p>
<h2 id="See_also">See also</h2>
<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>