我开发了一个简单的基于HTML5的游戏。在这个游戏中有4个控制键,分别是左、右、上和下箭头(keydown事件)。它在我的笔记本电脑浏览器中运行良好。我想为移动手机定制这个游戏。在移动手机(Android、IOS)中,有哪些适合读取输入的事件?移动浏览器中画布的标准尺寸(高度和宽度)是多少?
我开发了一个简单的基于HTML5的游戏。在这个游戏中有4个控制键,分别是左、右、上和下箭头(keydown事件)。它在我的笔记本电脑浏览器中运行良好。我想为移动手机定制这个游戏。在移动手机(Android、IOS)中,有哪些适合读取输入的事件?移动浏览器中画布的标准尺寸(高度和宽度)是多少?
标题的答案:
Canvas得到iOS和Android手机的全球支持,
有关详细信息,请参见caniuse.com:
http://caniuse.com/#feat=canvas
消息的答案:
移动设备没有物理键盘。
对于键,您可以使用指针事件API(以及其Polyfill)来创建虚拟摇杆,此教程提供更详细的说明:
http://www.codeproject.com/Articles/594186/Create-a-Cross-browser-Touch-based-Joystick-with-Hand-js
这是您可以发挥创意的地方。一个虚拟键盘或者将屏幕分成几个部分也可以。左边是左边,右边是右边,等等。这真的取决于您的游戏类型。
一个非常好的虚拟键盘教程可以在这里找到。看看演示吧!
基本上是以下:
element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);
相反,我建议使用像hammerJS这样的库。它处理触摸事件并为您简化手势。
苹果很简单,你有320×480、640×960、640×1136
Android则稍微复杂一些。最好的答案是查看Google提供的以下页面:屏幕尺寸分析。
它们通常分为以下类别
xlarge屏幕至少为960dp x 720dp
大屏幕至少为640dp x 480dp
普通屏幕至少为470dp x 320dp
小屏幕至少为426dp x 320dp