path: root/files/zh-cn/games/techniques/controls_gamepad_api/index.html

---
title: 使用 Gamepad API 实现控制
slug: Games/Techniques/Controls_Gamepad_API
translation_of: Games/Techniques/Controls_Gamepad_API
---
<div>{{GamesSidebar}}</div><p class="summary">这篇文章着眼于使用 Gamepad API 为网页游戏实现一个有效的跨浏览器控制系统，可以让你使用端游控制器来控制你的网页游戏。Hungry Fridge，就是 <a href="http://enclavegames.com/">Enclave Games</a> 以此制作的游戏。</p>

<h2 id="网页游戏的控制">网页游戏的控制</h2>

<p>在历史上，在连接主机(console)的电视上玩游戏和在电脑(PC)上玩游戏是两种完全不一样的体验，最大的区别就是它们的控制方式。后来，额外的驱动程序和插件让我们能够使用主机控制器来游玩电脑端的游戏--不论是本地游戏，还是运行在浏览器中的游戏。 到现在的 HTML5 时代，我们终于有了 <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> ，让我们能够在不安装任何插件的情况下，可以使用控制器来游玩基于浏览器的游戏。Gamepad API 通过提供一个接口公开按钮的按下和坐标的变化来实现这一点，在 JavaScript 中我们可以用这些变化来处理输入。这对于网页游戏来说是非常棒的特性。</p>

<p><img alt="gamepad-controls" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img01.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>

<h2 id="API_状态与浏览器支持">API 状态与浏览器支持</h2>

<p><a href="http://www.w3.org/TR/gamepad/">Gamepad API</a> 在 W3C 的进程中仍然还是工作草案的状态，这意味着它的实现方法可能还会出现变动，但是就目前来说<a href="http://caniuse.com/gamepad">浏览器的支持性</a>相当不错。Firefox 29+ 和 Chrome 35+ 对其支持得非常好。Opera 在版本 22+ 对 API 进行了支持 (一点也不奇怪，因为他们现在使用 Chrome 的引擎了。) 并且微软最近在 Edge 中对 API 实现了支持，也就是说四大主流浏览器现在都支持 Gamepad API。</p>

<h2 id="哪种控制器最好？">哪种控制器最好？</h2>

<p><img alt="gamepad devices" src="http://end3r.com/tmp/gamepad/devices.jpg" style="display: block; height: 450px; margin: 0px auto; width: 600px;"></p>

<p>目前最受欢迎的控制器是来自 XBox 360、XBox One、PS3 和 PS4 的 — 它们经受过时间的检验，并且在浏览器跨 Windows 与 Mac OS 平台中对  Gamepad API 的实现中工作良好。</p>

<p>还有一些其他各种各样不同布局的控制器或多或少的支持跨浏览器的实现。本文中讨论的代码使用了一些控制器进行测试，但是笔者比较喜欢的配置是：无线 XBox 360 控制器和 Mac OS X 平台的 Firefox 浏览器。</p>

<h2 id="实例分析：Hungry_Fridge">实例分析：Hungry Fridge</h2>

<p><a href="https://github.com/blog/1674-github-game-off-ii">GitHub Game Off II</a> 比赛举行于2013年11月，<a href="http://enclavegames.com/">Enclave Games</a> 决定参加比赛。比赛的主题为“改变”(change)，所以他们提交了这样一个游戏——你需要通过点击来喂食饥饿的冰箱健康的食物 (苹果、萝卜、莴苣) 并避开“坏”的食物 (啤酒、汉堡、披萨) 。其中会有倒计时会改变接下来几秒内冰箱想吃的东西，所以你又要小心动作又要块。你可以<a href="http://enclavegames.com/games/hungry-fridge/">在这里尝试 Hungry Fridge</a>。</p>

<p><img alt="hungryfridge-mainmenu" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img02.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>

<p>第二个隐藏的“改变”的实现是可以从单纯静态的冰箱改变成涡轮驱动、射击和吞食的机器能力。当你连接控制器后，游戏会有很明显的改变 (饥饿冰箱会变成超级涡轮的饥饿冰箱) 并且你可以使用 Gamepad API 来控制装甲冰箱。你需要击落食物但是你仍然需要找到冰箱目前想吃的食物，否则你会失去能量。</p>

<p><img alt="hungryfridge-howtoplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img03.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>

