当前位置:首页 > 开发 > Web前端 > Html5 > 正文

HTML5游戏开发中遇到的问题

发表于: 2012-08-17   作者:bsr1983   来源:转载   浏览次数:
摘要:   HTML5游戏开发中遇到的问题        在HTML5游戏开发的过程中,遇到的问题如下: 1)苹果safari浏览器中的音频播放问题 (1)仅有部分mp3格式的音频可以在ios的safari中进行播放,部分可以在Mac的safari中可以播放的mp3在ios的safari中无法播放。 (2)ios中safa

 

HTML5游戏开发中遇到的问题

       HTML5游戏开发的过程中,遇到的问题如下:

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

1)仅有部分mp3格式的音频可以在iossafari中进行播放,部分可以在Macsafari中可以播放的mp3iossafari中无法播放。

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

3iossafari的音频为实时加载进行播放,因此在播放声音时会有延迟。

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" />

如果要实现游戏在iossafari中进行缩放,则无法实现隐藏地址栏。

用户可以通过将当前游戏网站添加到主屏幕,通过主屏幕的游戏图标启动游戏,可实现全屏。此时需要按照苹果要求,在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)触摸事件与手势事件

iossafari中,触摸事件与手势事件直接存在着某种关系。当一个手指放在屏幕上时,会触发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-->

HTML5游戏开发中遇到的问题

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
昨天做了一个手机端的H5 页面。 首先就是各种兼容测试,调整修复。。一系列操作之后,拿过来N多手机
本文用来记录本人开发php过程中遇到的一些问题。 一、编译php-5.2.6的时候报错问题 /data/home/jess
从SVN上下载源代码后,Project无法Build。 出现些问题的原因是,Project的ClassPath不正确,例如引
《HTML5 Canvas游戏开发实战》 基本信息 作者: 张路斌 丛书名: 实战系列 出版社:机械工业出版社
HTML5游戏开发实践指南 本书内容全面而且极具前瞻性,不仅重点阐述了HTML5和JavaScript的核心技术,
QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏,虽然还
本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5。 使用开源库件:LegendForHtml5Progra
今天在做游戏的时候游戏中有一个简单需求: 有一个人物,鼠标移到上面的时候需要显示手型指针。 if(
今天在做游戏的时候游戏中有一个简单需求: 有一个人物,鼠标移到上面的时候需要显示手型指针。 if(
今天在做游戏的时候游戏中有一个简单需求: 有一个人物,鼠标移到上面的时候需要显示手型指针。 if(
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号