如何在HTML5 JavaScript中检测Joy-Con的输入/动作控制

Question

我正在尝试创建一个使用Nintendo Switch Joy-Con和动作控制的HTML5 JavaScript游戏。问题是，当它们连接到我的PC时，我不知道如何检测Joy-Con的动作控制。

我已经使用Gamepad API实现了Xbox控制器、PS4和Joy-Con的按钮输入，但是能否使用Joy-Con的动作控制呢？

如果您想查看Gamepad API的代码，请参考以下代码（再次说明，我正在针对Joy-Con的动作控制）：

var haveEvents = 'ongamepadconnected' in window;
var controllers = {};

function connecthandler(e) {
  addgamepad(e.gamepad);
}

function addgamepad(gamepad) {
  controllers[gamepad.index] = gamepad;

  var d = document.createElement("div");
  d.setAttribute("id", "controller" + gamepad.index);

  var t = document.createElement("h1");
  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
  d.appendChild(t);

  var b = document.createElement("div");
  b.className = "buttons";
  for (var i = 0; i < gamepad.buttons.length; i++) {
    var e = document.createElement("span");
    e.className = "button";
    //e.id = "b" + i;
    e.innerHTML = i;
    b.appendChild(e);
  }

  d.appendChild(b);

  var a = document.createElement("div");
  a.className = "axes";

  for (var i = 0; i < gamepad.axes.length; i++) {
    var p = document.createElement("progress");
    p.className = "axis";
    //p.id = "a" + i;
    p.setAttribute("max", "2");
    p.setAttribute("value", "1");
    p.innerHTML = i;
    a.appendChild(p);
  }

  d.appendChild(a);

  var start = document.getElementById("start");
  if (start) {
    start.style.display = "none";
  }

  document.body.appendChild(d);
  requestAnimationFrame(updateStatus);
}

function disconnecthandler(e) {
  removegamepad(e.gamepad);
}

function removegamepad(gamepad) {
  var d = document.getElementById("controller" + gamepad.index);
  document.body.removeChild(d);
  delete controllers[gamepad.index];
}

function updateStatus() {
  if (!haveEvents) {
    scangamepads();
  }

  var i = 0;
  var j;

  for (j in controllers) {
    var controller = controllers[j];
    var d = document.getElementById("controller" + j);
    var buttons = d.getElementsByClassName("button");

    for (i = 0; i < controller.buttons.length; i++) {
      var b = buttons[i];
      var val = controller.buttons[i];
      var pressed = val == 1.0;
      if (typeof(val) == "object") {
        pressed = val.pressed;
        val = val.value;
      }

      var pct = Math.round(val * 100) + "%";
      b.style.backgroundSize = pct + " " + pct;

      if (pressed) {
        b.className = "button pressed";
        //Pressed down code here
      } else {
        b.className = "button";
        //Release button code here
      }
    }

    var axes = d.getElementsByClassName("axis");
    for (i = 0; i < controller.axes.length; i++) {
      var a = axes[i];
      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
      a.setAttribute("value", controller.axes[i] + 1);
    }
  }

  requestAnimationFrame(updateStatus);
}

function scangamepads() {
  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
  for (var i = 0; i < gamepads.length; i++) {
    if (gamepads[i]) {
      if (gamepads[i].index in controllers) {
        controllers[gamepads[i].index] = gamepads[i];
      } else {
        addgamepad(gamepads[i]);
      }
    }
  }
}


window.addEventListener("gamepadconnected", connecthandler);
window.addEventListener("gamepaddisconnected", disconnecthandler);

if (!haveEvents) {
  setInterval(scangamepads, 500);
}

参考此链接，了解如何使用游戏手柄API。

- user10976548

---

这个问题正在Meta上讨论。 - yivi

对于那些投票关闭的人：这个问题非常清晰，绝对不算过于宽泛。唯一可能会让它不清晰或过于宽泛的方式是如果评估这个问题的人没有目标技术方面的经验，此时他们不应该投票关闭。 - user4639281

你可能需要类似这样的东西：https://github.com/mfosse/JoyCon-Driver - Kaiido

@Kaiido 感谢您的建议，但我认为那不是JavaScript，所以并没有什么帮助。 - user10976548

如果操作系统本身不能将设备发送的信息映射成软件可以读取的格式，那么浏览器（也是一种软件）就无法访问这些信息。Web标准中有一个蓝牙API，但您需要自己完成整个映射过程，而且我认为您无法同时使用GamePad API。 - Kaiido

Answer 1

Wei Gao 上周在一个 React Knowledgeable 的聚会上 解释了这件事。

您可以通过 她的演示文稿 或 她的幻灯片 了解她是如何做到的。

您可以访问 讨论页面 获取更多信息。

- Zain