javascript實(shí)現(xiàn)簡(jiǎn)單飛機(jī)大戰(zhàn)小游戲

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

效果圖

html文件

!DOCTYPEhtml

htmllang='zh'

head

metacharset='UTF-8'

titlemm/title

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

style

*{

margin:0;

padding:0;

list-style:none;

user-select:none;

}

/style

/head

body

div

!--游戲等級(jí)--

divid="level"

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

p簡(jiǎn)答模式/p

p一般模式/p

p困難模式/p

p地獄模式/p

/div

!--游戲界面--

divid="map"

!--我軍飛機(jī)--

!--敵軍飛機(jī)1--

!--敵軍飛機(jī)2--

div

!--我軍子彈--

/div

/div

!--游戲得分--

divid="score"0/div

!--結(jié)束游戲的界面--

divid="settlement"

div最終得分:span10/span/div

div獲得評(píng)價(jià):span青銅/span/div

button重新開(kāi)始/button

/div

/div

scriptsrc="./js/index.js"/script

/body

/html

css文件

.wrap{

position:relative;

width:400px;

height:600px;

margin:10pxauto;

overflow:hidden;

/*游戲等級(jí)*/

#level{

position:absolute;

top:0;

left:0;

z-index:1;

width:100%;

height:100%;

font-family:"楷體";

background:url(../img/bg_1.jpg)repeat0/cover;

#levelh1{

width:100%;

color:#fff;

text-align:center;

padding:100px0;

#levelp{

text-align:center;

padding:10px20px;

letter-spacing:5px;

font-weight:bold;

background-color:#fff;

margin:30px120px;

border-radius:5px;

box-shadow:1px1px10px1px#aaa;

#levelp:hover{

cursor:pointer;

background-color:#4D6BA2;

color:#fff;

/*

游戲界面

*/

#map{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:url(../img/bg_2.jpg)repeat0/cover;

#map.plane,/*我軍飛機(jī)*/

.enemy,/*敵軍飛機(jī)*/

.boom,/*敵軍飛機(jī)爆炸*/

.boom2,/*我軍飛機(jī)爆炸*/

.fire{/*我軍飛機(jī)子彈*/

position:absolute;

#map.plane,.enemy{

z-index:5;

#map.boom{

z-index:6;

animation:enemyDisappear0.8s1;

animation-fill-mode:forwards;/*顯示最后一個(gè)關(guān)鍵幀*/

#map.boom2{

z-index:6;

animation:planeDisappear2s1;

animation-fill-mode:forwards;

#map.fire{

z-index:7;

/*敵軍消失的動(dòng)畫(huà)*/

@keyframesenemyDisappear{

from{opacity:1;}

to{opacity:0;}

/*我軍消失的動(dòng)畫(huà)*/

@keyframesplaneDisappear{

0%{opacity:1;}

20%{opacity:0;}

40%{opacity:1;}

60%{opacity:0;}

80%{opacity:1;}

100%{opacity:0;}

/*

游戲得分

*/

#score{

display:none;

position:absolute;

top:0;

left:0;

z-index:10;

padding:10px20px;

color:#fff;

/*結(jié)束游戲的界面*/

#settlement{

display:none;

position:absolute;

top:30%;

left:0;

z-index:100;

width:100%;

height:35%;

font-family:"楷體";

#settlementdiv{

margin:20px0;

text-align:center;

font-size:20px;

color:#fff;

#settlementdivspan{

font-size:24px;

#settlementdiv.totalscore{

color:red;

#settlementdiv.appraise{

color:green;

#settlementbutton{

margin:30px34%0;

padding:10px20px;

background-color:rgba(255,255,255,.8);

letter-spacing:2px;

border:none;

font-family:"楷體";

font-size:20px;

font-weight:bold;

border-radius:5px;

#settlementbutton:hover{

cursor:pointer;

background-color:rgba(255,255,255,1);

}

js文件

letoWrap=document.querySelector(".wrap"),

oLevel=document.getElementById("level"),//游戲等級(jí)盒子

oLevelList=document.querySelectorAll("#levelp"),//游戲等級(jí)

oMap=document.getElementById("map"),//游戲界面

oAllFire=document.querySelector(".allFire"),//子彈盒子

oScore=document.getElementById("score"),//游戲得分

oSettlement=document.getElementById("settlement"),//結(jié)算界面

oButton=

oSettlement.querySelector("button");//重新開(kāi)始

for(leti=0;ioLevelList.length;i++){

oLevelList[i].onclick=function(e){

startGame(i,

{

x:e.clientX-oWrap.offsetLeft,//獲取鼠標(biāo)到游戲界面的位置

y:e.clientY-oWrap.offsetTop

}

)

};

//重新開(kāi)始

oButton.onclick=functionaginGame(){

//背景圖停止移動(dòng)

cancelAnimationFrame(oWrap.timer);

//隱藏得分界面

oSettlement.style.display="none";

//顯示等級(jí)

oLevel.style.display="block";

//分?jǐn)?shù)清0

oScore.innerHTML=0;

//

oMap.innerHTML=`divid="allFire"/div

oAllFire=document.getElementById("allFire");

//開(kāi)始游戲

functionstartGame(level,pos){

hiddenShow();

bgImgMove(level);

letmyPlane=createPlane(level,pos);

createEnemy(level,myPlane);

oWrap.score=0;

//點(diǎn)擊游戲等級(jí)的消失與隱藏

functionhiddenShow(){

oLevel.style.display="none";

oMap.style.display="block";

oScore.style.display="block";

//背景圖移動(dòng)

functionbgImgMove(level){

oMap.style.backgroundImage=`url(./img/bg_${level+1}.jpg)`;

letbgMove=0;

(functionbgMoveTimer(){

bgMove++;

oMap.style.backgroundPositionY=bgMove+"px";

oWrap.timer=requestAnimationFrame(bgMoveTimer);

})();

//我軍飛機(jī)飛機(jī)

functioncreatePlane(level,pos){

//創(chuàng)建我軍飛機(jī)

letoImgPlane=newImage();

oImgPlane.src="./img/plane_0.png";

oImgPlane.width=70;

oImgPlane.height=70;

oImgPlane.className="plane";

oImgPlane.style.left=pos.x-oImgPlane.width/2

+"px";

oImgPlane.style.top=pos.y-oImgPlane.height/2+"px";

oMap.appendChild(oImgPlane);

//鼠標(biāo)移動(dòng)是飛機(jī)不斷獲取鼠標(biāo)位置

letminLeft=-oImgPlane.width/2,

minTop=0,

maxLeft=oMap.clientWidth-oImgPlane.width/2,

maxTop=oMap.clientHeight-oImgPlane.height/2;

document.onmousemove=function(e){

letleft=e.clientX-oWrap.offsetLeft-oImgPlane.width/2,

top=e.clientY-oWrap.offsetTop-oImgPlane.height/2;

left=Math.min(left,maxLeft);

left=Math.max(left,minLeft);

top=Math.min(top,maxTop);

top=Math.max(top,minTop);

oImgPlane.style.left=left+"px";

oImgPlane.style.top=top+"px";

}

fire(level,oImgPlane)

returnoImgPlane;

functionfire(level,oImgPlane){

//創(chuàng)建子彈

functioncreateFires(isDouble,n){

letcreateFire=newImage();

createFire.src="./img/fire.png";

createFire.width=30;

createFire.height=30;

createFire.className="fire"

letleft=oImgPlane.offsetLeft+oImgPlane.width/2-createFire.width/2,

top=oImgPlane.offsetTop-oImgPlane.height/2;

if(isDouble){

left=left+oImgPlane.width/3*n;

}

createFire.style.left=left+"px";

createFire.style.top=top+"px";

oAllFire.appendChild(createFire);

//子彈運(yùn)動(dòng)

functionfireMove(){

if(createFire.parentNode){

top-=10;

if(top-createFire.height){

oAllFire.removeChild(createFire);

}else{

createFire.style.top=top+"px";

requestAnimationFrame(fireMove);

}

}

}

setTimeout(()={

requestAnimationFrame(fireMove);

},20);

}

//定時(shí)生成子彈的頻率

oWrap.fireTimer=setInterval(()={

if(oWrap.score=100){

createFires(true,-1);

createFires(true,+1);

}else{

createFires();

}

},[200,150,100,50][level])

//創(chuàng)建敵軍

letenemyNum=1;

functioncreateEnemy(level,myPlane){

letspeed=[4,6,8,10][level];//游戲模式相對(duì)應(yīng)的的等級(jí)飛機(jī)下落的速度

MapW=oMap.clientWidth,

MapH=oMap.clientHeight;

oWrap.enemyTimer=setInterval(()={

letcreateEnemy=newImage();

createEnemy.index=enemyNum%201:0;

createEnemy.src=`./img/enemy_${["big","small"][createEnemy.index]}.png`;

createEnemy.width=[100,50][createEnemy.index];

createEnemy.height=[100,50][createEnemy.index];

//敵軍的血量

createEnemy.hp=[4,1][createEnemy.index];

createEnemy.className="enemy";

//敵軍首次出現(xiàn)的位置

letenemyTop=-createEnemy.height;

createEnemy.style.top=enemyTop+"px";

createEnemy.style.left=Math.random()*MapW-createEnemy.width/2+"px";

oMap.appendChild(createEnemy);

enemyNum++;

console.log(createEnemy.offsetLeft,createEnemy.offsetTop)

//判斷敵軍的下落運(yùn)動(dòng)

functionenemyMove(){

if(createEnemy.parentNode){

enemyTop+=speed;

if(enemyTop=MapH){

oMap.removeChild(createEnemy);

}else{

createEnemy.style.top=enemyTop+"px";

//子彈與敵軍發(fā)生碰撞

letarrAllFire=oAllFire.children;

for(leti=arrAllFire.length-1;ii--){

letnewFire=arrAllFire[i];

if(isCollide(newFire,createEnemy)){

//撞上的移出子彈

oAllFire.removeChild(newFire)

//血量減一

createEnemy.hp--;

if(createEnemy.hp===0){

oWrap.score+=[5,1][createEnemy.index];

oScore.innerText=oWrap.score;

//敵軍發(fā)生爆炸

boom({

x:createEnemy.offsetLeft,

y:createEnemy.offsetTop,

w:createEnemy.width,

h:createEnemy.height,

i:createEnemy.index

});

oMap.removeChild(createEnemy);

return;

}

}

}

//我軍與敵軍發(fā)生碰撞

if(myPlane.parentNodeisCollide(createEnemy,myPlane)){

//敵軍產(chǎn)生爆炸

boom({

x:createEnemy.offsetLeft,

y:createEnemy.offsetTop,

w:createEnemy.width,

h:createEnemy.height,

i:createEnemy.index

});

//我軍發(fā)生爆炸

boom({

x:myPlane.offsetLeft,

y:myPlane.offsetTop,

w:myPlane.width,

h:myPlane.height,

i:2

});

oMap.removeChild(createEnemy);

oMap.removeChild(myPlane)

//游戲結(jié)束

gameOver();

return;

}

requestAnimationFrame(enemyMove);

}

}

}

requestAnimationFrame(enemyMove);

},[400,350,300,200][level])

//是否發(fā)生碰撞

functionisCollide(newFirePlane,createEnemy){

//子彈/我軍飛機(jī)的位置

letfireTop=newFirePlane.offsetTop,

fireLeft=newFirePlane.offsetLeft,

fireBottom=fireTop+newFirePlane.clientHeight,

fireRight=fireLeft+newFirePlane.clientWidth;

//飛機(jī)的位置

letcreateEnemyTop=createEnemy.offsetTop,

createEnemyLeft=createEnemy.offsetLeft,

createEnemyRight=createEnemyLeft+createEnemy.clientWidth,

createEnemyBotoom=createEnemyTop+createEnemy.clientHeight;

//沒(méi)碰上的四種結(jié)果

return!(fireTopcreateEnemyBotoom||