JS+CSS实现小游戏Flappy bird

最近在复习JS，写着练练手

项目结构

整个项目分成六个部分

• Util 工具类
• Param 配置类
• Pipe 管道类
• Bird 鸟类
• Score 分数类
• Main 主程序

显示效果

游戏效果大概是这样，碰撞坐标的判定感觉还有点问题，有空再调：

模块介绍

下面简单介绍下各模块

（1）Util工具类
工具类模仿JQuery封装一个$方法来用id获取页面元素，看起来比较内行

// 仿JQuery$函数
$: function(id){
return document.getElementById(id)
},

（2）Param 配置类
  配置类主要就是一个对象，存放鸟宽高，速度，重力加速度，管子宽高，背景宽高，板子间距等数值，调整参数能改变实际游戏中显示效果，提高可玩性。改变管子间距出现模式可以增减难度，不过没做难度选择。

（3）Pipe 管道类
  管道出现思路是把所有的管子在开始游戏时一次性渲染好，并且每个管子分成上下两管，html表示：

<div class="pipe_back">
    <div class="pipe">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</div>

  每个div pipe就是一根管子，间距在param中确定，同时保证管口露出来的同时进行随机高度显示。为了方便获取每个pipe中的高度信息，把当时计算得到的top位置setAttribute到这个div元素中，后面进行碰撞判断时可以用。

//通过口固定，直接获取随机值为top的下边缘离top的位置
                    
var r = Math.random() * (param.BACKGROUNDHEIGHT - param.ENTER - param.HEADHEIGHT * 2) + param.HEADHEIGHT * 0.9
var sTop = r - param.PILLARHEIGHT
topPipe.style.top = sTop
var sBottom = param.BACKGROUNDHEIGHT - r - param.ENTER - param.PILLARHEIGHT
bottomPipe.style.bottom = sBottom

//设置属性，在bird通过时方便判断
pipe.setAttribute("top", param.BACKGROUNDHEIGHT - (param.PILLARHEIGHT + sTop))
pipe.setAttribute("bottom", param.BACKGROUNDHEIGHT - (param.PILLARHEIGHT + sTop) - param.ENTER)

（4）Bird 鸟类
  鸟主要就是实现跳跃和碰撞判断，每次跳跃时进行位移计算。利用公式
$S = Vt + 1/2 * g * t^2$S=Vt+1/2∗g∗t2
来实现。对象中维护一个time来作为当前一次跳跃经过的时间，下一次跳跃开始时调用atPostion方法清空时间。
碰撞判断很简单，获取当前pipe以及对应的top，bottom值和鸟的位置对比就行。
  为了不让飞出天花板，在每次跳跃时进行计算，超过天花板硬深深挪下来。不过这样导致撞到天花板后下落初速度很大，解决方案可能是把跳跃分为上升和下降，比较麻烦就没改。

//鸟卡在天花板
}else if(t.Y > param.BACKGROUNDHEIGHT - param.CEILING - param.BIRDHEIGHT){
var pos = param.CEILING
$("bird").style.top = pos + "px" + 5
param.BIRDY =  param.BACKGROUNDHEIGHT - param.CEILING - param.BIRDHEIGHT -5
t.reachOver = true
// 此时time为位移量为0时
t.time = param.V / param.G 

（5）Score 分数类
  之前在pipe中获取当前管子编号，分数就是该编号+1。
  图片是分别计算十位和个位之后替换得到的，位置固定。

（6）Main 主程序
  首先开始时初始化上述对象，之后监听click事件进行操作。最开始点击，start为true，鸟开始跳跃。程序setInterval定时操作来实现每帧计算，每帧judge方法计算鸟有没有死，鸟死后显示游戏结束页面和分数。
游戏结束要重来，直接调用了window.location的reload，方便一点。
  值得一说的是为了能clearInterval，bird对象中调用死亡方法是用call来调用main传入的函数，这样在main中维护一个timer就能进行全局的帧计算了。

t.timer = setInterval(
                        function(){
                            //计算跳跃，管道移动，碰撞判断，分数计算
                            bird.jump()
                            pipe.move()
                            score.changeScore()
                            bird.judge()
                        }, param.FREQUENCY
                    )      

源码链接

项目已开源至github
https://github.com/huiluczP/js_flappy_bird link