網絡版會飛的小鳥 - 先寫個單機版

最近飛揚的小鳥確實有夠火的。

所以我們團隊也來湊個熱鬧，弄個了網絡版，做完了留下點東西大家分享一下。

 

順便說一下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

等游戲不火了就開源~