整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

微信H5斗牛游戏开发总结,你想不想学H5?

“HTML5工程师”这个职位也可以说是如日中天,越来越火,市场上也越来越缺乏H5优秀的工程师,下面是H5开发的一款斗牛小游戏,相信很多人都玩过,如果大神看到请赐教,小白看到就跟着小编我一起好好学习吧~

H5游戏你可以看作是移动端的Web游戏,无需下载软件就可以体验,这就是H5在传播上的优势。一种快捷、即时性的游戏形式。

H5游戏的迅速流行告诉了大家,并不是画面极度精美,剧情严密的游戏才是游戏成功的唯一法则。虽然并不否认大型游戏能成功的说法,但随着人们闲暇时间的缩小,简单易上手的小游戏更能适应当下游戏发展的趋势。

随着朋友圈在最近几年疯狂的流行,越来越多的游戏从业者投入到H5游戏产业当中。相比较一个大型游戏创作的耗时耗力,H5游戏有着门槛更低、所需时间更少的优点。

你可以像写网页一样写游戏,不需要太多的额外学习。相信在不久的游戏行业,将会大量的涌现出一大批的H5游戏。

  1. 布局的时候,如果一个元素你想让他的宽高保持一定比例,而不随屏幕变化,宽高设置的时候,使用同一个单位都是CSS3的单位,低版本不兼容 <span style="font-family: Arial, sans-serif; ">1.移动端页面布局,使用相对的数值,不要使用绝对数值,推荐使用%,vw,vh,rem,em</span>

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) {

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;

}

return result;

}

//滑动处理

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("向上");

break;

case 2:

alert("向下");

break;

case 3:

alert("向左");

break;

case 4:

alert("向右");

break;

default:

}

}, false);

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.可以在朋友圈进行分享。

只要这两点,就能获得大量的用户。

ameLook报道 / 12月28日,对国内H5游戏创业者来说是迎来奇迹的一天。

腾讯28日下午通过多个官方微信公众号正式公布了“小游戏”,同时上线了15款小游戏产品、其中包含多个腾讯自研的棋牌小游戏,这昭示着腾讯微信正式拥抱H5手游市场,给多年来一直等待H5游戏机遇的游戏开发者送上了终极新年大礼包。而28号全天,已有过万的国内游戏开发者通过Gamelook的报道了解到这则令全行业振奋的信息。

目前,更新iOS微信6.6.1最新版的用户启动微信已能看到小游戏的开屏登陆页面(android版在灰度测试中),伴随微信小游戏公布,腾讯还提供给了小游戏开发者新的开发工具、开发文档。同时28日下午Cocos、Layabox、白鹭这三个国内主流引擎商都发布了引擎的最新进度,全力支持微信小游戏开发者。

对于真正在游戏圈有些年头的从业者,看到微信小游戏的正式登场,真可谓感慨万千,在这里gamelook首先要向一直坚守在H5这个阵地多年的开发者、创业表示致敬,真的太不容易了。

微信小游戏:一场迟到5年的机遇,H5创业者历经千辛万苦

gamelook最早开始报道HTML5手游趋势是在2011年,而更早的关于HTML5移动平台应用的争议则要追溯到2010年。现在回忆起过往H5游戏领域发生的大事件真可谓历历在目,也真叫创业者痛彻心扉。

2010年4月,当时还健在的苹果公司创始人乔布斯曾发表了一篇文章,重点阐述为何苹果设备不再支持Flash,乔布斯当时说道:“让第三方(Flash)插足平台和开发者之间,最终会制造出低标准应用,它会阻碍平台的扩张和进展。”

因为苹果的坚决、google的跟进,Flash在移动端走向了末路,顺其自然,全球开发者开始按照苹果给出的方向:HTML5,勇敢前进。但谁知创业者勇敢追逐的HTML5却带来行业长达数年的痛苦。

2011年,腾讯QQ游戏中心在国内设立了总奖金百万元的“腾讯移动终端游戏开发大赛”,这是腾讯开始介入HTML5游戏领域的标志性事件,在当时的报名信息中,腾讯即积极鼓励HTML5移动游戏开发者参与这场创业者选秀。而2011年1月腾讯微信刚刚发布。同时在海外市场,2011年Facebook也开动了自己的代号“斯巴达”的H5游戏平台建设。

