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

純JavaScript模仿微信打飛機(jī)游戲,做網(wǎng)頁(yè)小游戲的借鑒下,界面設(shè)計(jì)是豎長(zhǎng)形仿手機(jī)屏幕風(fēng)格,游戲效果流暢。具有分?jǐn)?shù)統(tǒng)計(jì),里面的JS封裝類(lèi)中包括有創(chuàng)建飛機(jī)類(lèi)、飛機(jī)移動(dòng)行為控制,創(chuàng)建子彈類(lèi),產(chǎn)生min到max之間的隨機(jī)數(shù),判斷本方飛機(jī)是否移出邊界,如果移出邊界,則取消mousemove事件,反之加上mousemove事件,為暫停界面的繼續(xù)按鈕添加暫停事件,創(chuàng)建敵方飛機(jī)類(lèi)、碰撞判斷、完成界面的初始化,敵方小飛機(jī)一個(gè),我方飛機(jī)一個(gè)。
//獲得主界面
var mainDiv=document.getElementById("maindiv");
//獲得開(kāi)始界面
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ī)類(lèi) */ 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)建子彈類(lèi) */ 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)建單行子彈類(lèi) */ function oddbullet(X,Y){ bullet.call(this,X,Y,,,"image/bullet.png"); } /* 創(chuàng)建敵機(jī)類(lèi) */ 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ī)類(lèi) */ 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); } } }
//暫停界面重新開(kāi)始事件
//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);
//為暫停界面的返回主頁(yè)按鈕添加事件
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);
//為暫停界面的返回主頁(yè)按鈕添加事件
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=;
/*
開(kāi)始函數(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)過(guò)一段時(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í)方法還有很多種,歡迎大家一起來(lái)分享。
- JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)
- js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
- JavaScript用200行代碼制作打飛機(jī)小游戲?qū)嵗?/a>
- JavaScript仿微信打飛機(jī)游戲
- three.js繪制地球、飛機(jī)與軌跡的效果示例
- JavaScript原生編寫(xiě)《飛機(jī)大戰(zhàn)坦克》游戲完整實(shí)例
- JavaScript制作簡(jiǎn)易的微信打飛機(jī)
- JavaScript 小型打飛機(jī)游戲?qū)崿F(xiàn)原理說(shuō)明
- js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
相關(guān)文章
17道題讓你徹底理解JS中的類(lèi)型轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于如何通過(guò)17道題讓你徹底理解JS中的類(lèi)型轉(zhuǎn)換的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript獲取系統(tǒng)自帶的顏色選擇器功能(圖)
JavaScript獲取系統(tǒng)自帶的顏色選擇器功能,這個(gè)是針對(duì)IE瀏覽器,所以大家如果想用兼容性更好的代碼,可以查看腳本之家的相關(guān)文章。2010-08-08
JavaScript字符串對(duì)象(string)基本用法示例
這篇文章主要介紹了JavaScript字符串對(duì)象(string)基本用法,結(jié)合實(shí)例形式分析了js字符串的添加、計(jì)算、獲取、替換等操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01
js前端加密庫(kù)Crypto-js進(jìn)行MD5/SHA256/BASE64/AES加解密的方法與示例
js加密解密可以使用crypto-js它可以進(jìn)行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,這是一個(gè)對(duì)稱(chēng)加密的庫(kù),可以使用 AES、DES、但沒(méi)有rsa等非對(duì)稱(chēng)加密的方法2023-12-12
維護(hù)loading加載狀態(tài)的幾個(gè)方法小結(jié)
在項(xiàng)目開(kāi)發(fā)中,當(dāng)頁(yè)面請(qǐng)求接口時(shí),組件局部或者頁(yè)面全局顯示loading加載遮罩可謂是司空見(jiàn)慣了,下面來(lái)討論一下如何優(yōu)雅的使用loading狀態(tài),文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
javascript實(shí)現(xiàn)框架高度隨內(nèi)容改變的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)框架高度隨內(nèi)容改變的方法,實(shí)例分析了通過(guò)父頁(yè)面及內(nèi)容改變框架高度兩種實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
js querySelector和getElementById通過(guò)id獲取元素的區(qū)別
這是sina同事xiaoniu發(fā)現(xiàn)的,querySelector和getElementById通過(guò)id獲取元素的區(qū)別2012-04-04

