java fly bird小游戏_JavaScript实现Fly Bird小游戏

3.1 小鸟

首先，创建小鸟的对象， bird.js 文件。

div:document.createElement("div"),showBird:function(parentObj) {

this.div.style.width = "40px";

this.div.style.height = "28px";

this.div.style.backgroundImage = "url(img/bird0.png)";

this.div.style.backgroundRepeat = "no-repeat";

this.div.style.position = "absolute";

this.div.style.left = "50px";

this.div.style.top = "200px";

this.div.style.zIndex = "1";

parentObj.appendChild(this.div); //将小鸟DIV插入游戏界面中

},fallSpeed: 0,//小鸟下落速度

flyBird: function(){ //控制小鸟飞翔下落的函数

bird.flyTimer = setInterval(fly,40);

function fly() {

bird.div.style.top = bird.div.offsetTop + bird.fallSpeed++ + "px";

if (bird.div.offsetTop < 0) {

bird.fallSpeed = 2; //这里用于控制小鸟不要飞出界面

}

if (bird.div.offsetTop >= 395) {

bird.fallSpeed = 0;

clearInterval(bird.flyTimer); //一旦飞到地面，清除定时器

clearInterval(bird.wingTimer); //清除翅膀摆动定时器

}

if (bird.fallSpeed > 12) {

bird.fallSpeed = 12; //鸟的最大下落速度控制在12

}

}

},wingWave: function() { //控制小鸟煽动翅膀的函数

var up = ["url(img/up_bird0.png)","url(img/up_bird1.png)"];

var down = ["url(img/down_bird0.png)","url(img/down_bird1.png)"];

var i = 0,j = 0;

bird.wingTimer = setInterval(wing,120);//逐帧动画，小鸟煽动翅膀

function wing() {

if (bird.fallSpeed > 0) {

bird.div.style.backgroundImage = down[i++];

if (i==2) {i = 0}

}if (bird.fallSpeed < 0) {

bird.div.style.backgroundImage = up[j++];

if (j==2) {j = 0}

}

}

},};

下面，实现点击start按钮时，加载小鸟。(在之前的代码基础上添加)

添加点击事件处理程序

jsHeadTitle.style.display = "none"; //隐藏标题

clearInterval(headWaveTimer); //关闭让标题摆动的定时器

jsStartBtn.style.display = "none"; //隐藏按键

bird.showBird(jsWrapBg); //插入小鸟到界面中

bird.flyBird(); //控制小鸟飞翔下落

bird.wingWave(); //逐帧动画，小鸟煽动翅膀

jsWrapBg.onclick = function(){

bird.fallSpeed = -8;

};

//待添加功能

//点击开始按键进入游戏界面

}

添加小鸟后的效果

3.2 障碍(上方水管和下方水管)

障碍分为上方管道和下方管道，如示意图所示结构嵌套，这样就可以通过随机设置DownDiv2的高度和gapHeight的高度，来改变生成障碍的形态

block.js

SEObj.randomNum(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,"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 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，同时在数组中删除。

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]);

}

}

}

当前的游戏效果

3.3 计分器

游戏中的计分器相对较好实现

score">

var jsscore = document.getElementById("score");

var jsNum1 = document.getElementById("num1");

var jsNum2 = document.getElementById("num2");

var jsNum3 = document.getElementById("num3");

var score = 0;

今天先这样了，改天再写。哈哈

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

相关文章

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250