javascript實現(xiàn)飛機大戰(zhàn)小游戲

第javascript實現(xiàn)飛機大戰(zhàn)小游戲本文實例為大家分享了javascript實現(xiàn)飛機大戰(zhàn)游戲的具體代碼，供大家參考，具體內(nèi)容如下

文檔結(jié)構(gòu)如下

其中tool文件中只使用了隨機數(shù)，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"當前分數(shù)為：/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部分

主要是通過類方法創(chuàng)建敵機和我方飛機，再通過類的繼承給予小/中/大/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;

//本地獲取數(shù)據(jù)

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這個音頻對象

//計算分數(shù)

number=0;

num.innerText=`當前分數(shù)為：0`;

//從本地獲取分數(shù)

arr=localStorage.getItem("scort");

arr=JSON.parse(arr);

constnewmyplane=document.getElementById("myplane");

if(newmyplane){

section.removeChild(newmyplane)

}

//判斷本地是否有數(shù)據(jù)

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=`當前分數(shù)為：${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(()={

//左側(cè)邊框

if(flag2){

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

this.firstleft=0;

}

this.firstleft-=2;

this.render()

}

//上側(cè)邊框

elseif(flag1){

this.firstbot+=2;

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

this.firstbot=490;

}

this.render()

}

//右側(cè)邊框

elseif(flag4){

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

this.firstleft=255;

}

this.firstleft+=2;

this.render()

}

//下側(cè)邊框

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;

//游戲結(jié)束時清除除自身外飛機

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("游戲結(jié)束");

//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;