第JavaScript實(shí)現(xiàn)簡易飛機(jī)大戰(zhàn)本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡易飛機(jī)大戰(zhàn)的具體代碼，供大家參考，具體內(nèi)容如下

話不多說，直接上代碼

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

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

title飛機(jī)大戰(zhàn)/title

style

body{

text-align:center;

}

canvas{

display:block;

border:1pxsolid;

margin:auto;

}

/style

/head

body

canvasid="canvas"width="480"height="650"/canvas

script

(function(){

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

varstart=0;//開始階段

varstarting=1;//開始的加載階段

varrunning=2;//游戲階段

varpause=3;//暫停階段

vargameover=4;//結(jié)束階段

varstate=start;//目前狀態(tài)

varwidth=canvas.width;//獲取畫布的寬度

varheight=canvas.height;//獲取畫布的高度

varscore=0;//分?jǐn)?shù)

varlife=3;//我放飛機(jī)生命值

varbg=newImage();//創(chuàng)建背景圖片

bg.src="img/background.png";

varBG={

imgs:bg,

width:480,

height:852,

};

//創(chuàng)建生成背景圖片的構(gòu)造函數(shù)

functionBg(config){//參數(shù)為BG對象

this.imgs=config.imgs;

this.width=config.width;

this.height=config.height;

//定義兩張背景圖片，用于動(dòng)畫

this.x1=0;

this.y1=0;

this.x2=0;

//第二張背景圖的初始高度放在背景高度(固定)的上面

this.y2=-this.height;

//背景圖片繪制方法

this.paint=function(){

//分別繪制了兩張背景圖

ctx.drawImage(this.imgs,this.x1,this.y1);

ctx.drawImage(this.imgs,this.x2,this.y2);

};

//背景圖片運(yùn)動(dòng)的方法

this.step=function(){

//背景圖片位置向下移動(dòng)一個(gè)，然后利用定時(shí)器讓背景圖動(dòng)起來

this.y1++;

this.y2++;

//判斷圖片高度的臨界點(diǎn)，

if(this.y1==this.height){

this.y1=-this.height;

}

if(this.y2==this.height){

this.y2=-this.height;

}

}

};

//創(chuàng)建背景圖片對象

varsky=newBg(BG);

//生成游戲名文字

varlogo=newImage();

logo.src="img/start.png";

//游戲加載過程的4張圖片存入一個(gè)數(shù)組中

varloadings=[];

loadings[0]=newImage();

loadings[0].src="img/game_loading1.png";

loadings[1]=newImage();

loadings[1].src="img/game_loading2.png";

loadings[2]=newImage();

loadings[2].src="img/game_loading3.png";

loadings[3]=newImage();

loadings[3].src="img/game_loading4.png";

varLOADING={

imges:loadings,

length:loadings.length,

width:186,

height:38,

};

//構(gòu)造函數(shù)

functionLoading(config){

this.imges=config.imges;

this.length=config.length;

this.width=config.width;

this.height=config.height;

this.startIndex=0;//用于判斷需要顯示的圖片是哪個(gè)

//繪制方法

this.paint=function(){

ctx.drawImage(this.imges[this.startIndex],0,height-this.height)

};

this.time=0;//加載時(shí)圖片切換速度

//圖片切換方法

this.step=function(){

this.time++;

if(this.time%4===0){

this.startIndex++;

}

if(this.startIndex===this.length){

//加載階段結(jié)束，進(jìn)入游戲階段

state=running;

}

}

};

//創(chuàng)建加載階段的對象

varloading=newLoading(LOADING);

//我放飛機(jī)

varheros=[];

heros[0]=newImage();

heros[0].src="img/hero1.png";

heros[1]=newImage();

heros[1].src="img/hero2.png";

heros[2]=newImage();

heros[2].src="img/hero_blowup_n1.png";

heros[3]=newImage();

heros[3].src="img/hero_blowup_n2.png";

heros[4]=newImage();

heros[4].src="img/hero_blowup_n3.png";

heros[5]=newImage();

heros[5].src="img/hero_blowup_n4.png";

varHEROS={

imgs:heros,

length:heros.length,

width:99,

height:124,

frame:2

};

//我放飛機(jī)的構(gòu)造函數(shù)

functionHero(config){

this.imgs=config.imgs;

this.length=config.length;

this.width=config.width;

this.height=config.height;

this.frame=config.frame;

this.startIndex=0;//用于判斷我放飛機(jī)當(dāng)前狀態(tài)

//定義我放飛機(jī)的位置

this.x=width/2-this.width/2;

this.y=height-this.height;

//定義飛機(jī)撞擊的標(biāo)志,表示飛機(jī)沒有被撞擊

this.down=false;

//定義飛機(jī)是否爆破完成,表示飛機(jī)還沒有完全爆炸

this.candel=false;

//繪制方法

this.paint=function(){

ctx.drawImage(this.imgs[this.startIndex],this.x,this.y)

};

//我放飛機(jī)運(yùn)動(dòng)方法

this.step=function(){

if(!this.down){//飛機(jī)正常狀態(tài)

if(this.startIndex===0){

this.startIndex=1;

}else{

this.startIndex=0

}

}else{//爆炸狀態(tài)

this.startIndex++;

if(this.startIndex===this.length){//判斷是否炸完了

//炸完了，命-1

life--;

if(life===0){//判斷是否掛了

state=gameover;

this.startIndex=this.length-1;

}else{//重新開始新生命

hero=newHero(HEROS)

}

}

}

};

//我放飛機(jī)碰撞

this.bang=function(){

this.down=true;

};

//子彈發(fā)射

this.time=0;//設(shè)計(jì)速度初始為0

this.shoot=function(){

this.time++;

if(this.time%2===0){//每2步移動(dòng)射擊一次

bullets.push(newBullet(BULLETS))

}

};

};

//創(chuàng)建我方飛機(jī)的對象實(shí)例

varhero=newHero(HEROS);

//鼠標(biāo)移動(dòng)事件

canvas.onmousemove=function(event){

//console.log("onmousemove");

varevent=event||window.event;

if(state==running){//判斷當(dāng)前游戲狀態(tài)

//把獲取到的頁面中的鼠標(biāo)橫坐標(biāo)的值賦給飛機(jī)的橫坐標(biāo)（位置）

hero.x=event.offsetX-hero.width/2;

//把獲取到的頁面中的鼠標(biāo)縱坐標(biāo)的值賦給飛機(jī)的縱坐標(biāo)（位置）

hero.y=event.offsetY-hero.height/2;

}

};

//繪制子彈

varbullet=newImage();

bullet.src="img/bullet1.png";

//初始化

varBULLETS={

imgs:bullet,

width:9,

height:21,

};

//創(chuàng)建子彈的構(gòu)造函數(shù)

functionBullet(config){

this.imgs=config.imgs;

this.width=config.width;

this.height=config.height;

//子彈坐標(biāo)

this.x=hero.x+hero.width/2-this.width/2;

this.y=hero.y-this.height;

//繪制方法

this.paint=function(){

ctx.drawImage(this.imgs,this.x,this.y)

};

//運(yùn)動(dòng)方法

this.step=function(){

this.y-=10;

};

this.candel=false;//用于判斷子彈是否碰撞

//子彈碰撞方法

this.bang=function(){

this.candel=true;

}

};

//所有new的子彈對象放到一個(gè)數(shù)組

varbullets=[];

//遍歷繪制子彈

functionbulletdPaint(){

for(vari=0;ibullets.length;i++){

bullets[i].paint();

}

};

//遍歷調(diào)用子彈的運(yùn)動(dòng);

functionbulletdStep(){

for(vari=0;ibullets.length;i++){

bullets[i].step();

}

};

//子彈的刪除函數(shù)

functionbulletDel(){

//碰撞的時(shí)候刪除子彈

//超出畫布的高度，即負(fù)的子彈的高度

for(vari=0;ibullets.length;i++){

if(bullets[i].candel||bullets[i].y-bullets[i].height){

bullets.splice(i,1)

}

}

};

//敵方飛機(jī)的繪制

varenemy1=[];//小飛機(jī)

enemy1[0]=newImage();

enemy1[0].src="img/enemy1.png";

enemy1[1]=newImage();

enemy1[1].src='img/enemy1_down1.png';

enemy1[2]=newImage();

enemy1[2].src='img/enemy1_down2.png';

enemy1[3]=newImage();

enemy1[3].src='img/enemy1_down3.png';

enemy1[4]=newImage();

enemy1[4].src='img/enemy1_down4.png';

varenemy2=[];//中飛機(jī)

enemy2[0]=newImage();

enemy2[0].src="img/enemy2.png";

enemy2[1]=newImage();

enemy2[1].src="img/enemy2_down1.png";

enemy2[2]=newImage();

enemy2[2].src="img/enemy2_down2.png";

enemy2[3]=newImage();

enemy2[3].src="img/enemy2_down3.png";

enemy2[4]=newImage();

enemy2[4].src="img/enemy2_down4.png";

varenemy3=[];//大飛機(jī)

enemy3[0]=newImage();

enemy3[0].src="img/enemy3_n1.png";

enemy3[1]=newImage();

enemy3[1].src="img/enemy3_n2.png";

enemy3[2]=newImage();

enemy3[2].src="img/enemy3_down1.png";

enemy3[3]=newImage();

enemy3[3].src="img/enemy3_down2.png";

enemy3[4]=newImage();

enemy3[4].src="img/enemy3_down3.png";

enemy3[5]=newImage();

enemy3[5].src="img/enemy3_down4.png";

enemy3[6]=newImage();

enemy3[6].src="img/enemy3_down5.png";

enemy3[7]=newImage();

enemy3[7].src="img/enemy3_down6.png";

//初始化數(shù)據(jù)

varENEMY1={

imgs:enemy1,

length:enemy1.length,

width:57,

height:51,

type:1,

frame:1,

life:1,

score:1,

};

varENEMY2={

imgs:enemy2,

length:enemy2.length,

width:69,

height:95,

type:2,

frame:1,

life:5,

score:5,

};

varENEMY3={

imgs:enemy3,

length:enemy3.length,

width:165,

height:261,

type:3,

frame:2,

life:15,

score:20,

};

//敵方飛機(jī)的構(gòu)造函數(shù)

functionEnemy(config){

this.imgs=config.imgs;

this.length=config.length;

this.width=config.width;

this.height=config.height;

this.type=config.type;

this.frame=config.frame;

this.life=config.life;

this.score=config.score;

//敵方飛機(jī)的坐標(biāo)

this.x=Math.random()*(width-this.width);

this.y=-this.height;

this.startIndex=0;//用于判斷的下標(biāo)

this.down=false;//用于判斷是否碰撞

this.candel=false;//用于判斷是否爆炸完成

//繪制方法

this.paint=function(){

ctx.drawImage(this.imgs[this.startIndex],this.x,this.y);

};

//運(yùn)動(dòng)方法

this.step=function(){

if(!this.down){//敵方飛機(jī)處于正常狀態(tài)

//小飛機(jī)，中飛機(jī)的下標(biāo)始終都是0

//大飛機(jī)的下標(biāo)是在0和1之間進(jìn)行切換

this.startIndex++;

this.startIndex=this.startIndex%this.frame;

//飛機(jī)向下的動(dòng)畫

this.y+=2;

}else{//飛機(jī)發(fā)生碰撞以后

this.startIndex++;

if(this.startIndex==this.length){

this.candel=true;

this.startIndex=this.length-1;

}

}

};

//判斷是否被碰撞

this.checkHit=function(wo){//判斷四個(gè)邊

returnwo.y+wo.heightthis.y

wo.x+wo.widththis.x

wo.ythis.y+this.height

wo.xthis.x+this.width;

};

//敵方飛機(jī)碰撞后

this.bang=function(){

this.life--;

if(this.life===0){

this.down=true;

score+=this.score;

}

}

};

//數(shù)組存放敵方飛機(jī)

varenemise=[];

//往敵方飛機(jī)數(shù)組中添加數(shù)據(jù)

functionenterEnemise(){

varrand=Math.floor(Math.random()*100)

if(rand10){

//添加小飛機(jī)

enemise.push(newEnemy(ENEMY1));

}elseif(rand55rand50){

//添加中飛機(jī)

enemise.push(newEnemy(ENEMY2));

}elseif(rand===88){

//添加大飛機(jī)

if(enemise[0].type!==3enemise.length0){

enemise.splice(0,0,newEnemy(ENEMY3));

}

}

};

//繪制敵方飛機(jī)函數(shù)

functionenemyPaint(){

for(vari=0;ienemise.length;i++){

enemise[i].paint();

}

};

//敵方飛機(jī)的運(yùn)動(dòng)函數(shù)

functionenemyStep(){

for(vari=0;ienemise.length;i++){

enemise[i].step();

}

};

//刪除敵方飛機(jī)函數(shù)

functiondelenemy(){

for(vari=0;ienemise.length;i++){

//console.log(enemise[i].candel)

if(enemise[i].yheight||enemise[i].candel){

enemise.splice(i,1)

}

}

};

//碰撞以后的函數(shù)

functionhitEnemise(){

for(vari=0;ienemise.length;i++){

//如果我放飛機(jī)撞到了敵方飛機(jī)以后

if(enemise[i].checkHit(hero)){

//敵方飛機(jī)碰撞后，碰撞狀態(tài)改變

enemise[i].bang();

//我方飛機(jī)碰撞后，碰撞狀態(tài)改變

hero.bang();

};

//子彈碰到敵方飛機(jī)

for(varj=0;jbullets.length;j++){

if(enemise[i].checkHit(bullets[j])){

enemise[i].bang();

//子彈的碰撞后，碰撞狀態(tài)改變

bullets[j].bang();

}

}

}

};

//繪制分?jǐn)?shù)和生命值

functionscoreText(){

ctx.font="30pxbold"

ctx.fillText("score:"+score,10,30);

ctx.fillText("life:"+life,300,30);

};

//游戲暫停的階段

canvas.onmouseout=function(){

if(state===running){

state=pause;

}

};

//調(diào)用畫布的鼠標(biāo)移入事件

canvas.onmouseover=function(){

if(state===pause){

state=running;

}

};

//暫停圖片

varpause=newImage()

pause.src="img/game_pause_nor.png";

//游戲結(jié)束

functiongameoverfn(){

ctx.font="50pxbold"

ctx.fillText("GAMEOVER!!!",80,300);

ctx.fillText("ONCEMORE!!!",80,400);

};

//畫布點(diǎn)擊事件

canvas.addEventListener("click",function(e){

p=getEventPosition(e);

//點(diǎn)擊畫布時(shí),判斷游戲是否開始

if(state===start){

state=starting;

}

//重新開始游戲有問題？？？

if(state===gameover){

if(p.y=350p.y450){

console.log('你點(diǎn)擊了ONCEMORE!!!');

state=running;

}

}

});

functiongetEventPosition(e){

varx,y;

if(e.layerX||ev.layerX===0){

x=e.layerX;

y=e.layerY;

}elseif(e.offsetX||ev.offsetX===0){

x=e.offsetX;

y=e.offsetY;

}

return{

x:x,

y:y

};

};

setInterval(function(){

//背景圖片無論在哪個(gè)狀態(tài)都有背景圖片以及它的動(dòng)態(tài)效果

sky.paint();//繪制背景

sky.step();//背景動(dòng)畫

if(state