<p>游戏封装了两种截然不同的“变化”(change) ——好食物对坏食物，与移动端对桌面端。</p>

<p><img alt="hungryfridge-gameplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img04.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>

<h2 id="示例">示例</h2>

<p>Game API 的动作展示与JavaScript的源代码公布是在完整版的 Hungry Fridge 构建之后才开始的，然后据此创建了一个 <a href="https://end3r.github.io/Gamepad-API-Content-Kit/demo/demo.html">简单的示例</a>。部分 <a href="https://end3r.github.io/Gamepad-API-Content-Kit/">Gamepad API Content Kit</a> 在Github 上供你分析代码并研究其如何工作。</p>

<p><img alt="Hungry Fridge demo using Gamepad API" src="http://end3r.com/tmp/gamepad/super-turbo.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>

<p>以下讨论的代码来自于完整的 Hungry Fridge 游戏中，除了原代码需要 <code>turbo</code> 变量来决定是否启动“超级涡轮模式”以外几乎一模一样。此代码可以独立运行，就算不连接控制器也可以。</p>

<div class="note">
<p><strong>注：</strong>一个彩蛋：点击界面右上角的控制器图标有个隐藏选项——不连接控制器也能启动“超级涡轮模式” 。你可以使用键盘上的 A 和 D 控制左右旋转，W 射击，方向键移动。</p>
</div>

<h2 id="实现方法">实现方法</h2>

<p>使用Gamepad API时有两个重要的事件—— <code>gamepadconnected</code>  和 <code>gamepaddisconnected</code>。 前者将于浏览器侦测到新控制器连接时触发；而后者则是断开连接 (不管是物理断开还是无响应了) 的时候触发。在示例中 <code>gamepadAPI</code> 对象通常存储着所有关于 API 的东西：</p>

<pre class="brush: js"><code>var gamepadAPI = {
  controller: {},
  turbo: false,
  connect: function() {},
  disconnect: function() {},
  update: function() {},
  buttonPressed: function() {},
  buttons: [],
  buttonsCache: [],
  buttonsStatus: [],
  axesStatus: []
};</code></pre>

<p>数组 <code>buttons</code> 存储着 XBox 360 控制器的按键布局button layout:</p>

<pre class="brush: js"><code>buttons: [
  'DPad-Up','DPad-Down','DPad-Left','DPad-Right',
  'Start','Back','Axis-Left','Axis-Right',
  'LB','RB','Power','A','B','X','Y',
],</code></pre>

<p>这可能和例如 PS3 控制器 (或者其他没名字的通用控制器) 等其他控制器有所不同，所以你需要注意并不要假设你期望的布局和你真正使用的控制器布局是一样。接下来我们设置两个事件侦听器来获取数据：</p>

<pre class="brush: js"><code>window.addEventListener("gamepadconnected", gamepadAPI.connect);
window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code></pre>

<p>由于安全策略，你必须先与控制器产生交互才能触发当前显示页面的事件。如果 API 在没有接收到用户交互的时候工作，那它可能会在不知情的情况下被用来识别指纹。</p>

<p>两个函数都十分简单：</p>

<pre class="brush: js"><code>connect: function(evt) {
  gamepadAPI.controller = evt.gamepad;
  gamepadAPI.turbo = true;
  console.log('控制器已连接。');
},</code></pre>

<p>函数 <code>connect()</code> 接受一个事件作为参数，并将其中的 <code>gamepad</code> 对象分配给 <code>gamepadAPI.controller</code> 变量。我们在这个游戏中只使用一个控制器，所以这个变量是一个单独的对象而不是控制器的数组。然后我们设置  <code>turbo</code> 属性为 <code>true</code>。 (这个可以直接用 <code>gamepad.connected</code> 实现，但我们想单独设置一个变量来控制“涡轮模式”而不需要连接控制器，原因已在前面说明过了。)</p>

<pre class="brush: js"><code>disconnect: function(evt) {
  gamepadAPI.turbo = false;
  delete gamepadAPI.controller;
  console.log('控制器已断开。');
},</code></pre>

<p>函数 <code>disconnect</code> 设置 <code>gamepad.turbo</code> 属性为 <code>false</code> 并移除存储着 <code>gamepad</code> 对象的变量。</p>

<h3 id="Gamepad_对象">Gamepad 对象</h3>

<p>对象 <code>gamepad</code> 中有包含了许多有用的信息，其中就包括按钮和坐标轴的状态等重要信息：</p>

