非傳統的控制方式

電視遙控器

在電視螢幕上玩遊戲不一定非要透過遊戲主機。現在已經有適用於桌面電腦的 Gamepad API，我們可以模仿這種體驗，但還可以做得更多。現代智慧電視可以處理 HTML 遊戲，因為它們內建了瀏覽器，可用作遊戲平臺。智慧電視通常附帶遙控器，如果你知道怎麼做，就可以用它來控制你的遊戲。

《Captain Rogers: Battle at Andromeda》最早的演示版經過調整，可以在巨大的電視上執行。有趣的是，第一款《Captain Rogers》遊戲（《Asteroid Belt of Sirius》）是為執行 Firefox OS 的低端、小螢幕、廉價智慧手機最佳化的，所以你可以看到三年帶來的變化——你可以在我們的 為 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);
});

遙控器上的每個按鍵按下都會在控制檯中顯示其鍵碼。如果你使用的是執行 Firefox OS 的松下電視，也可以參考下面的這個便捷的備忘單。

你可以新增在狀態之間切換、開始新遊戲、控制飛船並摧毀目標、暫停和重新開始遊戲。所有這些只需要檢查按鍵即可。

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

你可以透過觀看 此影片 來了解它的實際執行情況。

Leap Motion

你是否曾想過只用雙手來控制遊戲？這藉助 Leap Motion（一款沉浸式遊戲和應用控制器）來實現是可能的。

Leap Motion 因其與 VR 頭顯出色的整合而越來越受歡迎——在 Oculus Rift 上展示 Rainbow Membrane，並連線 Leap Motion，被全球會議上參觀演示展位的 JavaScript 開發者評為最佳 WebVR 體驗之一。

除了非常適合虛擬介面之外，它還可以用於休閒的 2D 遊戲體驗。僅憑雙手完成所有操作會非常困難，但對於簡單的 Captain Roger 遊戲玩法——操縱飛船和射擊——是完全可行的。

要讓 Leap Motion 在你的電腦上工作，你必須先按照 docs.ultraleap.com 上的步驟進行安裝。當所有安裝完成並且控制器已連線到你的電腦後，我們就可以繼續在我們的 小演示 中實現支援了。首先，我們新增一個指向 https://js.leapmotion.com/leap-0.6.4.min.js 的 url 的 <script> 標籤，並在關閉 </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 將是手部初始位置和最終位置之間的差值。

這種方法無法提供像遊戲手柄或 Leap Motion 那樣的完全靈活性，但它絕對是一種有趣、非傳統的替代方案。你可以用它來擴音滾動頁面，或者玩特雷門琴，但如果實現得當，它也足以使飛船在螢幕上上下移動。

Makey Makey

如果你想玩得更瘋狂，可以使用 Makey Makey，這是一個可以將任何東西變成控制器的板子——它就是將現實世界中的導電物體連線到電腦上，並將它們用作觸控介面。

觀看 香蕉鋼琴影片，並務必訪問 快速入門指南 以獲取所有所需資訊。

甚至還有一個 Cylon.js 支援的 Makey Button 功能，靈感來自 Makey Makey 板，所以你可以使用流行的 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 MΩ 的電阻連線到 Arduino 或 Raspberry Pi 的一個數字引腳上，用香蕉、黏土或可繪製電路來控制你的機器人。

總結

我希望你喜歡這些實驗——如果你有其他可能引起他人興趣的實驗，請隨時在此處新增它們的詳細資訊。

請記住：製作遊戲要開心！

• 上一頁
• 概述：實現遊戲控制機制