前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球。就是下面这个小游戏:
前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加火爆那是后话了。不过我看了作者的宣传视频后,蠢蠢欲动,这么简单的小游戏我山寨一个网页版出来如何?简单思索一下,打算用DOM+CSS3来实现一个。一来强化一个下自己的CSS3知识,二来也探索下用原生DOM来做动画的性能到底如何。
三四天后,原作者的SwingCopters貌似没怎么火起来,看来flappybird的神话只是一个偶然呀~不过我的山寨版倒是有模有样的做出来了, 点这里查看Demo,请在chrome下打开, 你懂的。
requestAnimationFrame在PC端的支持还不错,不过在移动端的就有点挫了,Android4.4才支持,所以有必要做一下兼容处理,幸好已经有大神提供代码了,直接拿来用:
(function(){
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}());
下面我把一些技术细节来介绍下,介于小弟也是第一次做游戏,有些地方的实现不免走了弯路,或者损耗性能,有大牛发现了请一定赐教~
自适应的容器
先从最简单的来说起吧,首先需要一个div来做整个游戏的容器,由于游戏要能在手机上玩,所以宽高就必须做成自适应的,那么viewport的设置是必不可少的:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
这个不多解释了。div默认宽度100%所以不用管,高度要做到根据屏幕100%显示,我们需要给文档的根节点这样的css代码:
html, body{
height: 100%;
position: relative;
margin: 0;
overflow: hidden;
-webkit-user-select:none;
}
高度100%。定位属性relative,让子元素的定位以它为参照。同时overflow:hidden防止出现滚动条。最后还加了user-select:none,防止用户连续点击的时候出现难看的选区。
接下来是容器container的样式:
#container{
height: 100%;
position: relative;
overflow: hidden;
}
这样高度就能充满整个屏幕了。
另外,为了让游戏在PC浏览器中也可以玩,我又用媒体查询做了如下设置:
@media screen and (min-width: 1024px) {
#container{
width: 360px;
margin: 0 auto;
}
}
给容器360像素的宽度并居中对齐。这样在PC浏览器中就不会拉伸的很难看了。
移动的背景
游戏的容器container有一个背景图片,这个背景图片是需要连续且无限滚动的。首先,图片纵向平铺嘛,一个background-repeat: repeat-y;搞定。原先我考虑这么简单的运动用css3肯定能做的啦,但细细考虑之后发现竟然实现不了。。。假设在keyframes中设置关键帧,改变background-position来实现背景移动,移动倒是没问题,关键是这个连续无限滚动比较棘手,要连续滚动必须给一个很大的值才行,background-position需要设为多大才算无限呢?天知道玩家能玩多长时间,而且这样做显然是不合理的。或者把动画的播放次数设为infinite呢?这也不行,因为每次循环都会从头开始播放一遍,这样背景会闪动。所以最终还是把背景的移动放在js中来操作了,用一个变量来记录背景的位置,然后在主线程中不断递增。大概的代码结构是这样子的:
var game = {
bgMove : function(){
posMark += 2;
container.css('background-position', '0 '+posMark+'px');
timmer = requestAnimationFrame(game.bgMove);
}
}
只要调用game.bgMove(),就会通过 requestAnimationFrame来递归调用,用一个全局的变量来标记背景的位置,每次递增,从而不断修改背景位置,实现背景无限移动。
逐步播放动画实现旋转的螺旋桨
游戏中人物头上的螺旋桨在不停转动,如何实现这个动画呢?其实原理很简单,我们只需准备这样一张图片:
这是向左飞行和向右飞行的几个状态,将它设置为背景图片,然后不停改变背景的位置即可。要注意的是背景位置并不是连续变化,而是在几个值之间“切换”。
css3的keyframes + animation是通过定义关键帧的方式来实现动画,像flash一样,帧之间的过渡效果由浏览器来替你完成。但我们此处并不想要过渡效果,我们只想让播放两个帧而已。这里要用到animate-timing-function的一个比较特殊的取值:steps(),它可以控制动画最终由多少步来完成。这里我们需要图片中的第一个状态和第二个状态来切换,所以取steps(2)就OK了。代码如下:
首先我们定义关键帧:
@-webkit-keyframes flyr{
0%{
background-position: 0 0;
}
100%{
background-position: -108px 0;
}
}
然后定义一个class,只要在元素上加上这个类就可以进行动画了:
.flyr{
-webkit-animation:flyr 200ms steps(2) 0 infinite;
}
我直接使用了animation这个混合属性,取值的含义依次是:animation-name(动画名称),animation-duration(动画时间),animation-delay(开始播放时间),animation-iteration-count(播放次数),animation-direction(播放方向),animation-fill-mode(播放后的状态),animation-play-state(设置动画的状态),不写则取默认值。
来看一下效果吧:
向左飞的动画也同理,改变background-position的值即可。我们取名为flyl,只需要让元素的类名在flyl和flyr直接切换,就可以改变飞行的方向,是不是很方便。
在这里需要注意的一点是,steps(2)控制的两步播放,并不是播放0%和100%时的状态,而是根据具体的css属性的值来计算最终播放的两帧是什么状态。你可以自己写个例子看一下,这里不多说了。
起步向上飞行
人物一开始是在地上站着的,游戏开始时会先上升到半空中,然后垂直位置不再改变。这个比较好做,我们只需定义一个名为up的动画,如下:
@-webkit-keyframes up{
0%{
bottom: 0;
}
100%{
bottom: 44%;
}
}
然后一块加在flyl类上即可,多个动画用逗号隔开。于是flyl就变成了这样:
.flyl{
-webkit-animation:flyl 200ms steps(2) 0 infinite, up 4s linear 0 1 normal forwards;
}
这里animation-iteration-count取值为1,因为只播放一次就可以了。另外要注意的一点是,这一遍播放完后动画应该停留在结束时的状态,所以我们还需设置animation-fill-mod值为forwards。
人物的左右移动
通过点击改变了飞行方向后,人物会向对应的方向横向移动,这个怎么来做呢?一开始我想简单了,左右移动嘛,跟上升还不是一个道理?于是想当然的定义一个这样的动画:
@-webkit-keyframes mover{
0%{
left : 0;
}
100%{
left : 100%;
}
}
只需在flyl后面再加个逗号,加上movel就行了。或者定义成一个类,为人物添加这个类来实现向左移动。
但事实证明这样是错误的。因为在实际操作中,改变飞行方向可能发生在任何一刻,而这个时候人物的left值可能是20、50或者其他任何值。我们需要的是在当前left的基础上进行改变,而不是让它先归零。所以这里便不能用keyframes了,因为我们总是无法确定这个初始的left是多少。
这个时候css3的transition就派上用场了,它的作用也是自动创建补间动画,只不过没有animation那么复杂,只需为它指明需要过渡哪些属性就可以了。所以,我的flyl和flyr就变成了这样:
.flyl{
left: 0 !important;
-webkit-animation:flyl 200ms steps(2) 0 infinite, up 4s linear 0 1 normal forwards;
}
.flyr{
left: 100% !important;
-webkit-animation:flyr 200ms steps(2) 0 infinite, up 4s linear 0 1 normal forwards;
}
与此同时,我们的player要加上这一行:
-webkit-transition : left 1.5s 0 linear;
这样我们巧妙的摆脱了之前的困境,只需指定left即可,管它是从哪个值变来的,交给transition过渡去就好了。
现在只要监听click事件,根据玩家的点击来为人物切换class,我们的就可以来回飞了。js代码如下:
$(document).on('click', function(){
if(++direction%2==0){
player[0].className = 'flyl';
}
else{
player[0].className = 'flyr';
}
});
我们用一个变量direction来记录当前的方向,每次点击让它递增,然后根据奇偶性来改变className即可。之所以用变量来记录而不是通过hasClass来判断当前方向的原因是减少DOM访问。
摆锤的产生和移动
先说摆锤的左右摆动动画,这个其实也不难,用transform:rotate控制旋转一定的角度即可。有一点要注意的是,transform的变形圆点默认是元素的中心位置,而我们的摆锤可不是原地旋转的,所以旋转的中心应该控制在元素的顶部位置,我们用transform-origin来设置变形圆点位置,代码如下:
-webkit-transform-origin:center 4px;
摆锤是挂在横梁上的,横梁是自上而下移动的,在横梁的移动中其实就包含了我们游戏的主要逻辑:
1. 产生长度随机的横梁
2. 检测摆锤与飞机的碰撞
3. 飞过一层横梁则得分加1
4. 横梁移出屏幕可视范围,remove节点
这里用纯css实现横梁的移动的话会有一些逻辑无法实现,这中间必须有js来控制的。所以横梁/摆锤的产生就放在了我们游戏的“主线程”里。
简单说下思路:
有两个常量,分别表示横梁之间的水平距离和垂直距离,另外我们还需定义横梁的最小长度和最大长度,在这两个值之间产生一个随机数作为左侧横梁的长度,然后根据水平距离来计算出右侧横梁的长度。
至于碰撞检测,我这里就简单处理了(考虑到这个摆锤在不停的摆动),直接用圆形模型来做,即两个圆心的距离小于半径之和则认为发生了碰撞。
计算得分也比较简单,只要横梁的top值大于飞机的top值了,就认为已经越过了这一道横梁,得分加1.
最后,当横梁的top值大于整个容器的高度时,说明它已经移出可视范围,直接把节点remove掉,避免游戏运行一段时间后,DOM节点太多造成卡顿。
下面是主线程的代码:
bgMove : function(){
game.generateHand();//产生横梁
posMark += 2;
container.css('background-position', '0 '+posMark+'px');
var hands = $('.hand_l, .hand_r');
hands.each(function(index, element){
var _this = $(this),
thisTop = parseInt(_this.css('top'));
if(thisTop>cHeight){
_this.remove();
}
else{
thisTop += 2;
_this.css('top', thisTop+'px');
}
if(thisTop>player.offset().top+e1H){
//已经位于下方
if(!_this.data('pass') && index%2==0){
scroeC.text(++score);
_this.data('pass', 1);
}
}
else{
//碰撞检测
if(game.impactCheck(player, _this.find('.t'))){
game.stop();
return false;
}
}
});
timmer = requestAnimationFrame(game.bgMove);
}
你会发现里面其实也有好多写的不好的地方,例如每次刷新一帧都会用 $('.hand_l, .hand_r')把页面上所有的横梁节点都取一遍,这样扫描DOM树挺消耗时间的。完全可以把这些节点存在一个数组里。产生横梁的时候在数组中push,需要remove的时候从数组中删除。
至此,这个小游戏的关键部分就都完成了。剩下就是游戏的控制部分了,stop、restart什么的,其实只要把控制游戏的参数变量和class重置,cancelAnimationFrame,就ok了。
兼容PC和手机
这里的兼容主要是指click事件的300ms延迟,由于游戏来说,哪怕是一点点的延迟都会不爽。所以我检测了设备类型,如果是移动端,就绑定touchstart事件,代码片段如下:
isMobile : function(){
var sUserAgent= navigator.userAgent.toLowerCase(),
bIsIpad= sUserAgent.match(/ipad/i) == "ipad",
bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os",
bIsMidp= sUserAgent.match(/midp/i) == "midp",
bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",
bIsUc= sUserAgent.match(/ucweb/i) == "ucweb",
bIsAndroid= sUserAgent.match(/android/i) == "android",
bIsCE= sUserAgent.match(/windows ce/i) == "windows ce",
bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile",
bIsWebview = sUserAgent.match(/webview/i) == "webview";
return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
}
var eventType = this.isMobile() ? 'touchstart' : 'click';
$(document).on(eventType, function(){
if(++direction%2==0){
player[0].className = 'flyl';
}
else{
player[0].className = 'flyr';
}
});
分享到微博
为了让游戏易于传播,在网上搜了一段分享到微博的代码,试了一下好用,直接贴过来:
<a id="share" href="javascript:(function(){window.open('http://v.t.sina.com.cn/share/share.php?title=网页版SwingCopters,来,看看你有多挫&url=idoube.com/proj/SwingCopters&source=bookmark&pic=http%3A%2F%2Fidoube.com%2Fproj%2FSwingCopters%2FSwingCopters%2Fshot.jpg','_blank','width=450,height=400');})()">分享到微博</a>
其实在手机上的话,还应该加上微信分享,但是我在手机上玩了一下这个游戏后,顿时感觉没必要了。因为,手机上,那个卡啊!!fps估计在20左右。配置不错的三星尚且如此,可以想象其他安卓机会是什么情况。
另一个可喜的是,在iphone上玩竟然很流程!在此也不得不佩服ios对图形渲染的处理。
不过,如果以后再做这种动画比较多的游戏,我是肯定不会选择用DOM来做了。
总结
这是楼主第一次写小游戏,虽然最终搞出来的游戏像模像样也能玩,但写的过于仓促,有些知识也没有深究,中间踩了一些坑,整体代码质量也并不高。在这里列一列吧:
1. 有些动画是用纯css3完成,有些是写在js里,到底动画该如何归类应该细细考虑
2. 没有进行性能监测,我的机器配置较高,在chrome里可以跑到接近60fps。但感觉代码有些地方效率并不高。在Android机上直接卡爆。
3. 代码简单,js中用了很多全局变量。因为以前有听人说过,简单的程序直接用全局变量就行,性能高,但没有求证这种说法,不知正确与否,有高手知道请指点。
4. 对于动画比较多的小游戏,用DOM来做不是一个很好的选择,因为手机上卡,不能在微信里分享,效果直接就大打折扣了。下次试着用canvas来写。
5. 整个代码还是操作DOM的思维,其实做游戏应该用面向对象的风格来组织代码。
再次附上游戏地址,欢迎体验: http://idoube.com/proj/SwingCopters/
最后推荐一个我写css3动画经常参考的一个文档: http://ecd.tencent.com/css3/guide.html