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

純JavaScript模仿微信打飛機游戲,做網(wǎng)頁小游戲的借鑒下,界面設(shè)計是豎長形仿手機屏幕風(fēng)格,游戲效果流暢。具有分?jǐn)?shù)統(tǒng)計,里面的JS封裝類中包括有創(chuàng)建飛機類、飛機移動行為控制,創(chuàng)建子彈類,產(chǎn)生min到max之間的隨機數(shù),判斷本方飛機是否移出邊界,如果移出邊界,則取消mousemove事件,反之加上mousemove事件,為暫停界面的繼續(xù)按鈕添加暫停事件,創(chuàng)建敵方飛機類、碰撞判斷、完成界面的初始化,敵方小飛機一個,我方飛機一個。
//獲得主界面
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)計界面
var planscore=document.getElementById("planscore");
//初始化分?jǐn)?shù)
var scores=; /* 創(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=; this.plandietime=dietime; this.plansudu=sudu; //行為 /* 移動行為 */ 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; //行為 /* 移動行為 */ 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)建敵機類 */ 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之間的隨機數(shù) function random(min,max){ return Math.floor(min+Math.random()*(max-min)); } /* 創(chuàng)建本方飛機類 */ function ourplan(X,Y){ var imagesrc="image/我的飛機.gif"; plan.call(this,,X,Y,,,,,,"image/本方飛機爆炸.gif",imagesrc); this.imagenode.setAttribute('id','ourplan'); } /* 創(chuàng)建本方飛機 */ var selfplan=new ourplan(,); //移動事件 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=; } } //判斷本方飛機是否移出邊界,如果移出邊界,則取消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){
//為本方飛機添加移動和暫停
mainDiv.addEventListener("mousemove",yidong,true);
//為本方飛機添加暫停事件
selfplan.imagenode.addEventListener("click",zanting,true);
//為body添加判斷本方飛機移出邊界事件
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){
//為本方飛機添加移動
mainDiv.attachEvent("onmousemove",yidong);
//為本方飛機添加暫停事件
selfplan.imagenode.attachEvent("onclick",zanting);
//為body添加判斷本方飛機移出邊界事件
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);
}
//初始化隱藏本方飛機
selfplan.imagenode.style.display="none";
/*
敵機對象數(shù)組
*/
var enemys=[];
/*
子彈對象數(shù)組
*/
var bullets=[];
var mark=;
var mark=;
var backgroundPositionY=;
/*
開始函數(shù)
*/
function start(){
mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
backgroundPositionY+=.;
if(backgroundPositionY==){
backgroundPositionY=;
}
mark++;
/*
創(chuàng)建敵方飛機
*/
if(mark==){
mark++;
//中飛機
if(mark%==){
enemys.push(new enemy(,,,,,,,random(,),"image/中飛機爆炸.gif","image/enemy_fly_.png"));
}
//大飛機
if(mark==){
enemys.push(new enemy(,,,,,,,,"image/大飛機爆炸.gif","image/enemy_fly_.png"));
mark=;
}
//小飛機
else{
enemys.push(new enemy(,,,,,,,random(,),"image/小飛機爆炸.gif","image/enemy_fly_.png"));
}
mark=;
}
/*
移動敵方飛機
*/
var enemyslen=enemys.length;
for(var i=;i<enemyslen;i++){
if(enemys[i].planisdie!=true){
enemys[i].planmove();
}
/*
如果敵機超出邊界,刪除敵機
*/
if(enemys[i].imagenode.offsetTop>){
mainDiv.removeChild(enemys[i].imagenode);
enemys.splice(i,);
enemyslen--;
}
//當(dāng)敵機死亡標(biāo)記為true時,經(jīng)過一段時間后清除敵機
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)-));
}
/*
移動子彈
*/
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++){
//判斷碰撞本方飛機
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){
//碰撞本方飛機,游戲結(jié)束,統(tǒng)計分?jǐn)?shù)
selfplan.imagenode.src="image/本方飛機爆炸.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){
以上代碼簡單吧,使用純javascript模仿微信打飛機小游戲,當(dāng)時方法還有很多種,歡迎大家一起來分享。
相關(guān)文章
基于Ionic3實現(xiàn)選項卡切換并重新加載echarts
這篇文章主要介紹了基于Ionic3實現(xiàn)選項卡切換并重新加載echarts,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
setTimeout與setInterval的區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于setTimeout與setInterval區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03

