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

Question

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

我想的可能只是创建代表接口项的对象，并存储一个活跃的＆＃39;项目。如果submit是有效选择

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

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

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

看似不好的方法

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

但这并不完全是直觉的。如果您在new并且想要前往password，那么在没有先按left的情况下，您就不能。{/ p>

当屏幕上有多个组件时，这会更复杂。 2D阵列必须适应所有用于导航的元素。这听起来很麻烦。

Answer 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')
  }
}

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

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

{
  left: sideNavBtn
}

并且将成为那些不想导航数据结构（屏幕）的人的起点