您当前的位置: 大头蛇游戏网 > 资讯 > 单机资讯 >游戏资讯

微信H5斗牛牛代理游戏开发总结,H5斗牛代码揭晓!

更新时间:2019-03-13 11:12:04 来源:互联网 分享到:
绝望主妇:游戏

绝望主妇:游戏

游戏类型:解谜冒险 游戏大小:458MB

《熹妃传》手游根据经典畅销宫斗穿越小说《清宫熹妃传》原版改编,最真实的还原主角钮钴禄•凌若宫廷跌宕一生,以游戏第一人称剧情式成长发展代入,演绎最完美最深情的后宫传奇。

一种快捷、即时性的游戏形式H5游戏的迅速流行告诉了大家,并不是画面极度精美,剧情严密的游戏才是游戏成功的唯一法则虽然并不否认大型游戏能成功的说法,但随着人们闲暇时间的缩小,简单易上手的小游戏更能适应当下游戏发展的趋势随着朋友圈在最近几年疯狂的流行,越来越多的游戏从业者投入到H5游戏产业当中相比较一个大型游戏创作的耗时耗力,H5游戏有着门槛更低、所需时间更少的优点你可以像写网页一样写游戏,不需要太多的额外学习相信在不久的游戏行业,将会大量的涌现出一大批的H5游戏布局的时候,如果一个元素你想让他的宽高保持一定比例,而不随屏幕变化,宽高设置的时候,使用同一个单位都是CSS3的单位,低版本不兼容1.移动端页面布局,使用相对的数值,不要使用绝对数值,推荐使用%,vw,vh,rem,em2.兼容性:苹果设备微信强制使用的是os的浏览器safar,页面访问的体验远大于安卓;安卓情况比较乱套:知乎上有人说是微信6.0.2以上是强制使用的QQ的X5浏览器,但是实际情况来看(公司范围),一部分手机如(魅族,小米,一加,三星,LG等)使用的是X5内核,另一部分如(nexus,国靖的小米)使用的是chrome的内核, 由此来看,安卓上的访问情况大部分不容乐观,会不支持某些属性和出现一些异常3.经验之谈:UI给出的设计图越来越美观了,但是对于前端的要求就变高了,写页面之前,良好的页面结构设计可以极大地丰富了兼容性和扩展性,这个东西没有对错之分,只有好和更好4.移动端的动画:这次我使用的是jquery.animate,出现情况,ios上各个设备均正常,但是安卓方面X5内核的动画卡顿严重查阅资料,移动端的动画大部分使用CSS3和zepto.js,尽量不使用jquery的,对于移动端的游戏动画,流行canvas5.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) {return result;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) {case 0:alert("没滑动");break;case 1:alert("向上");case 2:alert("向下");case 3:alert("向左");case 4:alert("向右");default:6.禁止滑屏:手指按住页面进行滑动,页面的动画会停止,但是松手之后,动画已经完成,影响了用户体验,在某些情况下(页面只有一屏),应该禁止手指滑动,代码://禁止页面滚动function forbidPageScroll(){var stop=0;document.addEventListener("touchmove",function(e){if(stop==0){e.preventDefault();e.stopPropagation();},false);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() });总结起来就两点:1.简单,随时随地能立马玩儿起来!2.可以在朋友圈进行分享。

如认为侵权请联系客服QQ2755379944,本站将尽快作出处理。

评论( 0 人参与 , 0 条评论)

登录 | 注册

热门评论

全部评论 最新

提示
提示文字
确定 取消