<ul>
 <li><code>id</code>: 一个包含关于控制器信息的字符串。</li>
 <li><code>index</code>: 一个为已连接的设备分配的唯一标识。</li>
 <li><code>connected</code>: 一个布尔变量，<code>true</code> 表示设备已连接。</li>
 <li><code>mapping</code>: 键位的布局类型；现在只有 <code>standard</code> 是唯一可用的值。</li>
 <li><code>axes</code>: 每一个坐标轴的状态。表示为存储浮点值的数组。</li>
 <li><code>buttons</code> : 每个按钮的状态，表示为一个 <code>GamepadButton</code> 对象，其包含 <code>pressed</code> 和 <code>value</code> 属性。</li>
</ul>

<p>变量 <code>index</code> 在我们连接了多个控制器时非常有用，我们可以用此来区分它们的操作——例如我们有一个需要连接两个控制器的双人游戏。</p>

<h3 id="查询控制器对象">查询控制器对象</h3>

<p>除了 <code>connect()</code> 和 <code>disconnect()</code> ，<code>gamepadAPI</code> 对象中还有另外两个方法：<code>update()</code> 和 <code>buttonPressed()</code>。<code>update()</code> 会在游戏循环的每一帧中执行，来更新 gamepad 对象的实时状态：</p>

<pre class="brush: js"><code>update: function() {
  // 清除按钮缓存
  gamepadAPI.buttonsCache = [];
  // 从上一帧中移动按钮状态到缓存中
  for(var k=0; k&lt;gamepadAPI.buttonsStatus.length; k++) {
    gamepadAPI.buttonsCache[k] = gamepadAPI.buttonsStatus[k];
  }
  // 清除按钮状态
  gamepadAPI.buttonsStatus = [];
  // 获取 gamepad 对象
  var c = gamepadAPI.controller || {};

  // 遍历按键，并将按下的按钮加到数组中
  var pressed = [];
  if(c.buttons) {
    for(var b=0,t=c.buttons.length; b&lt;t; b++) {
      if(c.buttons[b].pressed) {
        pressed.push(gamepadAPI.buttons[b]);
      }
    }
  }
  // 遍历坐标值并加到数组中
  var axes = [];
  if(c.axes) {
    for(var a=0,x=c.axes.length; a&lt;x; a++) {
      axes.push(c.axes[a].toFixed(2));
    }
  }
  // 分配接收到的值
  gamepadAPI.axesStatus = axes;
  gamepadAPI.buttonsStatus = pressed;
  // 返回按钮以便调试
  return pressed;
},</code></pre>

<p>在每一帧上，<code>update()</code> 都会将上一帧的按钮状态保存至数组 <code>buttonsCache</code> 中，并在 <code>gamepadAPI.controller</code> 对象提取出新的状态信息。然后它就能轮询按钮和坐标值并获得它们的实时状态和值。</p>

<h3 id="监测按钮按下">监测按钮按下</h3>

<p>方法 <code>buttonPressed()</code> 也位于主游戏循环中来监听按钮的按下。它有两个参数——我们想要监听的按钮和 (可选) 用来告诉游戏接收的按键是（从之前就）被按住了的。没了它你需要松开并再按一次按钮才能得到想要的结果。</p>

<pre class="brush: js"><code>buttonPressed: function(button, hold) {
  var newPress = false;
  // 轮询按下的按钮
  for(var i=0,s=gamepadAPI.buttonsStatus.length; i&lt;s; i++) {
    // 如果我们找到我们想要的按钮
    if(gamepadAPI.buttonsStatus[i] == button) {
      // 设置布尔变量（newPress）为 true
      newPress = true;
      // 如果我们想检查按住还是单次按下
      if(!hold) {
        // 从上一帧轮询缓存状态
        for(var j=0,p=gamepadAPI.buttonsCache.length; j&lt;p; j++) {
          // 如果按钮（之前）已经被按下了则忽略新的按下状态
          if(gamepadAPI.buttonsCache[j] == button) {
            newPress = false;
          }
        }
      }
    }
  }
  return newPress;
},</code></pre>

