jsHeadTitle.style.display = “none”; //隐藏标题
clearInterval(headWaveTimer); //关闭让标题摆动的定时器
jsStartBtn.style.display = “none”; //隐藏按键
bird.showBird(jsWrapBg); //插入小鸟到界面中
bird.flyBird(); //控制小鸟飞翔下落
bird.wingWave(); //逐帧动画,小鸟煽动翅膀
jsWrapBg.onclick = function(){
bird.fallSpeed = -8;
};
//待添加功能
//点击开始按键进入游戏界面
}
添加小鸟后的效果
play01.gif
3.2 障碍(上管道和下管道)
block示意图.png
障碍分为上管道和下管道,如示意图所示结构嵌套,这样就可以通过随机设置DownDiv2的高度和gapHeight的高度,来改变生成障碍的形态
block.js
function Block() {
this.upDivWrap = null;
this.downDivWrap = null;
this.downHeight = baseObj.randomNum(0,150);//随机生成0-150之间的数,用于控制下管道的高度
this.gapHeight = baseObj.randomNum(150,160);// 管道中间间隙宽度,通过调节大小,可以的控制游戏难度
this.upHeight = 312 - this.downHeight - this.gapHeight;
// 用来生成Div的方法
this.createDiv = function(url, height, positionType, left, top) {
var newDiv = document.createElement(“div”);
newDiv.style.width = “62px”;
newDiv.style.height = height;
newDiv.style.position = positionType;
newDiv.style.left = left;
newDiv.style.top = top;
newDiv.style.backgroundImage = url; //“url(/img/0.jpg)”
return newDiv;
};
this.createBlock = function() {
var upDiv1 = this.createDiv(“url(img/up_mod.png)”, this.upHeight + “px”);
var upDiv2 = this.createDiv(“url(img/up_pipe.png)”, “60px”);
this.upDivWrap = this.createDiv(null, null, “absolute”, “450px”);
this.upDivWrap.appendChild(upDiv1);
this.upDivWrap.appendChild(upDiv2);//生成上方管道
var downDiv1 = this.createDiv(“url(img/down_pipe.png)”, “60px”);
var downDiv2 = this.createDiv(“url(img/down_mod.png)”, this.downHeight +“px”);
this.downDivWrap = this.createDiv(null, null, “absolute”, “450px”, 363 - this.downHeight + “px”);
this.downDivWrap.appendChild(downDiv1);
this.downDivWrap.appendChild(downDiv2); //生成下方的管道
jsWrapBg.appendChild(this.upDivWrap);
jsWrapBg.appendChild(this.downDivWrap);
};
this.moveBlock = function() { //控制管道移动的方法
this.upDivWrap.style.left = this.upDivWrap.offsetLeft - 3 + “px”;
this.downDivWrap.style.left = this.downDivWrap.offsetLeft - 3 + “px”;
};
}
公共对象文件 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
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”按钮添加点击事件。
![game over](img/game_over.jpg)
![message](img/message.jpg)
![ok](img/ok.jpg)
#gameOver{ position: absolute; top: 100px; text-align: center; display: none; z-index: 1; }
为“OK”按钮添加事件
jsOkBtn.onclick = function() { window.location.href = "index.html"; //刷新页面 }
最终效果
最后
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
onclick = function() { window.location.href = “index.html”; //刷新页面 }`
最终效果
最后
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。