使用JS和HTML开发一个飞机大战小游戏的实例
要开发一个飞机大战小游戏，首先需要创建一个HTML文件，然后在其中添加一个canvas元素作为游戏画布。接下来，使用JavaScript编写游戏逻辑，包括绘制飞机、子弹、敌机等对象，以及处理玩家的键盘输入。以下是一个简单的示例： 1. 创建HTML文件： ```html
源码示例：
<!doctypehtml><html><head><metacharset="UTF-8"><title>Document</title><style>*{padding:0;margin:0;}#con{width:320px;height:566px;margin:0auto;border:1pxsolidgreen;cursor:pointer;position:relative;margin-top:10px;overflow:hidden;}#box{width:320px;height:566px;margin:0auto;overflow:hidden;position:absolute;z-index:1;}#index,#copy{background:url('./images/background_1.png')no-repeat;}#me{display:block;position:absolute;left:100px;top:400px;z-index:10;opacity:1;}.buiOne{display:block;position:absolute;z-index:10;}.enemyOne,.enemyTwo,.enemyThree{display:block;position:absolute;z-index:10;}.explode{display:block;position:absolute;z-index:10;}#over,#start{position:absolute;z-index:16;border:2pxsolid#5E6262;left:100px;top:230px;line-height:40px;border-radius:10px;width:100px;text-align:center;opacity:1;background:#CCCCCC;display:none;}#start:hover{background:#666;}.copy{display:block;position:absolute;z-index:15;width:100%;height:100%;}#tmpscore{position:absolute;z-index:20;}</style><script>vartimeGo;window.onload=function(){setInterval(function(){explodeNum++},20000);//分数varscore=0;//等级varlevel=0;varexplodeNum=20;//射击定时次数[开始时间，间隔]varshootTimes=[30,8];[/align]//敌军生成定时次数[开始时间，间隔]varenemyTimes=[30,60];vartiming;//获取元素box、index和copyvarcon=document.getElementById('con');varbox=document.getElementById('box');varindex=document.getElementById('index');varcopy=document.getElementById('copy');varme=document.getElementById('me');//背景图滚动相关index.style.height=box.offsetHeight+'px';copy.style.height=box.offsetHeight+'px';copy.innerHTML=index.innerHTML;//键盘上下左右空格事件document.onkeydown=function(event){vare=event||window.event||arguments.callee.caller.arguments[0];if(e&&e.keyCode==37&&(me.offsetLeft>0)){me.style.left=(me.offsetLeft-10)+'px';}if(e&&e.keyCode==38&&(me.offsetTop>0)){me.style.top=(me.offsetTop-10)+'px';}if(e&&e.keyCode==39&&(me.offsetLeft<255)){me.style.left=(me.offsetLeft+10)+'px';}if(e&&e.keyCode==40&&(me.offsetTop<485)){me.style.top=(me.offsetTop+10)+'px';}if(e&&e.keyCode==32){clearInterval(timing);start();}if(e&&e.keyCode==90){if(explodeNum<=0){returnfalse;}explodeNum--;//特技varwidth=con.offsetWidth;varheight=con.offsetHeight+50;(function(e){vartime=newDate().getTime()+1000*e;vartmp=setInterval(function(){for(vari=-25;i<width-10;i+=20){shoot(i,height,'./images/bullet2.png');}if(newDate().getTime()>time){clearInterval(tmp);}},100)})(2);}}//飞机射击functionshoot(left,top,imgSrc){varleft=left?left:me.offsetLeft;vartop=top?top:me.offsetTop;varimgSrc=imgSrc?imgSrc:'./images/bullet1.png';(function(){varbui=document.createElement("img");bui.setAttribute('src',imgSrc);bui.setAttribute('class','buiOne');bui.setAttribute('style','left:'+(left+31)+'px;top:'+(top-15)+'px;');con.appendChild(bui);return1;})();}//定时器timeGo=function(){box.setAttribute('style','opacity:1');me.setAttribute('style','opacity:1;');varstart=document.getElementById('start');start.setAttribute('style','display:none;');timing=setInterval(function(){/**子弹射击**/(function(){if(score>50)shootTimes[1]=6;if(score>100)shootTimes[1]=5;if(score>150)shootTimes[1]=4;if(score>200)shootTimes[1]=3;if(shootTimes[0]>0){shootTimes[0]--;}else{shootTimes[0]=shootTimes[1];shoot();}})();//等级(function(){level=Math.floor(score/100)})();/**背景滚动**/box.scrollTop-=4;if(box.scrollTop==0){box.scrollTop=box.offsetHeight;}/**敌军生成**/(function(){enemyTimes[1]=60-level*5;if(enemyTimes[0]>0){enemyTimes[0]--;}else{enemyTimes[0]=enemyTimes[1];makeEnemy();}functionmakeEnemy(){varenemy=document.createElement("img");varn=Math.ceil(Math.random()*100);if(n>30){enemy.setAttribute('src','./images/enemy1_fly_1.png');enemy.setAttribute('class','enemyOne');enemy.setAttribute('blood','3');}elseif(n>2){enemy.setAttribute('src','./images/enemy3_fly_1.png');enemy.setAttribute('class','enemyTwo');enemy.setAttribute('blood','10');}elseif(n>0){enemy.setAttribute('src','./images/enemy2_fly_1.png');enemy.setAttribute('class','enemyThree');enemy.setAttribute('blood','40');}else{returnfalse;}varleft=Math.random()*200;enemy.setAttribute('style','left:'+left+'px;top:0px;');con.appendChild(enemy);}})();/**飞行，超出消失**///获取所有图片元素varbui=document.getElementsByTagName('img');//定义所有敌军varenemy=newArray();//定义所有子弹varbuis=newArray();//子弹，敌军，飞行事件超出范围消失事件for(einbui){if(typeof(bui[e])==='object'){varclasss=bui[e].getAttribute('class');if((classs=='enemyOne')||(classs=='enemyTwo')||(classs=='enemyThree')){//给大型飞机定义速度speedOne=(classs=='enemyOne')?-1:0;speedTwo=(classs=='enemyTwo')?-2:0;speedThree=(classs=='enemyThree')?-3:0;bui[e].style.top=bui[e].offsetTop+5+speedThree+speedTwo+speedOne+level/2+'px';//敌军消失事件if(bui[e].offsetTop>520){con.removeChild(bui[e]);}else{enemy.unshift(bui[e]);}}elseif(bui[e].getAttribute('class')=='buiOne'){bui[e].style.top=bui[e].offsetTop-25+'px';//子弹消失事件if(bui[e].offsetTop<-25){con.removeChild(bui[e]);}else{buis.unshift(bui[e]);}}}}//子弹和敌军撞击判断for(variinenemy){for(varjinbuis){if(impact(enemy[i],buis[j])){varblood=parseInt(enemy[i].getAttribute('blood'));enemy[i].setAttribute('blood',blood-1);if(enemy[i].getAttribute('class')=='enemyOne'){if(blood<0){explode(enemy[i],2);}}elseif(enemy[i].getAttribute('class')=='enemyTwo'){if(blood<0){explode(enemy[i],3);}}elseif(enemy[i].getAttribute('class')=='enemyThree'){if(blood<0){explode(enemy[i],4);}}explode(buis[j],5);}}}//自己和敌军撞击判断for(einbui){if(typeof(bui[e])==='object'){if((bui[e].getAttribute('class')=='enemyOne')){if(impact(bui[e],me)){explode(bui[e],2);explode(me,1);}}elseif(bui[e].getAttribute('class')=='enemyTwo'){if(impact(bui[e],me)){explode(bui[e],3);explode(me,1);}}elseif(bui[e].getAttribute('class')=='enemyThree'){if(impact(bui[e],me)){explode(bui[e],4);explode(me,1);}}}}document.getElementById('tmpscore').innerHTML='分数：'+score+'<br/>装弹：'+shootTimes+'<br/>level：'+level+'<br/>特技：'+explodeNum;},50);}/***检测两个元素是否碰撞*[url=home.php?mod=space&uid=952169]@Param[/url]检测的两个元素*[url=home.php?mod=space&uid=155549]@Return[/url]如果碰撞返回true否则返回false*/functionimpact(a,b){varaTop=a.offsetTop;varaLeft=a.offsetLeft;varaWidth=a.offsetWidth;varaHeight=a.offsetHeight;varbTop=b.offsetTop;varbLeft=b.offsetLeft;varbWidth=b.offsetWidth;varbHeight=b.offsetHeight;if((bLeft>(aLeft+aWidth))||(aLeft>(bLeft+bWidth))||(bTop>(aTop+aHeight))||(aTop>(bTop+bHeight))){returnfalse;}else{returntrue;}}/***处理爆炸*@paramo需要爆炸的对象n1=自身，2=小型敌军，3=中型敌军，4=巨型敌军*@returnover游戏结束true，false*/functionexplode(o,n){if(n==5){if(o){con.removeChild(o);}returnfalse;}switch(n){case1:src='./images/myself.gif';clearInterval(timing);document.getElementById('score').innerHTML=score;document.getElementById('over').style='display:block';break;case2:src='./images/small_explode.gif';score+=3;break;case3:src='./images/middle_explode.gif';score+=10;break;case4:src='./images/large_explode.gif';score+=100;break;default:break;}vartop=o.offsetTop;varleft=o.offsetLeft;varexplode=document.createElement("img");explode.setAttribute('src',src);explode.setAttribute('class','explode');explode.setAttribute('style','left:'+left+'px;top:'+top+'px;');con.appendChild(explode);if(n!=1){setTimeout(function(){con.removeChild(explode);},1000);}if(o){con.removeChild(o);}}//游戏开始相关start();functionstart(){varcon=document.getElementById('con');con.setAttribute('style','background:url("./images/start.png")');varbox=document.getElementById('box');box.setAttribute('style','opacity:0');varme=document.getElementById('me');me.setAttribute('style','opacity:0;');varstart=document.getElementById('start');start.setAttribute('style','display:block;top:350px;cursor:pointer;');start.setAttribute('onclick','timeGo()');}}</script></head><body><divid="con"><spanid="tmpscore"></span><divid="box"><divid="index"></div><divid="copy"></div></div><imgsrc="./images/me.gif"id="me"alt=""><divid="over">成绩：<spanid="score"></span><br/>GameOver</div><divid="start">开始游戏</div><div></div></div></body></html>源码释义：
此代码是一个小游戏，其功能是控制一个飞机在空中飞行并进行打击，消灭敌军以获得积分。具体实现方式如下：
HTML部分：使用了一个主容器，一个背景图层，一个前景图层（用于显示敌军飞机和自己的飞机），以及一个游戏结束图层和开始游戏按钮。同时定义了一个临时分数显示元素。
CSS样式部分：定义了主容器和背景图的样式，同时将前景图层标记为绝对定位的，并将z-index设置为1，以使其显示于背景之上。此外还定义了子弹、敌军飞机和爆炸效果的样式，以及游戏结束和开始游戏按钮的样式。
JavaScript部分：程序的主要逻辑在函数timeGo中，该函数主要实现了以下功能：
监听键盘事件控制飞机的移动，具体实现使用了document.onkeydown方法和event.keyCode属性。
飞机发射子弹（shoot函数）：检查是否超时，超时则发射一个新的子弹，具体实现使用了setInterval方法。
制作敌军飞机：按照一定规则生成不同类型的敌军飞机，并设定它们的初始位置，具体实现也使用了setInterval方法。
检测子弹和敌军飞机的碰撞事件，具体实现使用了impact函数判断是否有碰撞，并调用explode函数处理爆炸效果。
检测飞机和敌军飞机的碰撞事件，并调用explode函数处理爆炸效果。
背景图自动滚动，将box.scrollTop的值减去4，并在scrollTop为0时重新将其赋值为box.offsetHeight。
定时刷新临时分数显示，显示当前的分数、剩余子弹、等级和可用特技。
另外，该文件还定义了函数explode、start以及impact，分别用于处理爆炸效果、游戏开始和碰撞事件。
源码下载地址：https://www.caijicaiji.com/code/youxi/1717.html