有着苹果、腾讯、Facebook这些超级平台的趋势指引,其后,诸多国内创业者开始加入了H5游戏创业浪潮之中,当年移动开发者活动中非常火的一个就是创新工场力挺的“HTML5大会”。

在众多创业公司中,当年最具有代表性的H5游戏公司叫磊友科技,其创始人黄何曾是腾讯公司产品经理,2010年就早早嗅到了H5的苗头获得创新工场投资、之后累计融资超过千万美元,磊友不仅开发H5跨平台游戏引擎、还自己开发H5游戏产品,当属最早的H5明星企业,但谁知磊友也成了H5游戏“概念包袱”最重的创业公司。

虽然2017年年末的微信小游戏引爆行业,但在gamelook记录中,早在2012年Q2腾讯高管刘炽平就做了相应的表态,刘炽平当时曾表示:“大型应用软件将基于本地客户端,其使用量将非常大,需要不断发展。这些应用软件应当具有大量内置特色功能供用户使用;但同时对于很多用户不是每天都使用的应用程序或者内容,通过浏览器或者HTML5访问可能是更高效的途径,因此面向这两种应用程序的市场将继续存在。我们尝试要做的是,参与到这两个市场里。”

刘炽平2012年就指出微信、手机QQ、浏览器是HTML5应用的载体,但腾讯所设想的非原生APP的第二个应用市场,直到2017年才开始真正着手尝试。

5年的间隔,意味着很多,对国内H5游戏创业者来说代表着遭遇一系列的重大挫折。

苹果虽然力推HTML5但并不希望原生应用采用H5技术,且对非appstore生态的H5应用和游戏采取了彻底的封堵方式。

微信H5游戏?其实磊友早在2013年即尝试过,缺乏苹果和微信平台的支持,迎头而来的是H5游戏遭遇各种技术问题、产品问题,进而是磊友公司不断转型,乃至最终消失于行业,令行业扼腕。

Facebook在海外主导的H5游戏平台因为多方面原因惨败,导致海外跟随Facebook挺进H5游戏市场的一批大公司相继在手游市场跌倒,这其中典型的就是豪赌H5手游、而错失早期智能机爆发期的Zynga。

同时,国内H5引擎代表性公司从当年的磊友,变成了Cocos、白鹭、LAYABOX,典型的H5游戏公司也变成了蝴蝶互动、中手游、37互娱这些更晚进入H5市场的游戏公司。当年磊友没能解决的技术问题,Cocos、白鹭、LAYABOX用数年的扎实积累、打磨,一个一个攻克,甚至HTML5都已不能代表目前小游戏技术本质。而微信、Facebook经过数年的用户积累,终于迎来了其移动生态能与苹果正面磋商的地步。

5年坚守,是所有参与H5市场每一家公司的执念,最终换来了微信小游戏的正式公布。

迎头而来的微信小游戏到底是什么?

好日子已在眼前,事实上,微信小游戏的公布是整个H5游戏市场最大的爆点,但并不是全行业H5游戏的起点,我们不应忽视手Q、厘米游戏平台,玩吧,乃至行业内众多发行商在H5游戏市场上的众多尝试。

但仔细去思考微信小游戏代表着什么?真的是大多数人所认为的用户红利么?gamelook并不这么认为。

用户红利其实对目前的国内互联网来说已叫消耗殆尽,智能机增幅为个位数,其实几乎所有的用户已在移动平台之上。

微信小游戏的加入,更多意味着流量的再分配、用户时间的再分配和特定需求的满足,对腾讯来说手中则是多了一张洗牌整个流量大盘的手段和王牌。

腾讯目前并没有彻底垄断分发,难点有两个,其一是手机终端厂商各占山头,其二是非腾讯的超级APP对分发市场的竞争。微信小游戏、以及手Q、浏览器小游戏的加入,代表着腾讯有了良好的基础参与到流量的再分配中,但这种分配是基于各种新的用户应用场景。而当下移动互联网,流量的发源地主要是基于内容平台、和社交平台。

而随着腾讯微信小游戏的发布,即使是出于防守目的、相信非腾讯的超级APP、手机硬件厂商也将加速推进H5游戏平台布局。最终全行业平台对H5游戏平台基础设施的快速成型,将产生链式反应,催生真正适应于H5游戏分发、应用场景的新生态。

