游戏手柄界面导航的实用方法？答案

【问题标题】：Pragmatic approach to interface navigation on gamepad?游戏手柄界面导航的实用方法？
【发布时间】：2018-04-16 01:40:37
【问题描述】：

我使用 html/react 构建了一个网页游戏。它在画布上，但界面只是 DOM 元素。用户已经可以使用控制器玩游戏，但我想设计一种方法来导航界面。

我在想也许只是创建代表界面项目的对象，并存储一个“活动”项目。如果submit 是活动选择

submit: { 
 up: 'password',
 right: 'new',
 down: null,
 left: null
}

我打算只执行 getElementById('activeElement') 并在元素上覆盖图像以表示它的选择。

困难的部分来了。我还需要检查被导航到的元素是否存在，如果不存在则有一个后备元素。可能是某种数组，以防后备需要后备。这似乎是可行的，虽然我不完全确定如何处理它。

看似糟糕的方法

我正在考虑的一种技术是为每个屏幕使用一个二维数组。例如，登录屏幕可能显示为

虽然它并不完全直观。如果您在new 上并想升级到password，则必须先按left。

当屏幕上有多个组件时，这会更加复杂。二维数组必须适应所有导航元素。这听起来很麻烦。

【问题讨论】：

界面是否在DOM中渲染？还是使用 canvas 元素渲染？
是的，我的界面存在于游戏画布层上方的DOM中

标签： javascript html reactjs navigation gamepad

【解决方案1】：

我喜欢你为每个元素使用路径的想法。对此进行扩展的一个想法是使用对象的双向链表矩阵。每个用户界面屏幕都可以由如下所示的数据结构表示

root - SideNav Button (sideNavBtn)
           |
        UserName (username)
           |
        Password (password)
           |
        Submit (submit)

其中- 和| 是双向链接。

例如password 可能看起来像：

{
  up: username
  down: submit,
  left: null,
  right: null,
  data: {
    displayName: 'Password',
    domNode: document.querySelector('.password')
  }
}

一旦你有了类似的数据结构，更新 UI 就是在箭头键 keyDown 事件触发时从数据结构中的当前节点向上、向下、向左或向右移动。移动到矩阵中新的正确位置后，从节点中的 data 执行更新 ui 所需的操作。比如关注domNode。

为了完整起见，根节点仅用于指示数据结构中的起始位置。它可能看起来像：

{
  left: sideNavBtn
}

这将是给不想浏览数据结构（您的屏幕）的人的起点

【讨论】：