查看: 5774|回复: 326
移动端H5游戏开发教程
阅读权限255
在线时间 小时
基础教程发布很多了，
也分享过很多游戏源码，
那么移动端游戏开发到底是怎样实现的呢？
下面推出这套教程，帮大家解决部分困惑~
有需要的回复下载即可！
课程详细内容截图如下：
1.jpg (0 Bytes, 下载次数: 12)
17:07 上传
2.jpg (0 Bytes, 下载次数: 4)
17:07 上传
3.jpg (0 Bytes, 下载次数: 5)
17:07 上传
下载地址：
游客，如果您要查看本帖隐藏内容请
打赏列表共打赏了1次
打赏了1金币
很好，支持！
阅读权限20
在线时间 小时
RE: 移动端H5游戏开发教程
RE: 移动端H5游戏开发教程
阅读权限80
在线时间 小时
hjjjjj摸摸摸
阅读权限120
在线时间 小时
强烈支持！！
阅读权限80
在线时间 小时
移动端H5游戏开发教程
阅读权限120
在线时间 小时
阅读权限140
在线时间 小时
移动端H5游戏开发教程 [
阅读权限20
在线时间 小时
学学习移动端H5游戏开发教程
阅读权限120
在线时间 小时
如果您要查看本帖隐藏内容请回复
阅读权限120
在线时间 小时
9秒威客是一个面向开发者的服务众包平台..
**** 本内容被作者隐藏 ****
特别声明（务必查看！）
1、HTML5游戏《德州
资源说明：
cocos2d 网狐6603 子游戏
特别声明（务必查看！）
1、Unity 3D手绘丛林场
unity防御游戏《超级英雄大战僵尸》源码Super he
| 联系方式
COPYRIGHT(C)2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备号-4
北京中清龙图网络技术有限公司1117人阅读
&span style=&font-family: Arial, sans- background-color: rgb(255, 255, 255);&&1.移动端页面布局，使用相对的数值，不要使用绝对数值，推荐使用%，vw，vh，rem，em&/span&
布局的时候，如果一个元素你想让他的宽高保持一定比例，而不随屏幕变化，宽高设置的时候，使用同一个单位
都是CSS3的单位，低版本不兼容
2.兼容性：苹果设备微信强制使用的是os的浏览器safar，页面访问的体验远大于安卓；安卓情况比较乱套：知乎上有人说是微信6.0.2以上是强制使用的QQ的X5浏览器，但是实际情况来看（公司范围），一部分手机如（魅族，小米，一加，三星，LG等）使用的是X5内核，另一部分如（nexus，国靖的小米）使用的是chrome的内核， 由此来看，安卓上的访问情况大部分不容乐观，会不支持某些属性和出现一些异常。
3.经验之谈：UI给出的设计图越来越美观了，但是对于前端的要求就变高了，写页面之前，良好的页面结构设计可以极大地丰富了兼容性和扩展性，这个东西没有对错之分，只有好和更好。
4.移动端的动画：这次我使用的是jquery.animate，出现情况，ios上各个设备均正常，但是安卓方面X5内核的动画卡顿严重。查阅资料，移动端的动画大部分使用CSS3和zepto.js，尽量不使用jquery的，对于移动端的游戏动画，流行canvas。
5.touch事件：安卓支持click事件，但是ios不支持，推荐使用touch事件；
touch事件基本类型：touchstart,touchmove,touchend,
对于之前需求中的判定向上滑动，向左滑动，向右滑动等推荐使用以下代码进行处理：
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
//如果滑动距离太短
if (Math.abs(dx) & 2 && Math.abs(dy) & 2) {
var angle = GetSlideAngle(dx, dy);
if (angle &= -45 && angle & 45) {
result = 4;
} else if (angle &= 45 && angle & 135) {
result = 1;
} else if (angle &= -135 && angle & -45) {
result = 2;
else if ((angle &= 135 && angle &= 180) || (angle &= -180 && angle & -135)) {
result = 3;
//滑动处理
var startX, startY;
document.addEventListener('touchstart', function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
document.addEventListener('touchend', function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch (direction) {
alert(&没滑动&);
alert(&向上&);
alert(&向下&);
alert(&向左&);
alert(&向右&);
}, false);
6.禁止滑屏：手指按住页面进行滑动，页面的动画会停止，但是松手之后，动画已经完成，影响了用户体验，在某些情况下（页面只有一屏），应该禁止手指滑动，代码：
//禁止页面滚动
function forbidPageScroll(){
var stop=0;
document.addEventListener(&touchmove&,function(e){
if(stop==0){
e.preventDefault();
e.stopPropagation();
7.音频：audio标签的自动播放autoplay，iOS不支持，并给出理由“这会导致用户的流量被偷取” 所以ios设备上禁止了自动播放功能，可以绑定touchmove事件，用户点击屏幕任何一处都可以触发音频播放。安卓支持自动播放。
8.推荐一个打乱数组顺序的简单的方法：
var boss = [1,2,3,4,5,6,7,8];
//打乱顺序
boss = boss.sort(function(){ return 0.5 - Math.random() });
注：官方介绍QQ浏览器X5内核是：基于开源webkit内核并进行&深度优化和合理扩展的优秀内核
对于前端来说，我只知道他对一些css不支持和一些奇异的现象。
1）img标签慎用，在未对其指定宽度和高度的时候会莫名的放大；在对其指定高度和宽度的时候，在某些情况下也会莫名的放大。
解决方法：div+background+background-
2) &@keyframe+animate CSS3的动画不支持。现在也没法判断到底是那条css不支持，但是两者从来都是一起用的。
解决办法：简单动画.gif 或者是div的background使用gif
3) &border 不支持，莫名的不支持。
解决办法：暂无。
4）box-shadow 显示不正常，会显示成一条类似border但无法控制宽度的边框。
解决办法：暂无。
5） vh 抽风式的无法正常支持：设置box的width为vw，height为vh，浏览器会吧height中的vh也当场vw解析，但是使用padding-top的时候使用vh就可以正常显示。
解决办法，固定比例固定尺寸的图片，节点等统一使用vw作为计量单位，纵向的边距什么的可以使用vh，实际情况动手实践。
6）对jquery.animate的支持不是很好，严重卡顿的情况。
解决办法：不要使用jquery 用 zepto。&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：25996次
排名：千里之外
原创：35篇
(2)(2)(1)(1)(2)(2)(6)(1)(9)(9)(1)(1)深度测评：你真正了解HTML5游戏引擎吗？_凤凰游戏
深度测评：你真正了解HTML5游戏引擎吗？
用微信扫描二维码分享至好友和朋友圈
测评中，与国外知名引擎相比， 国内主流HTML5引擎代表----白鹭引擎（Egret）和Cocos2d-js表现不俗，在性能上已具有国际水准。
近日，&知乎&发布了一篇名为《HTML5游戏引擎深度评测》的文章，引发了开发者们大量关注和转载。测评中，与国外知名引擎相比， 国内主流HTML5引擎代表&&白鹭引擎（Egret）和Cocos2d-js表现不俗，在性能上已具有国际水准。深度评测 国内主流引擎跻身全球第一梯队文章对国内外知名的多款引擎，通过2D与3D、编程语言、设计理念&功能、工作流、性能、学习资料和商业应用，总计七个维度，对每款引擎都进行了深度评测。本文仅关注开发者聚焦的引擎性能，国内的白鹭引擎（Egret）和Cocos2d-js都排在前四位置。工作流方面，Egret和Cocos2d-js其完整的工作流，相较于国外的顶尖引擎优势明显。学习资料和文档支持层面，国内主流引擎本土化的优势，完整资料文档支持和中文化服务更符合国内开发者需求。（测试内容为同屏渲染对象数量相同的情况下进行帧频数据对比，为了保证测试的公平性，使用同一台小米4手机，在微信内置的浏览器进行测试）盘点主流游戏渠道 Egret和Cocos2d-js引擎优势明显有意思的是，虽然国外引擎性能表现抢眼，但在国内的应用却很小众。国内引擎在性能上略低一筹，但在国内应用上却相对&大众&。纵观国内HTML5游戏主流渠道上线的产品，不论是从类型种类的多元化上，还是累计的用户规模上，都在保持高速良性的发展。从新浪微博，爱微游，浏览器以及WiFi万能钥匙等主流渠道统计的数据来看。Egret、Cocos2d-js引擎的占据了绝大部分市场份额。另一方面，目前HTML5付费游戏全渠道累计用户排名前30的产品中，《愚公移山》、《来自星星的你》两款产品的用户规模均超过千万。其中大部分游戏均采用Egret和Cocos2d-js引擎，市场号召力可见一斑。HTML5游戏盈利已成规模HTML5游戏的盈利已经被市场反复证明。2105年，《愚公移山》在国内开启了HTML5游戏付费的先河，接着《西游传神》等产品月流水破500万，让业界看到了HTML5游戏强大的盈利能力。而在2016年，《传奇世界H5》月流水破2000万，不但证明了HTML5游戏千万流水的可能，也让业界开始期待HTML5游戏上亿流水的未来。从HTML5游戏全渠道累计付费TOP30 的产品和引擎列表得出，作为这些月流水表现突出作品背后的技术服务提供商，Egret和Cocos2d-js引擎在HTML5游戏盈利模式的探索道路上，均发挥了重要作用。HTML5游戏进入精品化时代技术与大环境的完善，促使国内HTML5游戏逐渐从轻游戏时代，进入到精品化、重度化时代。一方面得益于引擎技术的进步。以白鹭引擎为例，在最新发布的版本中已经全面开放WebGL渲染器的支持。切换到 WebGL 模式，帧频直接飙升到了 45-60 帧，接近原生游戏性能，相较于Canvas模式普遍立刻达到两至三倍的性能提升。这为重度化、3D化、精品化HTML5游戏的开发，提供了最重要的技术保障。在如下二维码中的DEMO，多达500个动画帧频，FPS依然达到60帧。另一方面，是大量开发商投入到重度HTML5游戏研发、发行和运营的探索创新。譬如《传奇世界H5》月流水已突出2000万大关，其开发、发行与渠道匹配模式等多项创新，为精品化发展提供了诸多借鉴。大量HTML5游戏如《太极》、《大大大掌门》、《秦时明月》等画面精美，体验重度的高品质游戏涌现，一定程度上促进了整个产业，也表明了HTML5游戏进入精品化时代。纵观当前HTML5游戏产业的现状，行业者们应该更清楚的看到，H5游戏进入精品化时代，引擎是核心驱动力。不论是技术、市场规模、产业链完整性，还是产品的盈利能力和商业化潜力，HTML5游戏产业，2016年值得更多期待。
[责任编辑：赵建波 PG001]
责任编辑：赵建波 PG001
用微信扫描二维码分享至好友和朋友圈
凤凰游戏官方微信
48小时点击排行