首页 > 其他 > 详细

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

时间:2014-02-26 03:00:39      阅读:309      评论:0      收藏:0      [点我收藏+]

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

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

bubuko.com,布布扣

 

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

 

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

  场景动:

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

  小鸟飞:

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

  碰撞检查:

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

 

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

 

好吧。let‘s begin:

    场景动:

      canvas版:

bubuko.com,布布扣
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]);
}

}
bubuko.com,布布扣

      css3版:

bubuko.com,布布扣
//背景@-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;          
}
bubuko.com,布布扣

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

 

这里放个小tip:

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

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

    小鸟飞:

bubuko.com,布布扣
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;

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

具体数值需要在实际情况中校调。
bubuko.com,布布扣

 

  碰撞检查:

bubuko.com,布布扣

 

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


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

再来个小tips,~

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

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

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

等游戏不火了就开源~

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

原文:http://www.cnblogs.com/bugluo/p/3567320.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!