对大家最关心的微信小游戏来说,新的应用场景就是社交化游戏场景、以及新的小游戏分发场景。如果开发者指望腾讯独代的方式来给小游戏导流,可能有些想当然,以今天微信小游戏上线第一天即发布15款游戏来说,可能后继微信小游戏的数量会非常庞大,创业者需要认真思考的问题是微信小游戏与原生游戏到底差别在哪里,应用场景到底有何不同才是取胜的关键。

事实上,在微信公布小游戏之前,行业内就有两个非常鲜活的成功案例启发过行业微信小游戏该如何做,其一就是这两年大火的房卡棋牌,其二就是腾讯自己的《王者荣耀》。

所以虽然微信小游戏给行业带来了重大的利好,但不应夸大小游戏导流的作用,行业更应该去思考小游戏产品如何适应这种新的社交化生态环境。

在微信朋友圈的流量简直就是一个超级大的金矿,不少商家也是投入其中,很多h5游戏也是被商家所利用,成为一种宣传工具,开发一个h5游戏有很多种方法,而且每一种方法所用到的技术都不太相同,下面蓝橙互动小编为大家总结一下,怎样才能做好一个微信H5游戏,首先得知道这些微信h5游戏都具有哪些功能和特点!

功能

1.跨平台:开发微信h5游戏其中一个最大的优势是游戏在大部分的设备上都可以运行。是的,如果使用原生语言来开发,你必须考虑你的游戏需要怎样适配所有尺寸的屏幕。另外你还必须针对不同的平台去调整代码,而且在每次迁移平台的时候都需要调整代码。所以当你需要开发一个微信游戏之前首先要考虑移动设备的兼容问题。

2.分享性:很多读者可能会觉得做本地手机安装的游戏不是性能更好吗,但是用户往往会忽略了微信h5游戏的推广价值。不要低估了推广微信h5游戏所能带来的效益,借助微信的分享和转发功能玩家可以轻易地将游戏链接通过好友或者朋友圈分享给其他用户,而且微信游戏可能更加灵活地调整内部链接,可以引导用户通过游戏引流到不同的地方,可以将用户的转化率提到最高。

特点

1. 速时 游戏要 1 分钟甚至是 30 秒内可以玩完,神经猫,疯狂手指,数钞票,房祖名无不属于这类。疯狂手指甚至短到了 10 秒,如果你在网上搜,可以搜到 10 秒 600 次的视频。

2.简单 到迄今为止能火的都是快餐类游戏,特别为开发人员所不屑。但现在轻游戏几百款传播量最大的都是不需什么智商的游戏,这是现实。这点很多人也都意识到了,不多说。

3. 竞技 这部分体现在分数,例如传播文案,xx 分,超过宇宙 xx% 人之类的。还有本地存储分数等,稍复杂一点可以加入排行榜,这点加分项,不是必要条件。

4. 抓热点/拼创意 疯狂手指创意来自于一个工程师,另一工程师开发 1 个小时上线,第二天就快千万流量,创意爆款可遇不可求。房祖名,冰桶则是抓热点事件,通过疯狂手指,黑白格,找你妹等游戏变化得出,对实事热点的包装是更靠谱的一条路,我们后来的原创打老虎也是类似思路。这是运营、市场所擅长的事,或者头脑风暴也不是不可以。这点的要素是——及时。不及时无价值。

5、病毒式传播 最早的《神经猫》、《看你有多色》等实现朋友圈“病毒式传播”的H5游戏,都实现了超过千万IP的访问,虽然微信基于用户体验的考虑,主动限制H5游戏传播。但事实上,标准目前很模糊,只知道游戏访问量大的时候会被注意到。而且微信还未提供H5页面游戏的统一入口,未来不排除微信提供统一的后台操作。

从上述所说的微信h5游戏特点可以看出,微信h5游戏因为其非常简单容易上手,并且不用花费人们太多的时间就能很好的在朋友圈完成互动被广为流传。所以基于以上条件,基本可以判断怎样才能做好一个微信

H5游戏。蓝橙互动专业从事微信游戏开发、微信公众平台搭建,欢迎有需要的朋友与我们联系。