<p>在一个按钮中有两种动作：单次按下和按住。变量 <code>newPress</code> 布尔变量将会指出这个是不是一个按钮新的按下操作。下次我们再轮询已按下按钮的数组——如果有按钮是我们正在找的，那么设 <code>newPress</code> 变量为 <code>true</code> 。通过检查本次按下是不是新按下的，就能得出玩家是不是按住按钮了。我们从游戏循环中的上一帧轮询按钮的缓存状态，如果我们找到了，就说明按钮被按住了，所以就不是新的按下。最后 <code>newPress</code> 变量被返回。函数 <code>buttonPressed</code> 通常这样来更新游戏循环：</p>

<pre class="brush: js"><code>if(gamepadAPI.turbo) {
  if(gamepadAPI.buttonPressed('A','hold')) {
    this.turbo_fire();
  }
  if(gamepadAPI.buttonPressed('B')) {
    this.managePause();
  }
}</code></pre>

<p>如果 <code>gamepadAPI.turbo</code> 为 <code>true</code> 并有按钮被按下(或被按住)，我们就会为其分配恰当的操作。在本例中，按下或按住 <code>A</code> 开火，按下 <code>B</code> 暂停游戏。</p>

<h3 id="坐标阈值">坐标阈值</h3>

<p>按钮只有两种状态：<code>0</code> 或 <code>1</code>，但是摇杆可以有许多不同的值——他们在 <code>X</code> 和 <code>Y</code> 轴上都有一个范围为 <code>-1</code> 到 <code>1</code> 的浮点值。</p>

<p><img alt="axis threshold" src="http://end3r.com/tmp/gamepad/axis-threshold.png" style="display: block; height: 300px; margin: 0px auto; width: 400px;"></p>

<p>控制器放在一边不活动时轴值也可能有一定波动 (get dusty) ，这也就是说通过判断等于绝对的 -1 或 1 来可能是会有问题的。因此对此最好是给轴值设定一个阈值来触发生效。比如说，“冰箱坦克”仅会在 <code>X</code> 值大于 <code>0.5</code> 的时候向右转：</p>

<pre><code>if(gamepadAPI.axesStatus[0].x &gt; 0.5) {
  this.player.angle += 3;
  this.turret.angle += 3;
}</code></pre>

<p>即使我们稍微误推摇杆或者摇杆没有弹回原始位置，“冰箱坦克”也不会意外转向。</p>

<h2 id="规范更新">规范更新</h2>

<p>经过长达一年多的规范化，W3C Gamepaf API 于2015年4月更新了规范 (<a href="https://w3c.github.io/gamepad/">查看最新信息</a>)。更新的改动并不是很大，但是我们最好了解一下到底更新了些什么—— 以下为更新。</p>

<h3 id="获取控制器">获取控制器</h3>

<p>{{domxref("Naviagator.getGamepads()")}} 方法已用<a href="https://w3c.github.io/gamepad/#navigator-interface-extension">更长的说明和示例代码</a>更新。现在控制器数组的长度必须为 <code>n+1</code> ( <code>n</code> 是已连接设备的数量) —— 当设备连接且其有索引 1，数组长度为 2，那么它将会是这样： <code>[null, [object Gamepad]]</code>。如果设备被断开或不可用的话，值将被设为 <code>null</code>。</p>

<h3 id="映射标准">映射标准</h3>

<p>布局类型现在是一个可枚举的对象而不是字符串：</p>

<pre>enum GamepadMappingType {
    "",
    "standard"
};</pre>

<p>此枚举中定义了已知的控制器映射集。目前只有 <code>standard</code> 布局可用，但是未来可能会有新的布局。如果布局未知，那么将会是空字符串。</p>

<h3 id="事件">事件</h3>

<p>除了当前可用的 <code>gamepadconnected</code> 和 <code>gamepaddisconnected</code> 事件，其实还有其它事件也曾在规范中，但它们因为不是非常的有用所以被移出了规范。相关讨论仍在进行中，关于它们是否应该恢复规范，以及以什么形式恢复。</p>

<h2 id="总结">总结</h2>

<p>Gamepad API 非常易于开发。现在它比以往更容易向浏览器提供游戏主机的体验而不需要任何插件。你可以直接在你的浏览器中游玩完整的 <a href="http://enclavegames.com/games/hungry-fridge/">Hungry Fridge</a> 游戏。你可以从 <a href="https://marketplace.firefox.com/app/hungry-fridge">Firefox Marketplace</a> 中安装，或者可以在 <a href="https://github.com/EnclaveGames/Hungry-Fridge">Gamepad API Content Kit</a> 中查看示例源代码。</p>