先来看看开始的界面图

实现思路：

1.打开页面，背景开始走动；

2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；

3.当敌人碰到子弹，敌人消失；

4.当敌人和飞机相遇，飞机死亡，结束游戏；

超文本标记语言页面

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题飞机大战/title link rel='样式表type='text/css' href='飞机大战. css'/headbody div id='mainScreen '！-背景图片-div id=' bgimg 1 ' class=' BG '/div div id=' bgimg 2 ' class=' BG '/div！-飞机- div id='飞机/div！-开始按钮-div id='开始菜单' a href=' # ' id='开始'开始/a/div！-重新开始按钮-div id='重新启动菜单' a href=' # ' id='重启'游戏结束！br/重新开始/a/-敌人-div='敌人/div='敌人/div='敌人/div='敌人/div='敌人/div='敌人/div！-子弹-div class=' bullet '/div class=' bullet '/div class=' bullet '/div class=' bullet '/div class=' bullet '/div class=' bullet '/div class=' bullet '/div class=' bullet '/div class=' bullet '/div/div脚本类型=' text/JavaScript ' src=' http 3360 unckbase。js /脚本类型=' text/JavaScript ' src='飞机大战“js ”/脚本/正文/htmlcss样式

* { margin : 0；padd : 0；字体系列： '微软雅黑；} #主屏幕{ width: 512px高度： 768像素；margin:0汽车相对位置：飞越：隐藏；}.bg { width: 512px高度：768 px绝对位置：背景：网址(BG。jpg)；} # bgimg 2 { top :-768 px；} #飞机{ width : 109 pxh three : 82px绝对位置：背景： URL(英雄。巴布亚新几内亚)；left : 215 xtop : 668 px }。敌人{位置：绝对；宽度： 30pxheight : 30pxleft :-100 px；top: 0pxbackground: url(敌人。巴布亚新几内亚)；背景尺寸size: 30px 30px}。项目符号{位置：绝对值；宽度： 5pxheight : 10pxleft :-100 px；top :-100 px；背景： URL(项目符号。巴布亚新几内亚)；背景尺寸size: 5px 10px}#startMenu，# restart menu { position : absolute；宽度： 512像素；文本对齐：中心；左： 0；top: 300px} #开始，#重启{行高：50 pxfont-size :30 px字体粗细：加粗；color: # F00显示：块；文本装饰：无；} # RestartMenu { display : none；}进入页面时，背景开始动

//给背景设置定时器，让背景不停的动，形成动感var bgTimer=setInterval(bgRun，10)；函数bgRun(){ jsbg 1。风格。top=jsbg 1。offset top 1“px”；jsbg 2。风格。top=jsbg 2。offset top 1“px”；if(JSbg 1。offsettop=768){ JSbg 1。风格。top='-768 px '；} else { if(JSbg 2。offsettop=768){ JSbg 2。风格。top='-768 px '；} }}点击开始，进入游戏

游戏中

注：其实子弹和敌人的标签没有几个，但是我们使用定时器，开始之前，现将表现都放在屏幕外，进入游戏需要时候再改变标签定位，将其放入到页面中。

var jsStartBox=文档。getelementbyid(' startMenu ')js start。onclick=函数startGame(){ jsStartBox。风格。显示='无'；var BaseX=0；var BaSey=0；var moveX=0；var moveY=0；jsairline。onmousedown=function(e){ var evt=e | | window。事件；baseX=evt . page xbase y=evt . page yjsdivbox。onmousemove=function(v){ var vt=v | | window。事件；moveX=vt。PageX-BaseX；baseX=vt.pageXmoveY=vt。基于页面的；baseY=vt.pageYjs FAILURE。风格。left=js FAILURE。offsetleft moveX ' pxjs FAILURE。风格。top=js FAILURE。偏移顶部移动“px”；};};jsairine。onmouseup=function(){ mainscreen。onmousemove=null} //找到可用的子弹var findBulletTimer=设置区间(findbull，300)；函数find bull(){ for(var I=0；I js bullets . lengthi){ if(js bullets[I][' IsShow ']==false){ js bullets[I][' IsShow ']=true；//将子弹移动到飞机头js子弹【我】。风格。左=js航空公司。日本海外航空公司。offset with/2 ' px '；js子弹【我】。风格。top=js航空公司。offset top“px”；打破；} } } ////让子弹飞var bulletflymiter=设置区间(bulletFlay，100)；函数BulletFlay(){ for(var j=0；j js bullets . length j){ if(js bullets[j][' IssShow ']==true){ if(js bullets[j]).offsetTop-20){ js子弹[j]。风格。top=js项目符号[j].偏移顶部-20 ' px '；} else { jsBullets[j]。风格。left='-100px '；jsBullets[j]。风格。top='-100px '；jsBullets[j][' IsShow ']=false；} } } } //找到可用敌人var findenymytimer=设置间隔(查找敌国，500);函数发现敌方(){ //找到一个没有在屏幕中的敌人for(var I=0；I jsenemys . lentii){ if(js敌国[I][' IsShow ']==false){//标记敌人已经使用js敌国[I][' IsShow ']=true；//将敌人移动到屏幕var left=randomNum(0，482)；jsEnemys[I]。风格。left=left ' pxjs敌国[I]。风格。top=0 ' px打破；} } } ////让敌人下落var敌方土地计时器=设定间隔(敌方土地，100)；函数敌方陆地(){ for(var j=0；j jsEnemys . length j){ if(jsEnemys[j][' isShow ']==true){ var a=randomNum(4，20)；if (jsEnemys[j].offsetTop=768){ js敌国[j]。风格。top=敌国[j].offsetTop a ' px} else { jsEnemys[j]。风格。left='-100px '；jsEnemys[j]。风格。top=' 0pxjsEnemys[j][' IsShow ']=false；} } } } }打中怪物

用页面上存在每一个敌人和每一个子弹的定位进行简则，如果相撞，那么怪物消失

var perishEnemyTimer=设置区间(perishEnemy，50)；函数perishEnemy(){ for(var I=0；I js bullets . lengthi){ if(js bullets[I][' IsShow ']==true){ for(var j=0；j jsenemys . length j){ if(js敌人[j][' IssShow ']==true){ var ret=pzjcFunc(js子弹[I]，js敌人[j])；if(ret){ jsBullets[I]。风格。left='-100px '；jsBullets[I]。风格。top='-100px '；jsBullets[I][' IsShow ']=false；jsEnemys[j]。风格。left='-100px '；jsEnemys[j]。风格。top='-100px '；jsenemy[j][' IsShow ']=false；} } } } }}死亡检测

游戏结束

用页面上存在每一个敌人和飞机的定位进行检测，如果两者相遇，那么结束游戏。

注：检测时考虑取反，坦克在飞机上面，在飞机下面，在飞机左边，在飞机右边是没有碰到的时候，那么我们取反就是说明两者已经相遇了。

//死亡检测定义变量营养师=setInterval(芯片，50)；var jsStop=文档。getelementbyid(“重启菜单”)函数die(){ for(var I=0；I jsEnemys . len hei){ if(jsEnemys[I][' IssShow ']==true){ var Isdie=pzjcFunc(js airline，jsEnemys[I])；if(IsDie){ JSstop。风格。display=' blockjsairine。onmouseup=function(){ mainscreen。onmousemove=null} } } }}上述两步中用到的检测两者是否碰撞的函数

//死亡检测的函数函数pzjcFunc(obj1，obj 2){ var obj 1 left=obj 1。offsetleftvar obj 1宽度=obj 1左侧obj 1。用.抵消；var obj 1 ToP=obj 1。偏移量ToPvar obj 1高度=obj 1顶部obj 1。偏移光线；var obj2Left=obj 2 . offsetleftvar obj 2 width=obj 2 left obj 2。偏移；var obj 2 ToP=obj 2。偏移量ToPvar obj 2高度=obj 2顶部obj 2。偏移高度；if(！(obj 1左侧obj 2宽度| | obj 1宽度obj 2左侧| | obj 1顶部obj 2高度| | obj 1高度obj 2顶部)){ 0返回真}返回false}点击重新开始之后刷新页面

var jsRestart=文档。getelementbyid(' restart ')；jsrestart。onclick=function(){ jsstop。风格。显示='无'；窗户。位置。重载()；//刷新页面}好的，现在我们的游戏就可以玩了，这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。比如，页面之外的空间的运用；比如，检测碰撞。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用爪哇岛描述语言能带来一定的帮助，如果有疑问大家可以留言交流。