非常规控制

在电视屏幕上玩游戏并不一定总是通过游戏机进行。桌面电脑上已经存在 Gamepad API，因此我们可以模拟这种体验，但我们可以做得更多。现代智能电视可以处理 HTML 游戏，因为它们内置了浏览器，可以作为游戏平台使用。智能电视配备了遥控器，如果您知道如何操作，可以使用它来控制您的游戏。

Captain Rogers: Battle at Andromeda 的最早演示已经调整为可在大型电视上运行。有趣的是，第一款 Captain Rogers 游戏（Asteroid Belt of Sirius）针对运行 Firefox OS 的低端、小屏幕、廉价智能手机进行了优化，因此您可以看到三年内发生的巨大变化 - 您可以在我们的 Building games for Firefox OS TV Hacks 文章中阅读整个故事。

使用电视遥控器控制游戏最终变得出奇地容易，因为控制器触发的事件模拟了传统的键盘键。Captain Rogers 已经实现了键盘控制

this.cursors = this.input.keyboard.createCursorKeys();
// …
if (this.cursors.right.isDown) {
  // move player right
}

它开箱即用。光标是键盘上的四个方向箭头键，这些键与遥控器上的箭头键具有完全相同的键码。您如何知道其他遥控器键的代码？您可以在控制台中打印响应以检查它们

window.addEventListener(
  "keydown",
  (event) => {
    console.log(event.keyCode);
  },
  true,
);

在遥控器上按下的每个键都会在控制台中显示其键码。如果您使用的是运行 Firefox OS 的松下电视，还可以查看下面这个方便的速查表

您可以添加在状态之间移动、开始新游戏、控制飞船并炸毁东西、暂停和重新开始游戏。所有需要做的就是检查按键

window.addEventListener(
  "keydown",
  (event) => {
    switch (event.keyCode) {
      case 8: {
        // Pause the game
        break;
      }
      case 588: {
        // Detonate bomb
        break;
      }
      // …
    }
  },
  true,
);

您可以通过观看 此视频 来查看它。

您是否曾经想过只用双手控制游戏？这可以使用 Leap Motion 来实现，它是一款用于游戏和应用程序的沉浸式控制器。

由于与 VR 头显的出色集成，Leapmotion 越来越受欢迎 - 在配备了 Leap Motion 的 Oculus Rift 上演示 Rainbow Membrane 被评为全球各地参加会议的 JavaScript 开发人员投票选出的最佳 WebVR 体验之一。

除了非常适合虚拟界面之外，它还可以用于休闲的 2D 游戏体验。仅用双手完成所有操作将非常困难，但对于简单的 Captain Roger's 游戏（操纵飞船并射击子弹）来说是完全可以做到的。

要在您的计算机上使用 Leap Motion，您首先需要按照 docs.ultraleap.com 中的步骤进行安装。安装完毕并将控制器连接到您的计算机后，我们可以继续在我们的 小型演示 中实现支持。首先，我们添加一个 <script> 标签，其 url 指向 此文件，并在关闭的 </body> 标签之前添加 <div id="output"></div> 以输出诊断信息。

我们需要一些辅助变量才能使我们的代码正常工作 - 一个用于计算弧度到角度的变量，两个用于保存我们的手在控制器上方倾斜的水平和垂直角度的变量，一个用于该倾斜的阈值，以及一个用于我们手的抓取状态的变量。接下来，我们在所有键盘和鼠标事件监听器之后添加这些行，但在 draw 方法之前

const toDegrees = 1 / (Math.PI / 180);
let horizontalDegree = 0;
let verticalDegree = 0;
const degreeThreshold = 30;
let grabStrength = 0;

紧随其后，我们使用 Leap 的 loop 方法来获取每一帧中 hand 变量中保存的信息

