JavaScript实现飞鸟游戏

本教程分享了飞鸟游戏的制作过程，供大家参考。具体内容如下

1.分析页面结构，明确需求和功能

游戏有三个界面，分别是开始界面、游戏界面和游戏结束界面。

1.1启动界面

start.gif

游戏大背景上下移动游戏标题和翅膀摆动的小鸟启动按钮，点击进入游戏界面一直移动的地面

1.2游戏界面

play.gif

显示得分手跨越障碍物数量的障碍物是游戏界面上点击的上管道和下管道，鸟在重力作用下飞起后落下。当鸟撞击管道时，末端界面弹出，鸟同时落地。

1.3终端接口

游戏结束提示面板确定按钮

2.开发“开始界面”

考虑到草原的移动效果，我们在页面中添加了两个草原

2.1 HTML

！DOCTYPE html html head meta charset=' utf-8 '/title fly Bird/title link rel='样式表' type=' text/CSS ' href=' CSS/index . CSS '/head body div id=' wrappbg '！-游戏背景-div id=' head title '！-start title-img id=' head bird ' src=' http : img/bird 0 . png ' alt=' bird '/！-标题中的鸟-/div按钮id='启动BTN '/按钮！-start按钮- div id='grassLand1'/div'/div！-草原1 1 - div id='grassLand2'/div'/div！-grass 2-/div/body/html2.2css

# wrappbg {/*游戏背景*/width : 343 px；高度： 480 px；margin: 0 auto背景-图像：url(./img/BG . jpg)；相对位置：top: 100px飞越：隐藏；} # head title {/* start title */width : 236 px；高度： 77px；背景-图像：网址(./img/head . jpg)；绝对位置：left: 53pxtop: 100px}#headBird{/*开头标题中的鸟*/float : right；边距-top : 25px；} # StartBtn {/* start button */width : 85px；高度： 29px；padd : 0；margin : 0；背景-图像：网址(./img/start . jpg)；绝对位置：left: 129pxtop: 250px}#grassLand1{/*草原1 */height : 14px；宽度： 343 px；背景-图像：网址(./img/banner . jpg)；绝对位置：top: 423px}#grassLand2{/*草原2 */height : 14px；宽度： 343 px；背景-图像：网址(./img/banner . jpg)；绝对位置：top: 423pxleft: 343px} wrap BG中隐藏了overflow:hidden的页面效果被注释掉

开始界面。使用jpeg文件交换格式存储的编码图像文件扩展名

2.3 JS

鸟类拍动翅膀的效果需要逐帧动画的原理，这是一种常见的动画形式。其原理是将动画动作分解在“连续关键帧”中，即在时间轴的每一帧上逐帧绘制不同的内容，并使其连续播放形成动画。

2.3.1开始标题摆动

var jshead title=document . getelementbyid(' head title ')；//获取标题var jshead bird=document . getelementbyid(' head bird ')；//获取标题中的鸟var Y=3；//标题var指标的摆动幅度=0；Varimgar=['img/bird0.png '，' img/bird 1 . png ']//将鸟的图片路径放入一个数组中，利用逐帧动画的原理使鸟的翅膀摆动。var head avetimer=set interval(head ave，200)；//设置标题上下摆动时的定时器功能HeadWave(){ Y *=-1；jshead title . style . top=jshead title . offsettop Y ' px '；jsheadbird . src=IMgarr[index]；if(index==2){ index=0；} }2.3.2移动草原

var jsgrassland 1=document . getelementbyid(' grassland 1 ')；//获取草原1 varjs grass land 2=document . getelementbyid(' grass land 2 ')；//get草原2 var land timer=set interval(land run，30)；//定时器函数landrun(){ if(jsgrasland 1 . offsetleft=-343){ jsgrasland 1 . style . left=' 343 px '；} if(jsgrasland 2 . offsetleft=-343){ jsgrasland 2 . style . left=' 343 px '；} jsgrassland 1 . style . left=jsgrassland 1 . offsetleft-3 ' px '；jsgrasland 2 . style . left=jsgrasland 2 . offsetleft-3 ' px '；}2.3.3开始按钮

