純javascript模仿微信打飛機(jī)小游戲
七夕情人節(jié)也不要忘了打游戲喔喔~,下面小編為大家準(zhǔn)備的情人節(jié)禮物之純javascript模仿微信打飛機(jī)小游戲分享給天下的情人們。
首先給大家展示效果圖:

純JavaScript模仿微信打飛機(jī)游戲,做網(wǎng)頁小游戲的借鑒下,界面設(shè)計(jì)是豎長(zhǎng)形仿手機(jī)屏幕風(fēng)格,游戲效果流暢。具有分?jǐn)?shù)統(tǒng)計(jì),里面的JS封裝類中包括有創(chuàng)建飛機(jī)類、飛機(jī)移動(dòng)行為控制,創(chuàng)建子彈類,產(chǎn)生min到max之間的隨機(jī)數(shù),判斷本方飛機(jī)是否移出邊界,如果移出邊界,則取消mousemove事件,反之加上mousemove事件,為暫停界面的繼續(xù)按鈕添加暫停事件,創(chuàng)建敵方飛機(jī)類、碰撞判斷、完成界面的初始化,敵方小飛機(jī)一個(gè),我方飛機(jī)一個(gè)。
//獲得主界面
var mainDiv=document.getElementById("maindiv");
//獲得開始界面
var startdiv=document.getElementById("startdiv");
//獲得游戲中分?jǐn)?shù)顯示界面
var scorediv=document.getElementById("scorediv");
//獲得分?jǐn)?shù)界面
var scorelabel=document.getElementById("label");
//獲得暫停界面
var suspenddiv=document.getElementById("suspenddiv");
//獲得游戲結(jié)束界面
var enddiv=document.getElementById("enddiv");
//獲得游戲結(jié)束后分?jǐn)?shù)統(tǒng)計(jì)界面
var planscore=document.getElementById("planscore");
//初始化分?jǐn)?shù)
var scores=; /* 創(chuàng)建飛機(jī)類 */ 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=; this.plandietime=dietime; this.plansudu=sudu; //行為 /* 移動(dòng)行為 */ this.planmove=function(){ if(scores<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px"; } else if(scores>&&scores<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px"; } else if(scores>&&scores<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px"; } else if(scores>&&scores<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px"; } else if(scores>&&scores<=){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px"; } else{ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px"; } } this.init=function(){ this.imagenode=document.Element("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=; this.bulletsizeX=sizeX; this.bulletsizeY=sizeY; //行為 /* 移動(dòng)行為 */ this.bulletmove=function(){ this.bulletimage.style.top=this.bulletimage.offsetTop-+"px"; } this.init=function(){ this.bulletimage=document.Element("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,,,"image/bullet.png"); } /* 創(chuàng)建敵機(jī)類 */ function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ plan.call(this,hp,random(a,b),-,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc); } //產(chǎn)生min到max之間的隨機(jī)數(shù) function random(min,max){ return Math.floor(min+Math.random()*(max-min)); } /* 創(chuàng)建本方飛機(jī)類 */ function ourplan(X,Y){ var imagesrc="image/我的飛機(jī).gif"; plan.call(this,,X,Y,,,,,,"image/本方飛機(jī)爆炸.gif",imagesrc); this.imagenode.setAttribute('id','ourplan'); } /* 創(chuàng)建本方飛機(jī) */ var selfplan=new ourplan(,); //移動(dòng)事件 var ourPlan=document.getElementById('ourplan'); var yidong=function(){ var oevent=window.event||arguments[]; var chufa=oevent.srcElement||oevent.target; var selfplanX=oevent.clientX-; var selfplanY=oevent.clientY; ourPlan.style.left=selfplanX-selfplan.plansizeX/+"px"; ourPlan.style.top=selfplanY-selfplan.plansizeY/+"px"; // document.getElementsByTagName('img')[].style.left=selfplanX-selfplan.plansizeX/+"px"; // document.getElementsByTagName('img')[]..style.top=selfplanY-selfplan.plansizeY/+"px"; } /* 暫停事件 */ var number=; var zanting=function(){ if(number==){ 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=; } 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,); number=; } } //判斷本方飛機(jī)是否移出邊界,如果移出邊界,則取消mousemove事件,反之加上mousemove事件 var bianjie=function(){ var oevent=window.event||arguments[]; var bodyobjX=oevent.clientX; var bodyobjY=oevent.clientY; if(bodyobjX<||bodyobjX>||bodyobjY<||bodyobjY>){ 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")[];
if(document.addEventListener){
//為本方飛機(jī)添加移動(dòng)和暫停
mainDiv.addEventListener("mousemove",yidong,true);
//為本方飛機(jī)添加暫停事件
selfplan.imagenode.addEventListener("click",zanting,true);
//為body添加判斷本方飛機(jī)移出邊界事件
bodyobj.addEventListener("mousemove",bianjie,true);
//為暫停界面的繼續(xù)按鈕添加暫停事件
suspenddiv.getElementsByTagName("button")[].addEventListener("click",zanting,true);
// suspenddiv.getElementsByTagName("button")[].addEventListener("click",chongxinkaishi,true);
//為暫停界面的返回主頁按鈕添加事件
suspenddiv.getElementsByTagName("button")[].addEventListener("click",jixu,true);
}
else if(document.attachEvent){
//為本方飛機(jī)添加移動(dòng)
mainDiv.attachEvent("onmousemove",yidong);
//為本方飛機(jī)添加暫停事件
selfplan.imagenode.attachEvent("onclick",zanting);
//為body添加判斷本方飛機(jī)移出邊界事件
bodyobj.attachEvent("onmousemove",bianjie);
//為暫停界面的繼續(xù)按鈕添加暫停事件
suspenddiv.getElementsByTagName("button")[].attachEvent("onclick",zanting);
// suspenddiv.getElementsByTagName("button")[].attachEvent("click",chongxinkaishi,true);
//為暫停界面的返回主頁按鈕添加事件
suspenddiv.getElementsByTagName("button")[].attachEvent("click",jixu,true);
}
//初始化隱藏本方飛機(jī)
selfplan.imagenode.style.display="none";
/*
敵機(jī)對(duì)象數(shù)組
*/
var enemys=[];
/*
子彈對(duì)象數(shù)組
*/
var bullets=[];
var mark=;
var mark=;
var backgroundPositionY=;
/*
開始函數(shù)
*/
function start(){
mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
backgroundPositionY+=.;
if(backgroundPositionY==){
backgroundPositionY=;
}
mark++;
/*
創(chuàng)建敵方飛機(jī)
*/
if(mark==){
mark++;
//中飛機(jī)
if(mark%==){
enemys.push(new enemy(,,,,,,,random(,),"image/中飛機(jī)爆炸.gif","image/enemy_fly_.png"));
}
//大飛機(jī)
if(mark==){
enemys.push(new enemy(,,,,,,,,"image/大飛機(jī)爆炸.gif","image/enemy_fly_.png"));
mark=;
}
//小飛機(jī)
else{
enemys.push(new enemy(,,,,,,,random(,),"image/小飛機(jī)爆炸.gif","image/enemy_fly_.png"));
}
mark=;
}
/*
移動(dòng)敵方飛機(jī)
*/
var enemyslen=enemys.length;
for(var i=;i<enemyslen;i++){
if(enemys[i].planisdie!=true){
enemys[i].planmove();
}
/*
如果敵機(jī)超出邊界,刪除敵機(jī)
*/
if(enemys[i].imagenode.offsetTop>){
mainDiv.removeChild(enemys[i].imagenode);
enemys.splice(i,);
enemyslen--;
}
//當(dāng)敵機(jī)死亡標(biāo)記為true時(shí),經(jīng)過一段時(shí)間后清除敵機(jī)
if(enemys[i].planisdie==true){
enemys[i].plandietimes+=;
if(enemys[i].plandietimes==enemys[i].plandietime){
mainDiv.removeChild(enemys[i].imagenode);
enemys.splice(i,);
enemyslen--;
}
}
}
/*
創(chuàng)建子彈
*/
if(mark%==){
bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+,parseInt(selfplan.imagenode.style.top)-));
}
/*
移動(dòng)子彈
*/
var bulletslen=bullets.length;
for(var i=;i<bulletslen;i++){
bullets[i].bulletmove();
/*
如果子彈超出邊界,刪除子彈
*/
if(bullets[i].bulletimage.offsetTop<){
mainDiv.removeChild(bullets[i].bulletimage);
bullets.splice(i,);
bulletslen--;
}
}
/*
碰撞判斷
*/
for(var k=;k<bulletslen;k++){
for(var j=;j<enemyslen;j++){
//判斷碰撞本方飛機(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+&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-+selfplan.plansizeY){
//碰撞本方飛機(jī),游戲結(jié)束,統(tǒng)計(jì)分?jǐn)?shù)
selfplan.imagenode.src="image/本方飛機(jī)爆炸.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){
以上代碼簡(jiǎn)單吧,使用純javascript模仿微信打飛機(jī)小游戲,當(dāng)時(shí)方法還有很多種,歡迎大家一起來分享。
相關(guān)文章
基于Ionic3實(shí)現(xiàn)選項(xiàng)卡切換并重新加載echarts
這篇文章主要介紹了基于Ionic3實(shí)現(xiàn)選項(xiàng)卡切換并重新加載echarts,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
setTimeout與setInterval的區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于setTimeout與setInterval區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JS實(shí)現(xiàn)列表的響應(yīng)式排版(推薦)
列表的響應(yīng)式排版,首先每行固定好個(gè)數(shù),然后隨頁面寬度調(diào)整個(gè)數(shù)和大小,保證圖片的的可讀性及美觀。接下來小編給大家?guī)韺?shí)現(xiàn)思路介紹,一起看看吧2016-09-09

