最近飞扬的小鸟确实有够火的。
所以我们团队也来凑个热闹,弄个了网络版,做完了留下点东西大家分享一下。
顺便说一下canvas和css3+dom的优劣。
背景平铺,视觉一直左移,并且按规律生成柱子。
小鸟一直固定在x轴同一个位置,y轴改变,垂直加速度下落,或者抬头飞行。
小鸟落地死,或者撞柱子死。
唯一一个事件,就是小鸟抬头飞。
好吧。let‘s begin:
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]);
}
}
//背景@-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:
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
等游戏不火了就开源~
原文:http://www.cnblogs.com/bugluo/p/3567320.html