这是一个特别简单的用原生射流研究…实现的一个小鸟游戏，比较简单，适合新手练习。

超文本标记语言结构

div id=' game ' div id=' bird '/div/div CSS样式

#游戏{ width: 800px高度： 600像素；border: 1px固体# 000;背景： URL(图片/天空。巴布亚新几内亚)；飞越：隐藏；相对位置：} #游戏。管道{背景： URL(图片/管道1。巴布亚新几内亚)顶部中心；绝对位置：} #游戏pipeU {背景： URL(图片/管道2。巴布亚新几内亚)底部中心；绝对位置：} # bird { width: 34px高度： 25px/*边框半径： 10px*//*背景-颜色：红色；*/position:绝对值；top: 100pxleft: 100px背景： URL(图片/小鸟。png)-8px-10px不重复；}下面就是原生射流研究…代码了，这个小案例还运用了自己前期封装的一个小的动画方法

函数动画(obj，json，fn){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var flag=true；for(JSON中的var k){ if(k=='不透明度){ var leader=getStyle(obj，k)* 100；var target=JSON[k]* 100；var step=(目标-领导者)/10;步骤=步骤0?数学天花板（台阶):数学地板（台阶);领导者=领导者步骤；物体。style[k]=leader/100；} else if(k==' zIndex '){ obj。风格。zIndex=JSON[k]；} else { var leader=ParSeint(GetStyle(obj，k))| | 0；var target=JSON[k]；var step=(目标-领导者)/10;步骤=步骤0?数学天花板（台阶):数学地板（台阶);领导者=领导者步骤；物体。style[k]=leader ' px '；} if (leader！==target){ flag=false；} } if(flag){ clearInterval(obj。计时器)；if(fn){ fn()；} } }, 15);}函数getStyle(obj，attr){ if(window。getcomputed style){返回窗口。get computed style(obj)[attr]；} else { return obj。current style[attr]；}}下面就是控制游戏的射流研究…代码了

var bird元素=文档。getelementbyid(' bird ')；var game=文档。getelementbyid(' game ')；var game over=false var g=1；var I=0；定义变量计时器=nullvar bird={ x : bird元素。向左偏移，y: birdElement.offsetTop，speedX: 5，speedY: 0，实体： bird element }；var sky={ x : 0 }；//var timer=setInterval(function(){//bird元素。风格。背景位置x=-52 * I ' px '；//I；//if(I===3){//I=0；//}//},100);setInterval(函数(){ //游戏没有结束的时候运行代码if(！gameover) { //整个游戏背景x轴移动的距离天空。x=天空。x鸟。SpeedX游戏。风格。背景位置x=天空。x ' px//小鸟下落时y轴的坐标小鸟。速度=鸟。speed g；//设置一个变量用来接收小鸟下落时y轴的坐标，用来设置小鸟下降时的速度var step=bird . speedybird . y=bird . y步；//用一个变量来设定小鸟下落的最低高度，用来判断游戏是否结束var overY=游戏。抵消鸟元素。偏移光线；//小鸟的y轴坐标大于最低高度，所以游戏停止如果(鸟。鸟。y=Overystop()；} //小鸟的y轴坐标小于0,说明碰到顶部边框，所以游戏结束如果(鸟。y 0){伯德。y=0；stop()；} //设置游戏开始时小鸟出现的位置小鸟。实体。风格。top=鸟。y ' px}}, 25);//添加键盘事件，实现键盘上下键控制小鸟文件。onkey up=function(e){ if(e . key code===38){ bird。speedy=-10；} }函数管道(postonx){//管子的坐标this.x=positonXthis。uppipey=0；this.width=52this。uppipeh=parsent(数学。random()* 175 100)；这个。DownPipey=这个。upPipeh 200这个。DoWnipeh=游戏。抵消这个重量。下行线；//动态添加管子var div up=文档。创建元素(' div ')；向上分。NAmE=' PipeU向上分。风格。宽度=这个。宽度' px '；向上分。风格。高度=这个。uppipeh ' px向上分。风格。左=这个。x ' px向上分。风格。top=这个。uppipey ' px游戏。append child(Divup)；var DivDown=文档。创建元素(' div ')；向下分格。类名=“Pipped”；向下分格。风格。宽度=这个。宽度' px '；向下分格。风格。高度=这个。DoWnipeh ' px向下分格。风格。左=这个。x ' px向下分格。风格。top=这个。DownPipey ' px游戏。append child(DivDown)；//因为定时器会混乱这的指向问题，所以提前保存这的指向，这里的这指向调用该方法的实例变量=这个；//设置定时器让管子向后移动这个。timer=setInterval(function(){ that。x=那个。x-1；//简单实现管子无缝滚动如果(那个。x-52){那个。x=800} if(！游戏结束。风格。左=那个。x ' px向下分格。风格。左=那个。x ' px} //设置变量，进行游戏碰撞检测，并停止游戏var down trach=(鸟。x 34那个。x)(鸟。x那个。x 52)(鸟。25岁那年。down ipey)；var upCrash=(鸟。x 34那个。x)(鸟。x那个。x 52)(鸟。你知道的。uppipeh)；if(down crash | | upCrash){//game over=true；stop()；} }, 10);}//执行上面的函数方法var arr=[]；for(var I=0；i4；I){ arr[I]=新管道(一* 200 400)；}//封装一个用来停止游戏的方法，函数stop(){ game over=true；clearInterval(计时器);for(var I=0；长度；i ){ clearInterval(arr[i]).计时器);}}注释都写在了了代码里，一个简单小游戏就完成了。

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