HTML5游戏开发中遇到的问题

 

HTML5游戏开发中遇到的问题

       在HTML5游戏开发的过程中，遇到的问题如下：

1）苹果safari浏览器中的音频播放问题

（1）仅有部分mp3格式的音频可以在ios的safari中进行播放，部分可以在Mac的safari中可以播放的mp3在ios的safari中无法播放。

（2）ios中safari设置audio标签的autoplay属性为true无法实现自动播放的效果，Mac中的safari浏览器该属性可正常使用。

（3）ios中safari的音频为实时加载进行播放，因此在播放声音时会有延迟。

（4）从ios5起，safari才支持loop属性，之前的不支持循环播放属性。

参考网址：

http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1

2）屏幕适配问题

ios中的safari的屏幕大小适配时，虽然可以通过在html顶部增加<meta>标签声明可以实现将地址栏隐藏，但此时无法缩放。safari的视窗大小被设定为物理屏幕大小，且屏幕上方的标题栏和下方的工具栏无法隐藏。

代码：

<meta name="apple-touch-fullscreen" content="yes" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

如果要实现游戏在ios的safari中进行缩放，则无法实现隐藏地址栏。

用户可以通过将当前游戏网站添加到主屏幕，通过主屏幕的游戏图标启动游戏，可实现全屏。此时需要按照苹果要求，在index.html中声明游戏图标。

代码：

<link rel="apple-touch-icon" href="image/touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="image/touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="image/touch-icon-iphone4.png" />

参考网址：

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3

3）触摸事件与手势事件

在ios的safari中，触摸事件与手势事件直接存在着某种关系。当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在屏幕上，会先触发gesturestart事件，随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件。但只要有一个手指移开，就会触发gestureend事件，紧接着又会触发基于该手指的touchend事件。

       基于上述事件触发过程，如果游戏是通过玩家触摸屏幕进行游戏操控，如果此时游戏还支持屏幕缩放，则很难区分玩家的触摸操作是要进行游戏操控还是屏幕缩放。

       参考网址：

http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/GestureEventClassReference/GestureEvent/GestureEvent.html#//apple_ref/doc/uid/TP40009353

 

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

 

 

<!--EndFragment-->