css样式

#score{ position:absolute; left: 130px; top:50px; z-index: 1; } #score div{ height: 39px; width: 28px; float: left; background-image: url(../img/0.jpg); display: none; }

js

        var jsScore = document.getElementById("score"); var jsNum1 = document.getElementById("num1"); var jsNum2 = document.getElementById("num2"); var jsNum3 = document.getElementById("num3"); var score = 0;

实现计数器功能，最重要的是如何判断走过水管的数量，我们以水管的位置来判断。bird的定位left为50px，水管的宽度是62px，当水管越过小鸟的时候，水管距离它父级的定位offsetLeft 是 -12px。每当有一个水管到达此位置，score++；
在start按钮的事件处理程序中加入

jsNum1.style.display = "block";// 在点击开始之后，让计数器显示出来。

       if (blocksArr[0].downDivWrap.offsetLeft == -12) { score++;//积分面板 if (score < 10) { jsNum1.style.backgroundImage = "url(img/" + score + ".jpg)"; } else if (score < 100) { jsNum2.style.display = "block"; jsNum1.style.backgroundImage = "url(img/" + parseInt(score/10) + ".jpg)"; jsNum2.style.backgroundImage = "url(img/" + score%10 + ".jpg)"; } else if (score < 1000) { jsNum3.style.display = "block"; jsNum1.style.backgroundImage = "url(img/" + parseInt(score/100) + ".jpg)"; jsNum2.style.backgroundImage = "url(img/" + parseInt(score/10)%10 + ".jpg)"; jsNum3.style.backgroundImage = "url(img/" + score%10 + ".jpg)"; } console.log(score); }

目前效果 ，计数器功能完成。

play03.gif

4.“结束界面”的开发

当小鸟和管道碰撞或者和地面碰撞时候，隐藏计分器，弹出结束面板。
结束界面主要有“结束面板”和“ok”按钮，这里需要为“ok”按钮添加点击事件。

            <div id="gameOver"> <img src="img/game_over.jpg" alt="game over" /> <img src="img/message.jpg" alt="message" /> <img id="ok" src="img/ok.jpg" alt="ok" /> </div>

#gameOver{ position: absolute; top: 100px; text-align: center; display: none; z-index: 1; }

为“OK”按钮添加事件

        jsOkBtn.onclick = function() { window.location.href = "index.html"; //刷新页面 }

最终效果

play04.gif

有兴趣的朋友，可以加群下载代码，然后加上音效

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！