javascript实现飞机大战小游戏

第javascript实现飞机大战小游戏本文实例为大家分享了javascript实现飞机大战游戏的具体代码，供大家参考，具体内容如下

文档结构如下

其中tool文件中只使用了随机数，audio中是存放的音乐文件，images中是己方和敌方飞机的图片。

HTML部分

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

linkrel="stylesheet"href="css/game.css"

/head

body

section

inputtype="button"value="GAMESTART"id="btn"

divid="socre"

pid="num"当前分数为：/p

pid="historynum"历史最高:/p

/div

/section

scriptsrc="js/tool.js"/script

scriptsrc="js/game.js"/script

/body

/html

CSS部分

section{

background-image:url(../material/images/startBG.png);

background-repeat:no-repeat;

background-size:320px,570px;

width:320px;

height:570px;

margin:auto;

margin-top:30px;

position:relative;

overflow:hidden;

sectioninput{

width:150px;

position:absolute;

bottom:65px;

left:85px;

#socre{

display:none;

}

JS部分

主要是通过类方法创建敌机和我方飞机，再通过类的继承给予小/中/大/boss等敌机属性和方法。

constsection=document.querySelector("section");

constenemy=document.getElementsByClassName("enemys");

let[flag1,flag2,flag3,flag4]=[false,false,false,false];

//小飞机

letsplane;

//中飞机

letmplane;

//大飞机

letbplane;

//boss

letboss;

letshoot;

letbossshoot;

letnumber;

letmove1;

//本地获取数据

letarr=localStorage.getItem("scort");

arr=JSON.parse(arr);

varmp3;

vargameover;

varbossrun;

//游戏开始

btn.addEventListener("click",function(){

//console.log(gameover);

if(gameover){

gameover.pause();

}

mp3="./material/audio/bgm.mp3";

mp3=newAudio(mp3);

mp3.play();//播放mp3这个音频对象

//计算分数

number=0;

num.innerText=`当前分数为：0`;

//从本地获取分数

arr=localStorage.getItem("scort");

arr=JSON.parse(arr);

constnewmyplane=document.getElementById("myplane");

if(newmyplane){

section.removeChild(newmyplane)

}

//判断本地是否有数据

if(arr==null){

historynum.innerText=`历史最高：0`

}else{

historynum.innerText=`历史最高：${arr}`

}

//得分面板

socre.style.display="block";

btn.style.display="none";

//更改背景

section.style.backgroundImage="url(./material/images/background_1.png)";

//实例化自身飞机

letmyplane=newMyplane(0,127);

//实例化敌机

splane=setInterval(

function(){

letsmallenemys=newSmallenemys(random(0,286),"material/images/enemy1_fly_1.png",-24,1);

},1000)

mplane=setInterval(

function(){

letmidenemys=newMidenemys(random(0,274),"material/images/enemy3_fly_1.png",-60,3);

},6000)

bplane=setInterval(

function(){

letbigenemys=newBigenemys(random(0,210),"material/images/enemy2_fly_1.png",-164,10);

},10000)

boss=setInterval(

function(){

letboss=newBossenemys(random(0,210),"material/images/boss.png",-118,20);

bossrun="./material/audio/bossrun.mp3";

bossrun=newAudio(bossrun);

bossrun.play();//播放mp3这个音频对象

//延迟器

setTimeout(()={

bossrun.pause();

},3000)

},50000)

//己方飞机

classMyplane{

constructor(firstbot,firstleft){

this.node=document.createElement("img");

//console.log(this.node);

this.firstbot=firstbot;

this.firstleft=firstleft;

this.init();

}

init(){

this.create();

this.render();

this.action();

this.crash();

shoot=setInterval(()={

letbullet=newBullet(this.firstbot+80,this.firstleft+31);

num.innerText=`当前分数为：${number}`

},230)

}

render(){

Object.assign(this.node.style,{

position:`absolute`,

bottom:`${this.firstbot}px`,

left:`${this.firstleft}px`,

})

}

create(){

this.node.setAttribute('src','material/images/myPlane.gif');

this.node.setAttribute('id','myplane')

section.appendChild(this.node);

}

action(){

//键盘按下

document.addEventListener("keydown",(event)={

if(this.move){

this.move(event);

}

});

//键盘抬起

document.addEventListener("keyup",function(event){

switch(event.key){

case"w":

flag1=false;

break;

case"a":

flag2=false;

break;

case"s":

flag3=false;

break;

case"d":

flag4=false;

break;

}

})

}

//移动

move(event){

switch(event.key){

case"w":

flag1=true;

break;

case"a":

flag2=true;

break;

case"s":

flag3=true;

break;

case"d":

flag4=true;

break;

}

if(move1){

clearInterval(move1)

}

move1=setInterval(()={

//左侧边框

if(flag2){

if(parseInt(getComputedStyle(this.node).left)=0){

this.firstleft=0;

}

this.firstleft-=2;

this.render()

}

//上侧边框

elseif(flag1){

this.firstbot+=2;

if(parseInt(getComputedStyle(this.node).bottom)=490){

this.firstbot=490;

}

this.render()

}

//右侧边框

elseif(flag4){

if(parseInt(getComputedStyle(this.node).left)=255){

this.firstleft=255;

}

this.firstleft+=2;

this.render()

}

//下侧边框

elseif(flag3){

if(parseInt(getComputedStyle(this.node).bottom)=0){

this.firstbot=0;

}

this.firstbot-=2;

this.render()

}

this.render()

},10)

}

crash(){

lettime=setInterval(()={

letbottom=parseInt(getComputedStyle(this.node).bottom);

letleft=parseInt(getComputedStyle(this.node).left);

for(letitemofenemy){

//碰撞判断

if(bottom=parseInt(getComputedStyle(item).bottom)+parseInt(getComputedStyle(item).height)

bottom=parseInt(getComputedStyle(item).bottom)-parseInt(getComputedStyle(this.node).height)

left=parseInt(getComputedStyle(item).left)-parseInt(getComputedStyle(this.node).width)

left=parseInt(getComputedStyle(item).left)+parseInt(getComputedStyle(item).width)){

this.node.setAttribute('src','material/images/本方飞机爆炸.gif');

this.move=null;

//游戏结束时清除除自身外飞机

for(letitem1ofenemy){

item1.style.display='none';

}

clearInterval(bossshoot);

clearInterval(time);

clearInterval(splane);

clearInterval(mplane);

clearInterval(bplane);

clearInterval(shoot);

clearInterval(boss);

mp3.pause();

gameover="./material/audio/gameover.mp3";

gameover=newAudio(gameover);

gameover.play();//播放mp3这个音频对象

if(arrnumber){

localStorage.setItem('scort',JSON.stringify(number));

historynum.innerText=`历史最高：${number}`;

}

btn.style.display="block";

//alert("游戏结束");

//location.reload(true);

}

}

},10)

}

//子弹类

classBullet{

constructor(firstbot,firstleft){

this.node=document.createElement("img");

this.firstbot=firstbot;

this.firstleft=firstleft;

this.init();

//console.log(this.firstbot);

}

init(){

this.create();

this.render();

this.move();

this.crash();

}

create(){

this.node.setAttribute('src','material/images/bullet1.png');

section.appendChild(this.node);

}

render(){

Object.assign(this.node.style,{

position:`absolute`,

bottom:`${this.firstbot}px`,

left:`${this.firstleft}px`,

})

}

move(){

lettime=setInterval(()={

this.crash();

this.firstbot+=2;

if(this.firstbot=550||getComputedStyle(this.node).display=='none'){

section.removeChild(this.node);

clearInterval(time);

}

this.render();

},10);

}

//碰撞

crash(){

//获取所有敌机

constenemy=document.getElementsByClassName("enemys");

//console.log(enemy);

letbottom=parseInt(getComputedStyle(this.node).bottom);

letleft=parseInt(getComputedStyle(this.node).left);

for(letitemofenemy){

//子弹撞击敌方飞机

if(bottom=parseInt(getComputedStyle(item).bottom)+parseInt(getComputedStyle(item).height)

bottom=parseInt(getComputedStyle(item).bottom)-parseInt(getComputedStyle(this.node).height)

left=parseInt(getComputedStyle(item).left)-parseInt(getComputedStyle(this.node).width)

left=parseInt(getComputedStyle(item).left)+parseInt(getComputedStyle(item).width)){

//停止子弹碰撞计时器

this.node.style.display="none";

item.dataset.id--;

if(item.dataset.id0){

item.dataset.id=0;

}

if(parseInt(getComputedStyle(item).width)==34){

if(item.dataset.id==0){

//图片替换

item.setAttribute('src','material/images/小飞机爆炸.gif');

//延迟器

setTimeout(()={

item.style.display="none";

},300)

number+=1;

}

}

if(parseInt(getComputedStyle(item).width)==46){

if(item.dataset.id==0){

item.setAttribute('src','material/images/中飞机爆炸.gif');

setTimeout(()={

item.style.display="none";

},300)

number+=5;

}else{

item.setAttribute('src','material/images/中飞机挨打.png');

}

}

if(parseInt(getComputedStyle(item).width)==110){

if(item.dataset.id==0){

item.setAttribute('src','material/images/大飞机爆炸.gif');

//大飞机爆炸

letbigboom="./material/audio/bigboom.mp3";

bigboom=newAudio(bigboom);

bigboom.play();//播放mp3这个音频对象

setTimeout(()={

item.style.display="none";

bigboom.pause();

},300)

number+=30;

}else{

item.setAttribute('src','material/images/大飞机挨打.png');

}

}

//boss爆炸

if(parseInt(getComputedStyle(item).width)==160){

if(item.dataset.id==0){

item.setAttribute('src','material/images/boomx.png');

clearInterval(bossshoot);

letbossover="./material/audio/bossover.mp3";

bossover=newAudio(bossover);

bossover.play();//播放mp3这个音频对象

setTimeout(()={

item.style.display="none";

bossover.pause();

mp3.play();

},300)

number+=200;

}

}

}

}

}

classEnemys{

constructor(x,url,height){

this.node=document.createElement("img");

this.x=x;

this.y=546;

this.url=url;

this.height=height;

this.init();

}

init(){

this.create();

this.render();

this.move();

}

create(){

this.node.setAttribute('src',this.url);

this.node.setAttribute('class',"enemys");

section.appendChild(this.node);

}

render(){

Object.assign(this.node.style,{

position:`absolute`,

bottom:`${this.y}px`,

left:`${this.x}px`,

})

}

move(){

letenemytime=setInterval(()={

this.y-=1;

if(this.y=this.height||getComputedStyle(this.node).display=='none'){

section.removeChild(this.node);

clearInterval(enemytime)

}else{

this.render();

}

},10);

}

//小飞机

classSmallenemysextendsEnemys{

constructor(x,url,height,hp){

super(x,url,height);

this.hp=hp;

this.node.dataset.id=hp;

}

//中飞机

classMidenemysextendsEnemys{

constructor(x,url,height,hp){

super(x,url,height)

this.hp=hp;

this.node.dataset.id=hp;