网络版会飞的小鸟 - 先写个单机版

最近飞扬的小鸟确实有够火的。

所以我们团队也来凑个热闹，弄个了网络版，做完了留下点东西大家分享一下。

 

顺便说一下canvas和css3+dom的优劣。

 

先讲一下这个小游戏要涉及到的逻辑，游戏的核心：

　　场景动：

　　　　背景平铺，视觉一直左移，并且按规律生成柱子。

　　小鸟飞：

　　　　小鸟一直固定在x轴同一个位置，y轴改变，垂直加速度下落，或者抬头飞行。

　　碰撞检查：

　　　　小鸟落地死，或者撞柱子死。

 

　　唯一一个事件，就是小鸟抬头飞。

 

好吧。let's begin：

　　　　场景动：

　　　　　　canvas版：

setTimeout(function(){
    flappy.Game.x += n;
　　 render();
　　
　　
　　
},x)
//背景
function render(){
　　for(var i=0;i<Math.ceil(flappy.C.width/flappy.Asset.ceiling.width)*2;++i) {
    flappy.D.drawImage(flappy.Asset.ceiling,i*flappy.Asset.ceiling.width-flappy.Game.x%flappy.Asset.ceiling.width, Background.CEIL - flappy.Asset.ceiling.height);
   }
   for(var i=0;i<Math.ceil(flappy.C.width/flappy.Asset.land.width)*2;++i) {
     flappy.D.drawImage(flappy.Asset.land,i*flappy.Asset.land.width-flappy.Game.x%flappy.Asset.land.width, Background.LAND);
   }

//柱子
   if(p[0]){
    flappy.D.fillRect(x+3,flappy.Background.CEIL,Pipe.WIDTH-6,p[0]);
    flappy.D.strokeRect(x+3,flappy.Background.CEIL,Pipe.WIDTH-6,p[0]-flappy.Asset.pipeDown.height+1);
    flappy.D.drawImage(flappy.Asset.pipeDown, x, flappy.Background.CEIL + p[0] - flappy.Asset.pipeDown.height);
   }
   if(p[1]) {
    flappy.D.fillRect(x+3,flappy.Background.LAND - p[1],Pipe.WIDTH-6,p[1]);
    flappy.D.strokeRect(x+3, flappy.Background.LAND-p[1]+flappy.Asset.pipeUp.height-1,Pipe.WIDTH-6,p[1]-flappy.Asset.pipeUp.height+1);
    flappy.D.drawImage(flappy.Asset.pipeUp, x, flappy.Background.LAND - p[1]);
  }
}

　　　　　　css3版：

//背景@-webkit-keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}

#background{
       -webkit-animation: animCeiling 481ms linear infinite;
}


@-webkit-keyframes animPipe {
   0% { left: 500px; }
   100% { left: -500px; }
}

.pipe{
     -webkit-animation: animPipe 7500ms linear;          
}

 可以看到css3代码的逻辑和实现简单许多。

 

这里放个小tip：

html5新增了requestAnimationFrame接口，用于替代setTimeout，详见

http://technet.microsoft.com/zh-cn/library/hh920765.aspx

　　　　小鸟飞：

Game.GRAVITY  = 0.34; // 重力加速 -> px/20ms
Game.VELOCITY = 3;  //速度;
Game.ANDLE    = 0.065; // 转角速度;


flappy.Game.VELOCITY = 6 * (stamp-progress) / 40;
flappy.Game.GRAVITY = 0.68 * (stamp-progress) / 40;
flappy.Game.ANDLE = 0.13 * (stamp-progress) / 40;

小鸟运动中，若一直自由飞行，下落速度自加，角度随着下落速度向下转角。
若触发向上飞行的事件速度为负，这样就可以向上飞行一段距离。

具体数值需要在实际情况中校调。

 

　　碰撞检查：

 

if(小鸟的头高度<上面柱子的尾巴 && 小鸟的脚所在高度>下面柱子的头)
   就过去了~~~

。。。介个游戏就完成了。

再来个小tips，~

由于机器差异导致每帧渲染的数据可能不同，所以利用时间戳可以算出每帧耗时，这样约定一个基准时间与之比较后，改变渲染背景和鸟的飞行速率。

明天再聊网络版的实现和简单的多人在线服务端架构。

线上扩展版地址：https://ext.se.360.cn/webstore/detail/bakmacfkoikhphmeejfjkehdlbpenjoh

等游戏不火了就开源~