Question

我有一个HTML + JavaScript的全屏游戏，它使用箭头键作为主要控件。这不能用在无键盘的Android设备上（我还没有在iOS上测试过），即使软键盘上有箭头键，它也会占用不必要的空间。因此，我添加了屏幕控制按钮。但是，桌面浏览器上的按钮是不必要的（并且非常大），所以我希望它们不会弹出，除非需要它们。

我可以使用什么启发式方法来决定是否需要它们 - 也就是说，用户输入箭头键事件是否不可能或尴尬 - 除了识别特定用户代理（其中是直截了当的，但不是面向未来的？）

我当然会允许用户隐藏/显示按钮;我正在寻找有用的启发式方法来选择默认设置。

Answer 1

无需任何用户代理嗅探，配置选项或任何类型的猜测。就这样做：

有一个标题画面，上面写着“按下继续”。
点击或按键，隐藏触控并开始游戏。
触摸，显示触控并启动游戏。

您甚至不需要向用户提及该选项，并且您可以完美地自动检测其首选控件。

Answer 2

使用Modernizr进行特征检测：http://www.modernizr.com/docs/#touch

虽然这不是检查用户是否有键盘的可靠方法，但看看浏览器是否能够触摸是绝对可靠的。

Answer 3

如果您只有箭头（左/右/上/下），您可以考虑在游戏区域内添加触摸事件？这显然不占用空间，因为它在游戏的顶部分层，所以它可能是“永远在线”。

计算机用户甚至不知道它在那里，虽然他/她可以用它们用鼠标来玩你的游戏。
另一方面，触摸设备用户可以更容易地使用“区域”（例如，中间的顶部，中间的左侧，中间的底部和中间的右侧），因为...好...触摸而不是使用一个鼠标。

这可能需要一些解释，因为您可能不希望这些点对用户可见，但感觉就像一个有效的选项。

即使您有4个按钮和“火”，也可以这样做，例如添加“中间”部分。

Answer 4

查找触摸特定事件，例如touchstart或gesturestart，并在检测到时显示屏幕控件。

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

我不确定系统信息API是否已由任何浏览器实现： http://www.w3.org/TR/system-info-api/

Answer 5

不要试图猜测，而是让它成为用户选择的配置选项。

Answer 6

默认情况下，不是显示屏幕键盘，而是添加一个按钮以切换屏幕键盘的显示。

让屏幕键盘具有调整大小的能力也是明智的。

编辑以回答问题：

如果您的大多数用户将在计算机上，

默认情况下应隐藏键盘

默认情况下，如果您的大部分用户都在移动设备上，则可见。

Answer 7

另一种方法是绑定滑动事件＆amp;相同功能的密钥代码 - 因此两者都可以同时工作（当然，这取决于游戏是否接受滑动 - 或者屏幕上有一些游戏手柄控制）。

这甚至涵盖了答案评论中提到的推进，我刚才注意到了。

在大多数情况下，屏幕上的点击控制太难使用（S-NES Emu）。

到目前为止，我用过的最好的是Bard的Droid故事。

提示：最适合控制游戏中的方向移动的是点击保持事件。因此，人们可以轻拍...在光标和屏幕中心之间需要一些不可见的构造线 - 以便测量移动矢量的度数。

有人甚至可以通过压力值来控制速度 - 目前还不确定是否可以从JavaScript中访问该属性 - 或者这是否只能在Android SDK中使用？

在并行王国中，单击会移动（但字符并不总是位于屏幕中间，就像上面提到的点击保持方法一样）。

Answer 8

您可以考虑检查显示尺寸。如果显示尺寸小于一定尺寸，您可以假设它是移动设备并且可以显示箭头按钮。其他明智的使用键盘按钮。

您还可以保留一个选项，以便用户在需要时可以手动设置。

Answer 9

您可以使用javascript找出Windows视口的高度，然后使用if语句说：

if ($(window).height() <= "960")) {
    //Your code to display keyboard controls
    //P.S. 960 is height of iPhone 4+ screen
}

编辑：遗漏）$(window).height() <= "960"

结束时

检测浏览器是否在网页中有键盘/箭头键

9 个答案: