js+css實現(xiàn)飛機大戰(zhàn)游戲
本文實例為大家分享了js+css實現(xiàn)飛機大戰(zhàn)游戲的具體代碼,供大家參考,具體內(nèi)容如下
用js和css實現(xiàn),css中定義樣式,js中定義了具體的實現(xiàn)事件,例如碰撞、子彈、飛機等。
main.css文件(可根據(jù)需要定義):
*{ ? ? margin: 0; ? ? padding: 0; } #contentdiv{ ? ? position: absolute; ? ? left: 500px; } #startdiv{ ? ? width: 320px; ? ? height: 568px; ? ? background-image: url(../image/ks.png); } button{ ? ? outline: none; } #startdiv button{ ? ? position: absolute; ? ? top: 500px; ? ? left: 82px; ? ? width: 150px; ? ? height: 30px; ? ? border: 1px solid black; ? ? border-radius: 30px; ? ? background-color: #c4c9ca; } #maindiv{ ? ? width: 320px; ? ? height: 568px; ? ? background-image:url(../image/background_1.png) ; ? ? display: none; } #maindiv img{ ? ? position: absolute; ? ? z-index: 1; } #scorediv{ ? ? font-size: 16px; ? ? font-weight: bold; ? ? position: absolute; ? ? top: 10px; ? ? left: 10px; ? ? display: none; } #scorediv{ ? ? font-size: 18px; ? ? font-weight: bold; } #suspenddiv{ ? ? position: absolute; ? ? top: 210px; ? ? left: 82px; ? ? display: none; ? ? z-index: 2; } #suspenddiv button{ ? ? width: 150px; ? ? height: 30px; ? ? margin-bottom: 20px; ? ? border: 1px solid black; ? ? border-radius: 30px; ? ? background-color: #c4c9ca; } #enddiv{ ? ? position: absolute; ? ? top: 210px; ? ? left: 75px; ? ? border: 1px solid gray; ? ? border-radius: 5px; ? ? text-align: center; ? ? background-color:#d7ddde; ? ? display: none; ? ? z-index: 2; } .plantext{ ? ? width: 160px; ? ? height: 30px; ? ? line-height: 30px; ? ? font-size: 16px; ? ? font-weight: bold; } #planscore{ ? ? width: 160px; ? ? height: 80px; ? ? line-height: 80px; ? ? border-top: 1px solid gray; ? ? border-bottom: 1px solid gray; ? ? font-size: 16px; ? ? font-weight: bold; } #enddiv div{ ? ? width: 160px; ? ? height: 50px; } #enddiv div button{ ? ? margin-top:10px ; ? ? width: 90px; ? ? height: 30px; ? ? border: 1px solid gray; ? ? border-radius: 30px; }
main.js:
//獲得主界面 var mainDiv=document.getElementById("maindiv"); //獲得開始界面 var startdiv=document.getElementById("startdiv"); //獲得游戲中分數(shù)顯示界面 var scorediv=document.getElementById("scorediv"); //獲得分數(shù)界面 var scorelabel=document.getElementById("label"); //獲得暫停界面 var suspenddiv=document.getElementById("suspenddiv"); //獲得游戲結(jié)束界面 var enddiv=document.getElementById("enddiv"); //獲得游戲結(jié)束后分數(shù)統(tǒng)計界面 var planscore=document.getElementById("planscore"); //初始化分數(shù) var scores=0; /* ?創(chuàng)建飛機類 ?*/ function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ ? ? this.planX=X; ? ? this.planY=Y; ? ? this.imagenode=null; ? ? this.planhp=hp; ? ? this.planscore=score; ? ? this.plansizeX=sizeX; ? ? this.plansizeY=sizeY; ? ? this.planboomimage=boomimage; ? ? this.planisdie=false; ? ? this.plandietimes=0; ? ? this.plandietime=dietime; ? ? this.plansudu=sudu; //行為 /* 移動行為 ? ? ?*/ ? ? this.planmove=function(){ ? ? ? ? if(scores<=50000){ ? ? ? ? ? ? this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px"; ? ? ? ? } ? ? ? ? else if(scores>50000&&scores<=100000){ ? ? ? ? ? ? this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+1+"px"; ? ? ? ? } ? ? ? ? else if(scores>100000&&scores<=150000){ ? ? ? ? ? ? this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+2+"px"; ? ? ? ? } ? ? ? ? else if(scores>150000&&scores<=200000){ ? ? ? ? ? ? this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+3+"px"; ? ? ? ? } ? ? ? ? else if(scores>200000&&scores<=300000){ ? ? ? ? ? ? this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+4+"px"; ? ? ? ? } ? ? ? ? else{ ? ? ? ? ? ? this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+5+"px"; ? ? ? ? } ? ? } ? ? this.init=function(){ ? ? ? ? this.imagenode=document.createElement("img"); ? ? ? ? this.imagenode.style.left=this.planX+"px"; ? ? ? ? this.imagenode.style.top=this.planY+"px"; ? ? ? ? this.imagenode.src=imagesrc; ? ? ? ? mainDiv.appendChild(this.imagenode); ? ? } ? ? this.init(); } /* 創(chuàng)建子彈類 ?*/ function bullet(X,Y,sizeX,sizeY,imagesrc){ ? ? this.bulletX=X; ? ? this.bulletY=Y; ? ? this.bulletimage=null; ? ? this.bulletattach=1; ? ? this.bulletsizeX=sizeX; ? ? this.bulletsizeY=sizeY; //行為 /* ?移動行為 ?*/ ? ? this.bulletmove=function(){ ? ? ? ? this.bulletimage.style.top=this.bulletimage.offsetTop-20+"px"; ? ? } ? ? this.init=function(){ ? ? ? ? this.bulletimage=document.createElement("img"); ? ? ? ? this.bulletimage.style.left= this.bulletX+"px"; ? ? ? ? this.bulletimage.style.top= this.bulletY+"px"; ? ? ? ? this.bulletimage.src=imagesrc; ? ? ? ? mainDiv.appendChild(this.bulletimage); ? ? } ? ? this.init(); } /* ?創(chuàng)建單行子彈類 ?*/ function oddbullet(X,Y){ ? ? bullet.call(this,X,Y,6,14,"image/bullet1.png"); } /* 創(chuàng)建敵機類 ?*/ function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ ? ? plan.call(this,hp,random(a,b),-100,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc); } //產(chǎn)生min到max之間的隨機數(shù) function random(min,max){ ? ? return Math.floor(min+Math.random()*(max-min)); } /* 創(chuàng)建本方飛機類 ?*/ function ourplan(X,Y){ ? ? var imagesrc="image/my.gif"; ? ? plan.call(this,1,X,Y,66,80,0,660,0,"image/bz.gif",imagesrc); ? ? this.imagenode.setAttribute('id','ourplan'); } /* ?創(chuàng)建本方飛機 ?*/ var selfplan=new ourplan(120,485); //移動事件 var ourPlan=document.getElementById('ourplan'); var yidong=function(){ ? ? var oevent=window.event||arguments[0]; ? ? var chufa=oevent.srcElement||oevent.target; ? ? var selfplanX=oevent.clientX-500; ? ? var selfplanY=oevent.clientY; ? ? ourPlan.style.left=selfplanX-selfplan.plansizeX/2+"px"; ? ? ourPlan.style.top=selfplanY-selfplan.plansizeY/2+"px"; // ? ?document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px"; // ? ?document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px"; } /* 暫停事件 ?*/ var number=0; var zanting=function(){ ? ? if(number==0){ ? ? ? ? suspenddiv.style.display="block"; ? ? ? ? if(document.removeEventListener){ ? ? ? ? ? ? mainDiv.removeEventListener("mousemove",yidong,true); ? ? ? ? ? ? bodyobj.removeEventListener("mousemove",bianjie,true); ? ? ? ? } ? ? ? ? else if(document.detachEvent){ ? ? ? ? ? ? mainDiv.detachEvent("onmousemove",yidong); ? ? ? ? ? ? bodyobj.detachEvent("onmousemove",bianjie); ? ? ? ? } ? ? ? ? clearInterval(set); ? ? ? ? number=1; ? ? } ? ? else{ ? ? ? ? suspenddiv.style.display="none"; ? ? ? ? if(document.addEventListener){ ? ? ? ? ? ? mainDiv.addEventListener("mousemove",yidong,true); ? ? ? ? ? ? bodyobj.addEventListener("mousemove",bianjie,true); ? ? ? ? } ? ? ? ? else if(document.attachEvent){ ? ? ? ? ? ? mainDiv.attachEvent("onmousemove",yidong); ? ? ? ? ? ? bodyobj.attachEvent("onmousemove",bianjie); ? ? ? ? } ? ? ? ? set=setInterval(start,20); ? ? ? ? number=0; ? ? } } //判斷本方飛機是否移出邊界,如果移出邊界,則取消mousemove事件,反之加上mousemove事件 var bianjie=function(){ ? ? var oevent=window.event||arguments[0]; ? ? var bodyobjX=oevent.clientX; ? ? var bodyobjY=oevent.clientY; ? ? if(bodyobjX<505||bodyobjX>815||bodyobjY<0||bodyobjY>568){ ? ? ? ? if(document.removeEventListener){ ? ? ? ? ? ? mainDiv.removeEventListener("mousemove",yidong,true); ? ? ? ? } ? ? ? ? else if(document.detachEvent){ ? ? ? ? ? ? mainDiv.detachEvent("onmousemove",yidong); ? ? ? ? } ? ? } ? ? else{ ? ? ? ? if(document.addEventListener){ ? ? ? ? ? ? mainDiv.addEventListener("mousemove",yidong,true); ? ? ? ? } ? ? ? ? else if(document.attachEvent){ ? ? ? ? ? ? mainDiv.attachEvent("nomousemove",yidong); ? ? ? ? } ? ? } } //暫停界面重新開始事件 //function chongxinkaishi(){ // ? ?location.reload(true); // ? ?startdiv.style.display="none"; // ? ?maindiv.style.display="block"; //} var bodyobj=document.getElementsByTagName("body")[0]; if(document.addEventListener){ ? ? //為本方飛機添加移動和暫停 ? ? mainDiv.addEventListener("mousemove",yidong,true); ? ? //為本方飛機添加暫停事件 ? ? selfplan.imagenode.addEventListener("click",zanting,true); ? ? //為body添加判斷本方飛機移出邊界事件 ? ? bodyobj.addEventListener("mousemove",bianjie,true); ? ? //為暫停界面的繼續(xù)按鈕添加暫停事件 ? ? suspenddiv.getElementsByTagName("button")[0].addEventListener("click",zanting,true); // ? ?suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true); ? ? //為暫停界面的返回主頁按鈕添加事件 ? ? suspenddiv.getElementsByTagName("button")[2].addEventListener("click",jixu,true); } else if(document.attachEvent){ ? ? //為本方飛機添加移動 ? ? mainDiv.attachEvent("onmousemove",yidong); ? ? //為本方飛機添加暫停事件 ? ? selfplan.imagenode.attachEvent("onclick",zanting); ? ? //為body添加判斷本方飛機移出邊界事件 ? ? bodyobj.attachEvent("onmousemove",bianjie); ? ? //為暫停界面的繼續(xù)按鈕添加暫停事件 ? ? suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick",zanting); // ? ?suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true); ? ? //為暫停界面的返回主頁按鈕添加事件 ? ? suspenddiv.getElementsByTagName("button")[2].attachEvent("click",jixu,true); } //初始化隱藏本方飛機 selfplan.imagenode.style.display="none"; /* 敵機對象數(shù)組 ?*/ var enemys=[]; /* 子彈對象數(shù)組 ?*/ var bullets=[]; var mark=0; var mark1=0; var backgroundPositionY=0; /* 開始函數(shù) ?*/ function start(){ ? ? mainDiv.style.backgroundPositionY=backgroundPositionY+"px"; ? ? backgroundPositionY+=0.5; ? ? if(backgroundPositionY==568){ ? ? ? ? backgroundPositionY=0; ? ? } ? ? mark++; ? ? /* ? ? 創(chuàng)建敵方飛機 ? ? ?*/ ? ? if(mark==20){ ? ? ? ? mark1++; ? ? ? ? //中飛機 ? ? ? ? if(mark1%5==0){ ? ? ? ? ? ? enemys.push(new enemy(6,25,274,46,60,5000,360,random(1,3),"image/zz.gif","image/enemy3_fly_1.png")); ? ? ? ? } ? ? ? ? //大飛機 ? ? ? ? if(mark1==20){ ? ? ? ? ? ? enemys.push(new enemy(12,57,210,110,164,30000,540,1,"image/dd.gif","image/enemy2_fly_1.png")); ? ? ? ? ? ? mark1=0; ? ? ? ? } ? ? ? ? //小飛機 ? ? ? ? else{ ? ? ? ? ? ? enemys.push(new enemy(1,19,286,34,24,1000,360,random(1,4),"image/xx.gif","image/enemy1_fly_1.png")); ? ? ? ? } ? ? ? ? mark=0; ? ? } /* 移動敵方飛機 ?*/ ? ? var enemyslen=enemys.length; ? ? for(var i=0;i<enemyslen;i++){ ? ? ? ? if(enemys[i].planisdie!=true){ ? ? ? ? ? ? enemys[i].planmove(); ? ? ? ? } /* ?如果敵機超出邊界,刪除敵機 ?*/ ? ? ? ? if(enemys[i].imagenode.offsetTop>568){ ? ? ? ? ? ? mainDiv.removeChild(enemys[i].imagenode); ? ? ? ? ? ? enemys.splice(i,1); ? ? ? ? ? ? enemyslen--; ? ? ? ? } ? ? ? ? //當敵機死亡標記為true時,經(jīng)過一段時間后清除敵機 ? ? ? ? if(enemys[i].planisdie==true){ ? ? ? ? ? ? enemys[i].plandietimes+=20; ? ? ? ? ? ? if(enemys[i].plandietimes==enemys[i].plandietime){ ? ? ? ? ? ? ? ? mainDiv.removeChild(enemys[i].imagenode); ? ? ? ? ? ? ? ? enemys.splice(i,1); ? ? ? ? ? ? ? ? enemyslen--; ? ? ? ? ? ? } ? ? ? ? } ? ? } /* 創(chuàng)建子彈 */ ? ? if(mark%5==0){ ? ? ?bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+1,parseInt(selfplan.imagenode.style.top)-10)); ? ? ?bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+11,parseInt(selfplan.imagenode.style.top)-10)); ? ? ?bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+21,parseInt(selfplan.imagenode.style.top)-10)); ? ? ?bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+31,parseInt(selfplan.imagenode.style.top)-10)); ? ? ?bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+41,parseInt(selfplan.imagenode.style.top)-10)); ? ? ?bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+51,parseInt(selfplan.imagenode.style.top)-10)); ? ? ?bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+61,parseInt(selfplan.imagenode.style.top)-10)); ? ? } /* 移動子彈 */ ? ? var bulletslen=bullets.length; ? ? for(var i=0;i<bulletslen;i++){ ? ? ? ? bullets[i].bulletmove(); /* 如果子彈超出邊界,刪除子彈 */ ? ? ? ? if(bullets[i].bulletimage.offsetTop<0){ ? ? ? ? ? ? mainDiv.removeChild(bullets[i].bulletimage); ? ? ? ? ? ? bullets.splice(i,1); ? ? ? ? ? ? bulletslen--; ? ? ? ? } ? ? } /* 碰撞判斷 */ ? ? for(var k=0;k<bulletslen;k++){ ? ? ? ? for(var j=0;j<enemyslen;j++){ ? ? ? ? ? ? //判斷碰撞本方飛機 ? ? ? ? ? ? if(enemys[j].planisdie==false){ ? ? ? ? ? ? ? ? if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){ ? ? ? ? ? ? ? ? ? if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){ ? ? ? ? ? ? ? ? ? ? ? //碰撞本方飛機,游戲結(jié)束,統(tǒng)計分數(shù) ? ? ? ? ? ? ? ? ? ? ? selfplan.imagenode.src="image/bz.gif"; ? ? ? ? ? ? ? ? ? ? ? enddiv.style.display="block"; ? ? ? ? ? ? ? ? ? ? ? planscore.innerHTML=scores; ? ? ? ? ? ? ? ? ? ? ? if(document.removeEventListener){ ? ? ? ? ? ? ? ? ? ? ? ? ? mainDiv.removeEventListener("mousemove",yidong,true); ? ? ? ? ? ? ? ? ? ? ? ? ? bodyobj.removeEventListener("mousemove",bianjie,true); ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? else if(document.detachEvent){ ? ? ? ? ? ? ? ? ? ? ? ? ? mainDiv.detachEvent("onmousemove",yidong); ? ? ? ? ? ? ? ? ? ? ? ? ? bodyobj.removeEventListener("mousemove",bianjie,true); ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? clearInterval(set); ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? //判斷子彈與敵機碰撞 ? ? ? ? ? ? ? ? if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){ ? ? ? ? ? ? ? ? ? ? if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){ ? ? ? ? ? ? ? ? ? ? ? ? //敵機血量減子彈攻擊力 ? ? ? ? ? ? ? ? ? ? ? ? enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach; ? ? ? ? ? ? ? ? ? ? ? ? //敵機血量為0,敵機圖片換為爆炸圖片,死亡標記為true,計分 ? ? ? ? ? ? ? ? ? ? ? ? if(enemys[j].planhp==0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? scores=scores+enemys[j].planscore; ? ? ? ? ? ? ? ? ? ? ? ? ? ? scorelabel.innerHTML=scores; ? ? ? ? ? ? ? ? ? ? ? ? ? ? enemys[j].imagenode.src=enemys[j].planboomimage; ? ? ? ? ? ? ? ? ? ? ? ? ? ? enemys[j].planisdie=true; ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? //刪除子彈 ? ? ? ? ? ? ? ? ? ? ? ? mainDiv.removeChild(bullets[k].bulletimage); ? ? ? ? ? ? ? ? ? ? ? ? ? ? bullets.splice(k,1); ? ? ? ? ? ? ? ? ? ? ? ? ? ? bulletslen--; ? ? ? ? ? ? ? ? ? ? ? ? ? ? break; ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } ? ? } } /* 開始游戲按鈕點擊事件 ?*/ var set; function begin(){ ? ? startdiv.style.display="none"; ? ? mainDiv.style.display="block"; ? ? selfplan.imagenode.style.display="block"; ? ? scorediv.style.display="block"; ? ? /* ? ? ?調(diào)用開始函數(shù) ? ? ?*/ ? ? set=setInterval(start,20); } //游戲結(jié)束后點擊繼續(xù)按鈕事件 function jixu(){ ? ? location.reload(true); } /* ? ? 完成界面的初始化 ? ? 敵方小飛機一個 ? ? 我方飛機一個 ?*/
實現(xiàn)界面:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 獲取所有id中包含某關(guān)鍵字的控件的實現(xiàn)代碼
獲取某容器控件中id包含某字符串的控件id列表2010-11-11JavaScript中誤用/g導(dǎo)致的正則test()無法正確重復(fù)執(zhí)行的解決方案
這篇文章主要介紹了JavaScript中誤用/g導(dǎo)致的正則test()無法正確重復(fù)執(zhí)行的解決方案的相關(guān)資料,需要的朋友可以參考下2016-07-07封裝的dialog插件 基于bootstrap模態(tài)對話框的簡單擴展
這篇文章主要介紹了基于bootstrap模態(tài)對話框的簡單擴展,bootstrap-mzDialog插件的封裝,感興趣的小伙伴們可以參考一下2016-08-08JavaScript基于libgif.js實現(xiàn)控制gif動畫幀
這篇文章主要為大家詳細介紹了JavaScript如何利用libgif.js插件控制gif動畫幀,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02javascript getElementById 使用方法及用法
顧明思義,get-Element-By-Id,就是通過ID來設(shè)置/返回HTML標簽的屬性及調(diào)用其事件與方法。用這個方法基本上可以控制頁面所有標簽,條件很簡單就是給每個標簽分配一個ID號2008-11-11javascript dom追加內(nèi)容實現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的,在本文將為大家介紹下具體的使用方法,感興趣的朋友可以參考下2013-09-09基于JavaScript實現(xiàn)回到頁面頂部動畫代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)回到頁面頂部動畫代碼的相關(guān)資料,代碼簡單易用,非常實用,需要的朋友可以參考下2016-05-05