DOM+CSS3实现小游戏SwingCopters

　　前些日子看到了一则新闻，flappybird原作者将携新游戏SwingCopters来袭，准备再靠这款姊妹篇游戏引爆大众眼球。就是下面这个小游戏：

　　　

　　前者的传奇故事大家都有耳闻，至于这第二个游戏能否更加火爆那是后话了。不过我看了作者的宣传视频后，蠢蠢欲动，这么简单的小游戏我山寨一个网页版出来如何？简单思索一下，打算用DOM+CSS3来实现一个。一来强化一个下自己的CSS3知识，二来也探索下用原生DOM来做动画的性能到底如何。
　　三四天后，原作者的SwingCopters貌似没怎么火起来，看来flappybird的神话只是一个偶然呀~不过我的山寨版倒是有模有样的做出来了，点这里查看Demo，请在chrome下打开， 你懂的。

　　先来说下整体思路，基本的动画效果，如移动、旋转，用CSS3的transition、transform+keyframes来做，把基本的动画单元做成一个个css类，为元素添加对应的class就可以让它动起来，删除、更改class则可以让元素停止、切换动画。至于什么时候进行切换，一方面是根据用户的操作，另一方面是根据游戏的“主线程”来判断。所谓“主线程”，就是控制游戏画面不停刷新的代码，游戏的主控制逻辑都写在这里，包括场景生成、碰撞检测等。大家都知道动画是由页面的不停重绘来产生的，当每秒的刷新次数达到60时，人眼会感觉到流畅的动画，这也是大多数游戏追求60fps的原因。关于如何做帧刷新有几种方法，具体可参看这里（http://qingbob.com/javascript-high-performance-animation-and-page-rendering/）。我这里采用requestAnimationFrame来做，它的好处是让你用代码来请求一次帧刷新，这样能避免“掉帧”，但是负面影响是，当机器性能不好时，会降低帧率，表现就是你看到游戏的动画变缓慢了。

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