var jsStartBtn=文档。getelementbyid(' startBtn ')；jsstartbtn。onclick=function(){//为开始按键添加点击事件处理程序jshead标题。风格。显示='无'；//隐藏标题clearInterval(head avetimer)；//关闭让标题摆动的定时器jsstartbtn。风格。display=" none//隐藏按键//待添加功能//点击开始按键进入游戏界面}完成后的效果（注释掉了wrapBg中的飞越：隐藏)

start01.gif

接下来我们开发"游戏界面"3."游戏界面"的开发游戏界面中有三样元素，分别是"小鸟","障碍",和"计分器",我们依次来创建相应的对象。3.1 小鸟首先，创建小鸟的对象，bird.js文件。

var bird={ flyTimer:null，//小鸟飞翔定时器wingTimer:null，//小鸟翅膀摆动定时器div :文件。create元素(' div ')，showbird :函数(ParentObj){ this。div。风格。宽度=' 40px这个。div。风格。高度=' 28px这个。div。风格。背景图像=' URL(img/bird 0。png)'；这个。div。风格。背景重复='无重复'；这个。div。风格。位置='绝对'；这个。div。风格。left=' 50px这个。div。风格。top=' 200px这个。div。风格。zindex=' 1父母。appendchild(这个。div)；//将小鸟差异插入游戏界面中}，fallSpeed: 0，//小鸟下落速度flyBird:函数(){ //控制小鸟飞翔下落的函数bird.flyTimer=setInterval(fly，40)；函数fly(){ bird。div。风格。top=鸟。div。越位鸟。fallspeed ' px如果(鸟。div。offsettop 0){ bird。fall speed=2；//这里用于控制小鸟不要飞出界面} if(bird。div。offsettop=395){ bird。fall speed=0；clearInterval(鸟。flyTiMer)；//一旦飞到地面，清除定时器clearInterval(鸟。WinTimer)；//清除翅膀摆动定时器} if(bird。下降速度12){鸟。下降速度=12；//鸟的最大下落速度控制在12 } } }，wingWave:函数(){ //控制小鸟煽动翅膀的函数var up=['url(img/up_bird0.png)'，' URL(img/up _ bird 1。png)']；var down=[' URL(img/down _ bird 0。png)'，' URL(img/down _ bird 1。png)']；var i=0，j=0；小鸟。wing TiMer=设定间隔(wing，120)；//逐帧动画，小鸟煽动翅膀函数wing(){ if(bird。fallspeed 0){ bird。div。风格。背景图像=向下[I]；if(I==2){ I=0 } } if(bird。fallspeed 0){ bird。div。风格。背景图像=up[j]；if (j==2) {j=0} } }，}；下面，实现点击开始按钮时，加载小鸟。(在之前的代码基础上添加)

jsstartbtn。onclick=function(){//为开始按键添加点击事件处理程序jshead标题。风格。显示='无'；//隐藏标题clearInterval(head avetimer)；//关闭让标题摆动的定时器jsstartbtn。风格。display=" none//隐藏按键小鸟。show bird(jswrappbg)；//插入小鸟到界面中小鸟。FlyBird()；//控制小鸟飞翔下落小鸟。wingway()；//逐帧动画，小鸟煽动翅膀jswrappg。onclick=function(){ bird。fall speed=-8；};//待添加功能//点击开始按键进入游戏界面}添加小鸟后的效果

play01.gif

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

街区示意图。巴布亚新几内亚

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

function Block(){ this。updivwrap=nullthis.downDivWrap=nullthis。向下高度=BaseObj。randomnum(0，150)；这个。GapHeight=BaseObj。随机数(150，160)；这个。up heat=312-这个。向下高度-这个。间隙高度；//用来生成差异的方法this.createDiv=函数(网址),高度、位置类型、左侧、顶部){ var new div=document。创建元素(' div ')；新区。风格。宽度=' 62px新部门。风格。高度=高度；新部门。风格。位置=位置类型；新部门。风格。左=左；新区。风格。top=top新区。风格。背景图片=URL//“URL(/img/0 . jpg)”返回new DiV }；这个。create block=function(){ var updiv 1=this。创建div(' URL(img/up _ mod。png)’，这个。uph quare ' px ')；var updiv 2=这个。创建div(' URL(img/up _ pipe。png)'，' 60px ')；这个。updivwrap=this。创建div(null，null，‘absolute’，‘450 px’)；这个。updivwrap。append child(updiv 1)；这个。updivwrap。append child(updiv 2)；//生成上方管道var DownDiv 1=这个。CreateDiv(' URL(img/Down _ pipe。png)'，' 60px ')；var down div 2=这个。创建div(' URL(img/down _ mod。png)’，这个。向下高度‘px’；这个。down divwrap=这个。creatediv(null，null，' absolute '，' 450px '，363-this。向下高度‘px’；这个。羽绒被。appendchild(向下1区)；这个。DownDivwrap。append child(DownDiv 2)；//生成下方的管道jswrapbg。appendchild(这个。updivwrap)；jswrappbg。appendchild(这个。Dow div wrap)；};this.moveBlock=function() { //控制管道移动的方法这个。updivwrap。风格。左=这个。updivwrap。offset left-3 ' px '；这个。羽绒被。风格。左=这个。羽绒被。offset left-3 ' px '；};}公共对象文件baseObj.js，用来提供随机数，和两个矩形差异的碰撞检测

var baseObj={ //随机数randomNum:函数（最小值，最大值){返回解析器(数学)。random()*(max-min-1)min)；}, //两个矩形元素之间的碰撞检测矩形碰撞检测器：函数(obj1，obj 2){ var obj 1 left=obj 1。offsetleftvar obj 1宽度=obj 1。offsetleft obj 1。偏移；var obj 1 ToP=obj 1。偏移量ToPvar obj 1高度=obj 1。偏移顶部对象1。偏置heaghtvar obj2Left=obj2 . offsetleftvar obj 2宽度=obj 2。offsetleft obj 2。偏移；var obj 2 ToP=obj 2。偏移量ToPvar obj 2高度=obj 2。偏移顶部对象2。偏移光线；if(！(obj 1左侧obj 2宽度| | obj 1宽度obj 2左侧| | obj 1顶部obj 2高度| | obj 1高度obj 2顶部)){ 0返回真}返回false}，}；下面我的想法是在开始按钮点击的时候创建一个街区，把这个街区存储到数组blocksArr中，在陆地定时器定时器的方法兰德鲁中检查此数组的长度，如果数组不为空数组，那么就让数组中所有的街区移动。检查最后一个街区离开的距离，达到一定距离，就重新新的一个街区，添加到数组。检查第一个街区，一旦达到一定位置，就在结构中移除downDivWrap和upDivWrap，同时在数组中删除。

var landTimer=设置间隔(landRun，30)；//让草地动起来的定时器函数landRun(){ if(jsgrasland1。offsetleft=-343){ jsgrasland1。风格。left=' 343 px} if(jsgrasland 2。offsetleft=-343){ jsgrasland 2。风格。left=' 343 px} js blade 1。风格。left=js slaverage 1。offset left-3 ' px '；jsgrasland 2。风格。left=jsgrasland 2。offset left-3 ' px '；if(blocksarr。长度){ for(var I=0；I blocksArr . lengthi){ blocksArr[I].move block()；var x=baseObj。rectanglecrash审查(blocksArr[I]).向下折叠，鸟。div)；var y=baseObj。rectanglecrashreview(blocksArr[I]).向上缠绕，鸟。div)；var z=鸟。div。offsettop=390if(x | | y | | z){ window。clear interval(LANDTimer)；//清除陆地定时器定时器小鸟。fallSpeed=0；//小鸟下落jsWrapBg.onclick=null//消除点击事件} } if(blocksArr[blocksArr。长度-1]。向下折叠。offset left(450-块距离)){块距离=baseObj。random num(130 250)；var新区块=新区块()；新街区。创建块()；布洛克萨尔。推送(新区块)；} if(blocksArr[0]。向下折叠。offset left-50){ jswrepbg。removechild(blocksArr[0]).Dow div wrap)；jswrappbg。removechild(blocksArr[0]).upDivWrap)；blocksArr。shift(blocksArr[0])；} } }当前的游戏效果

play02.gif

3.3 计分器

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

div id=' score ' div id=' num 1 '/div div id=' num 2 '/div div id=' num 3 '/div/div var jsScore=document。getelementbyid(' score ')；var jsnum 1=文档。getelementbyid(' num 1 ')；var jsnum 2=文档。getelementbyid(' num 2 ')；var jsnum 3=文档。getelementbyid(' num 3 ')；定义变量得分=0;今天先这样了，改天再写。哈哈

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