资讯专栏INFORMATION COLUMN

给你的网页游戏添加游戏手柄支持

stdying / 4353人阅读

摘要:自从买了手柄后一直想试试给自己写的小游戏增加手柄支持。表示该对象所表示的手柄是否还保持连接。。连接事件浏览器提供了两个手柄相关的事件。。完笔者给自己的贪食蛇小游戏增加了手柄摇杆控制蛇头方向功能之前笔者还写过俄罗斯方块之类的,代码找不到了

自从买了 Switch 手柄后一直想试试给自己写的小游戏增加手柄支持。今天终于抽出时间搞了一把。以下是笔记 ;)

navigator.getGamepads

HTML5 中获取游戏手柄的 API 是 navigator.getGamepads()。navigator.getGamepads 会返回一个可能包含 null 的数组。标准规定,对于同一个游戏手柄会在同一个下标中返回,不同的手柄必须不能使用其他手柄用过的下标——即便前者已经中断连接。如果没有检测到任何游戏手柄,实测在 Firefox 中会返回一个空数组,而在 Chrome、Safari 中会返回 [null, null, null, null]

当浏览器检测到手柄后,navigator.getGamepads 就会返回包含该手柄对象的数组,每一个手柄对象都是 Gamepad 类型

实测笔者的 NS Pro 手柄在 Chrome、Safari 浏览器上有兼容性问题(不能识别左摇杆),所以下面测试均以 Firefox 为准(Edge 也正常)。同事表示他的 PS4 手柄没有问题。

Gamepad 类

Gamepad 类包含重要的属性,这里只介绍最重要的几个:

id。字符串,包含了手柄驱动的名称信息。比如笔者的 NS Pro 返回的是 57e-2009-Pro Controller,可以用此字符串识别用户的手柄提供默认的按键映射。

connected。表示该 Gamepad 对象所表示的手柄是否还保持连接。

timestamp。手柄对象的最后更新时间。实测笔者虽然没有动手柄,这个值仍然在不断增长(可能是摇杆的数值在微小变化的缘故),用处不是很大。

mapping。表示浏览器是否可以识别手柄的布局。当前浏览器只能识别 类似 PS4 手柄的标准布局。如果能识别,返回 standard,否则返回空字符串(笔者的 NS Pro 识别不了)。

axes。这个值表示手柄的摇杆的轴(一个摇杆有X、Y两个轴)。其所有值都在 -1~1 之间。HTML使用向右、向下的坐标系,所以正值表示右或上,负值表示左或下。标准规定,同一个摇杆的X、Y方向值必须相邻,且先X后Y。标准同时建议,如果有多个摇杆同时存在,主摇杆应该排在前面。所以如果有有左右两个摇杆,axes 返回的数组值应该表示:[左摇杆的X轴偏向, 左摇杆的Y轴偏向, 右摇杆的X轴偏向, 右摇杆的Y轴偏向]

buttons。这个值是一个 GamepadButton 对象数组。标准建议数组的顺序应该按照主要按键优先排列。实测对于我的 NS Pro 手柄来说顺序是 [B, A, Y, X, L, R ...],而方向键排在最后四个。建议实际应用中给用户提供专门的界面映射按键。

GamepadButton 类

每一个 GamepadButton 实例表示手柄上的一个按键(包括方向键),它包含三个属性(MDN 上只写了两个,实际按照标准返回了全部三个):

pressed。布尔值,表示当前按键是否被按下。

value。表示按键的深度(完全按下还是按到一半),值为 0~1 之间。大多数按键不支持压力感应,会直接返回0或1

touched。如果手柄支持触摸,该值可表示当前按键被触摸但是没有按下的状态。如果不支持触摸,该值和 pressed 一致。

连接事件

浏览器提供了两个手柄相关的事件。

gamepadconnected。当浏览器检测到手柄连接时触发。回调函数的事件参数中包含 gamepad 属性,用户获得新连接的手柄对象

gampaddisconnected。当浏览器检测到手柄失去连接时触发。

可以看到手柄没有类似键盘鼠标那样的 keydown、keyup 等事件,如需获取手柄的按键状态,需要在 raf 循环中使用 navigator.getGamepads 实时获取。

笔者给自己的贪食蛇小游戏增加了手柄摇杆控制蛇头方向功能:https://github.com/CarterLi/S...

之前笔者还写过俄罗斯方块之类的,代码找不到了/(ㄒoㄒ)/~~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94528.html

相关文章

  • 日本什么主机好-买什么游戏主机好?

    摘要:买什么游戏主机好距离上篇游戏主机选购完全指南已经有了快两年的时间,在这个不长不短的时间里,游戏主机市场也出现了一些十分有趣的变化,索尼和微软齐头并进,先后发布了和,让成了去年游戏领域的关键词,完成了半个世代的更迭。想组装一台电脑,用迷你主机好还是用大主机好?一定先玩明确自己的使用要求。而不是先考虑哪种电脑好。迷你电脑优点太多了,小巧美观不占地方,日常应用足够,高清电影一般游戏办公商务都可满足...

    everfly 评论0 收藏0
  • 商城用什么主机-买什么游戏主机好?

    摘要:买什么游戏主机好距离上篇游戏主机选购完全指南已经有了快两年的时间,在这个不长不短的时间里,游戏主机市场也出现了一些十分有趣的变化,索尼和微软齐头并进,先后发布了和,让成了去年游戏领域的关键词,完成了半个世代的更迭。买什么游戏主机好?距离上篇 《游戏主机选购完全指南》 已经有了快两年的时间,在这个不长不短的时间里,游戏主机市场也出现了一些十分有趣的变化,索尼和微软齐头并进,先后发布了 PS4 ...

    figofuture 评论0 收藏0
  • 游戏挂机用什么云主机-请问云服务器可以托管挂机游戏吗?

    摘要:请问云服务器可以托管挂机游戏吗如果是想在云主机上玩游戏的话,由于云主机没有网卡,所以无法加载大型游戏,不过可以玩一些网页游戏。请问云服务器可以托管挂机游戏吗?如果是想在云主机上玩游戏的话,由于云主机没有网卡,所以无法加载大型游戏,不过可以玩一些网页游戏。如果主机提供商的物理机支持GPU透传功能,将物理机GPU透传到云主机上,这样云主机就有了物理机的GPU功能,有了3D渲染和高清解码的功能,玩...

    xorpay 评论0 收藏0
  • WebVR开发教程——交互事件(一)头显与手柄

    摘要:交互事件交互根据自由度可分为和,显然,所有的头显都应支持方向的追踪。交互事件除了,现在大部分还搭配,用户通过手持手柄可以与虚拟场景进行交互。 showImg(https://segmentfault.com/img/remote/1460000011813767?w=880&h=471); 前两期主要介绍了开发WebVR应用的基本套路,不过开发出来的场景还只是可远观而不可亵玩,缺乏交互...

    harriszh 评论0 收藏0

发表评论

0条评论

stdying

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<