Leap.loop({
  hand(hand) {
    horizontalDegree = Math.round(hand.roll() * toDegrees);
    verticalDegree = Math.round(hand.pitch() * toDegrees);
    grabStrength = hand.grabStrength;
    output.innerText = `Leap Motion:
  roll: ${horizontalDegree}°
  pitch: ${verticalDegree}°
  strength: ${grabStrength}
`;
  },
});

上面的代码正在计算和分配 horizontalDegree、verticalDegree 和 grabStrength 值，我们将在稍后使用这些值，并将它们输出到 HTML 中，以便我们可以查看实际的值。当这些变量更新后，我们可以在 draw() 函数中使用它们来移动飞船

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // …

  if (horizontalDegree > degreeThreshold) {
    playerX -= 5;
  } else if (horizontalDegree < -degreeThreshold) {
    playerX += 5;
  }
  if (verticalDegree > degreeThreshold) {
    playerY += 5;
  } else if (verticalDegree < -degreeThreshold) {
    playerY -= 5;
  }
  if (grabStrength === 1) {
    alert("BOOM!");
  }

  ctx.drawImage(img, playerX, playerY);
  requestAnimationFrame(draw);
}

如果 horizontalDegree 值大于我们的 degreeThreshold（在本例中为 30），则飞船将在每一帧中向左移动 5 像素。如果其值小于阈值的负值，则飞船向右移动。向上/向下移动以相同的方式工作。最后一个值是 grabStrength，它是一个介于 0 和 1 之间的浮点数 - 当达到 1（拳头完全握紧）时，我们将显示一个警报（在完整的游戏中，这可以用射击逻辑替换）。

就是这样 - 您需要在 JavaScript 中使用 Leap Motion 示例所需的一切都在这里。您可以探索 hand 的属性并在您的游戏中实现任何您喜欢的行为。

使用多普勒效应进行运动感应 上有一篇非常有趣的文章，它将挥手和使用麦克风结合在一起。这一次是关于检测声波从物体上反弹并返回麦克风。

如果反弹声音的频率与原始声音相比发生偏移，那么我们可以检测到该物体的运动。这样，我们可以仅使用内置麦克风来检测手部动作！

这可以使用 Daniel Rapp 创建的一个小型库 来完成 - 它可以像计算两个频率之间的差异一样简单

doppler.init((bandwidth) => {
  const diff = bandwidth.left - bandwidth.right;
});

diff 将是手的初始位置和最终位置之间的差异。

这种方法不会给我们使用 Gamepad 甚至 Leap Motion 的完全灵活性，但它绝对是一个有趣且非常规的替代方案。您可以使用它来免提滚动页面或弹奏特雷门琴，但如果实施得当，它也足以让飞船在屏幕上上下移动。

如果您想彻底疯狂，可以使用 MaKey MaKey，这是一个可以将任何东西变成控制器的板 - 它都是关于将真实世界中的导电物体连接到计算机并将其用作触控界面。

查看 香蕉钢琴视频，并务必访问 快速入门指南 以获取所有必要的信息。

甚至还有一个 受 MaKey MaKey 板启发的 Cylon.js 支持的 Makey Button 功能，因此您可以将流行的 Cylon 机器人框架用于您使用 Arduino 或 Raspberry Pi 进行的实验。连接电路板并使用它们可能看起来像这样

const Cylon = require("cylon");
Cylon.robot({
  connections: {
    arduino: { adaptor: "firmata", port: "/dev/ttyACM0" },
  },
  devices: {
    makey: { driver: "makey-button", pin: 2 },
  },
  work(my) {
    my.makey.on("push", () => {
      console.log("Button pushed!");
    });
  },
}).start();

正如描述所说：此 GPIO 驱动程序允许您将一个 10 MOhm 电阻器连接到 Arduino 或 Raspberry Pi 上的数字引脚，以使用香蕉、粘土或可绘制电路来控制您的机器人。

希望您喜欢这些实验 - 如果您还有其他认为可能让其他人感兴趣的实验，请随时在此处添加详细信息。

请记住：玩得开心制作游戏！

• 上一个
• 概述：实现游戏控制机制