公共对象文件 baseObj.js ，用来提供随机数，和两个矩形div的碰撞检测

var baseObj = { //随机数 randomNum: function(min, max) { return parseInt(Math.random() * (max - min + 1) + min); }, //两个矩形元素之间的碰撞检测 rectangleCrashExamine: function (obj1, obj2) { var obj1Left = obj1.offsetLeft; var obj1Width = obj1.offsetLeft + obj1.offsetWidth; var obj1Top = obj1.offsetTop; var obj1Height = obj1.offsetTop + obj1.offsetHeight; var obj2Left = obj2.offsetLeft; var obj2Width = obj2.offsetLeft + obj2.offsetWidth; var obj2Top = obj2.offsetTop; var obj2Height = obj2.offsetTop + obj2.offsetHeight; if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) { return true; } return false; }, };

下面我的想法是在start按钮点击的时候创建一个block，把这个block存储到数组blocksArr 中，在 landTimer 定时器的方法 landRun 中检查此数组的长度，如果数组不为空数组，那么就让数组中所有的block移动。

检查数组中最后一个block离开的距离，达到一定距离，就重新new 一个block，添加到数组。

检查数组中第一个block，一旦达到一定位置，就在结构中移除downDivWrap 和 upDivWrap，同时在数组中删除block。

        var blocksArr = []; var blockDistance = baseObj.randomNum(130,250); var landTimer = setInterval(landRun,30); //让草地动起来的定时器 function landRun() { if (jsGrassLand1.offsetLeft <= -343) { jsGrassLand1.style.left = "343px"; } if (jsGrassLand2.offsetLeft <= -343) { jsGrassLand2.style.left = "343px"; } jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + "px"; jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + "px"; if (blocksArr.length) { for (var i = 0; i < blocksArr.length; i++) { blocksArr[i].moveBlock(); var x =baseObj.rectangleCrashExamine(blocksArr[i].downDivWrap, bird.div); var y = baseObj.rectangleCrashExamine(blocksArr[i].upDivWrap, bird.div); var z = bird.div.offsetTop >= 390; if (x || y || z) { window.clearInterval(landTimer);//清除landTimer定时器 bird.fallSpeed = 0; //小鸟下落 jsWrapBg.onclick = null; //消除点击事件 } } if (blocksArr[blocksArr.length - 1].downDivWrap.offsetLeft < (450 - blockDistance)) { blockDistance = baseObj.randomNum(130,250); var newBlock = new Block(); newBlock.createBlock(); blocksArr.push(newBlock); } if (blocksArr[0].downDivWrap.offsetLeft < -50) { jsWrapBg.removeChild(blocksArr[0].downDivWrap); jsWrapBg.removeChild(blocksArr[0].upDivWrap); blocksArr.shift(blocksArr[0]); } } }

当前的游戏效果

play02.gif

3.3 计分器

游戏中的计分器相对较好实现，我们就实现最大为三位数的计分器吧。
html