javascript
JS原生编写飞机大战小蜜蜂游戏
javascript設計模式之單體模式--飛機大戰小蜜蜂游戲
單體是一個用來劃分命名空間并將一批相關的屬性和方法組織在一起的對象，如果他可以被實例化，那么他只能被實例化一次。
單體模式是javascript里面最基本但是也是最有用的也是最常用的模式之一。
單體模式的特點：
1，可以用來劃分命名空間，從而清除全局變量所帶來的危險
2，利用分支技術來封裝瀏覽器直接的差異。
3，可以把代碼組織的更為一體，便于閱讀和維護。
?
單體模式的思路是：
一個類能返回一個對象的引用（并且永遠是同一個）和一個獲得該實例的方法（靜態方法，通常使用getInstance名稱）。那么當我們調用這個方法時，如果類持有的引用不為空就返回該引用，否者就創建該類的實例，并且將實例引用賦值給該類保持的那個引用再返回。同時將該類的構造函數定義為私有方法，避免其他函數使用該構造函數來實例化對象，只通過該類的靜態方法來得到該類的唯一實例。
游戲中的困擾：
1.飛機移動的同時可以發射子彈--解決辦法：在onkeydown中添加左右移動事件，在onkeyup中添加子彈發射事件和判斷是否是移動鍵移松開，如果是就讓移動失效，這樣就可以按下飛機移動鍵的同時，按下子彈發射鍵并松開此鍵發射子彈，此時飛機仍然移動。
源碼中用到的圖片：
飛機--???? 低級小蜜蜂--??? 中級小蜜蜂-- ?? 高級小蜜蜂--
源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:800px; height:600px; overflow:hidden; background:black; margin:20px auto; position:relative;}
#gameName{color:white;font-size:40px;font-family:'華文隸書';position:absolute;top:40px;left:255px;}
#gameAuthor{color:white;font-size:14px;position:absolute;top:578px;left:170px;}
#gameBtn{ color:white; font-size:20px; cursor:pointer; border:1px #FFFFFF solid; width:100px; height:30px; line-height:30px; text-align:center; position:absolute; top:285px; left:350px;}
#score{ color:#FFFFFF;}
#bee{ position:relative;}
.enemy1{ width:40px; height:28px; background:url(images/mf1.png) no-repeat; float:left;}
.enemy2{ width:40px; height:28px; background:url(images/mf2.png) no-repeat; float:left;}
.enemy3{ width:40px; height:28px; background:url(images/mf3.png) no-repeat; float:left;}
.air1{ width:46px; height:60px; background:url(images/fj.png) no-repeat; position:absolute;}
.bullet{ width:1px; overflow:hidden; height:10px; background:white; position:absolute;}
</style>
<script>
window.οnlοad=function(){
?? ?var oBtn=document.getElementById("gameBtn");
?? ?oBtn.οnclick=function(){
?? ??? ?this.style.display='none';
?? ??? ?document.getElementById('gameAuthor').style.display='none';
?? ??? ?document.getElementById('gameName').style.display='none';
?? ??? ?Game.init('div1');//游戲開始
?? ?};
};
var Game={
?? ?
?? ?oEnemy:{//敵人的數據
?? ??? ?e1:{style:'enemy1',blood:1,speed:3,score:1},
?? ??? ?e2:{style:'enemy2',blood:2,speed:4,score:2},
?? ??? ?e3:{style:'enemy3',blood:3,speed:4,score:3},
?? ?},
?? ?
?? ?gk:[//關卡的數據
?? ??? ?{//第一關
?? ??? ??? ?eMap:[
?? ??? ??? ??? ?'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
?? ??? ??? ??? ?'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
?? ??? ??? ??? ?'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
?? ??? ??? ??? ?'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
?? ??? ??? ??? ?'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
?? ??? ??? ??? ?'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
?? ??? ??? ?],
?? ??? ??? ?colNum:10,
?? ??? ??? ?iSpeedX:10,
?? ??? ??? ?iSpeedY:10,
?? ??? ??? ?times:2000//小蜜蜂飛下來的時間間隔
?? ??? ?},
?? ??? ?{//第二關
?? ??? ??? ?eMap:[
?? ??? ??? ??? ?'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
?? ??? ??? ??? ?'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
?? ??? ??? ??? ?'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
?? ??? ??? ??? ?'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
?? ??? ??? ??? ?'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
?? ??? ??? ??? ?'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
?? ??? ??? ?],
?? ??? ??? ?colNum:10,
?? ??? ??? ?iSpeedX:10,
?? ??? ??? ?iSpeedY:10,
?? ??? ??? ?times:2000//小蜜蜂飛下來的時間間
?? ??? ?}
?? ?],
?? ?
?? ?air:{//飛機的數據
?? ??? ?style:'air1',//飛機樣式
?? ??? ?bulletStyle:'bullet'//子彈樣式
?? ?},
?? ?
?? ?init:function(id){//初始化
?? ??? ?this.oParent=document.getElementById(id);
?? ??? ?
?? ??? ?this.createScore();//創建積分
?? ??? ?
?? ??? ?this.createEnemy(0);//創建敵人
?? ??? ?
?? ??? ?this.createAir();//創建飛機
?? ?},
?? ?
?? ?createScore:function(){//積分的創建
?? ??? ?var oS=document.createElement('div');
?? ??? ?oS.id='score';
?? ??? ?oS.innerHTML='積分：<span>0</span>';
?? ??? ?this.oParent.appendChild(oS);
?? ??? ?
?? ??? ?this.oSNum=oS.getElementsByTagName('span')[0];
?? ?},
?? ?
?? ?createEnemy:function(iNow){//敵人的創建
?? ?
?? ??? ?if(this.oUl){//如果敵人整體的ul還存在就把它刪掉
?? ??? ??? ?clearInterval(this.oUl.timer);//清除敵人整體移動的定時器
?? ??? ??? ?this.oParent.removeChild(this.oUl);
?? ??? ?}
?? ??? ?
?? ??? ?document.title='第'+(iNow+1)+'關';
?? ?
?? ??? ?var gk=this.gk[iNow];//得到關卡
?? ??? ?var arr=[];//用來存儲ul li蜜蜂的top、left值
?? ??? ?var oUl=document.createElement('ul');
?? ??? ?oUl.id='bee';
?? ??? ?oUl.style.width=gk.colNum*40+'px';
?? ??? ?this.oParent.appendChild(oUl);
?? ??? ?oUl.style.left=(this.oParent.offsetWidth-oUl.offsetWidth)/2+'px';
?? ??? ?
?? ??? ?this.oUl=oUl;//讓oUl變成對象的屬性
?? ??? ?
?? ??? ?for(var i=0;i<gk.eMap.length;i++){//創建li小蜜蜂
?? ??? ??? ?var oLi=document.createElement('li');
?? ??? ??? ?oLi.className=this.oEnemy[gk.eMap[i]].style;
?? ??? ??? ?
?? ??? ??? ?oLi.blood=this.oEnemy[gk.eMap[i]].blood;
?? ??? ??? ?oLi.speed=this.oEnemy[gk.eMap[i]].speed;
?? ??? ??? ?oLi.score=this.oEnemy[gk.eMap[i]].score;
?? ??? ??? ?
?? ??? ??? ?oUl.appendChild(oLi);//每個蜜蜂填到ul中
?? ??? ?}
?? ??? ?this.aLi=oUl.getElementsByTagName('li');//將所有li小蜜蜂設置為全局的
?? ??? ?
?? ??? ?for(var i=0;i<this.aLi.length;i++){
?? ??? ??? ?arr.push([this.aLi[i].offsetLeft,this.aLi[i].offsetTop]);//arr[][]
?? ??? ?}
?? ??? ?
?? ??? ?//每個蜜蜂轉定位
?? ??? ?for(var i=0;i<this.aLi.length;i++){
?? ??? ??? ?//創建蜜蜂存好每個蜜蜂的left、top值后再用JS把ul li蜜蜂原來的浮動改為絕對定位，這樣避免了:子彈碰到一個蜜蜂，該蜜蜂消失，而該蜜蜂的相鄰蜜蜂因為浮動而來補位又和子彈碰撞，又消失
?? ??? ??? ?this.aLi[i].style.position='absolute';
?? ??? ??? ?this.aLi[i].style.left=arr[i][0]+'px';
?? ??? ??? ?this.aLi[i].style.top=arr[i][1]+'px';
?? ??? ?}
?? ??? ?
?? ??? ?this.runEnemy(gk);//敵人整體移動,創建好敵人后就觸發
?? ?},
?? ?
?? ?runEnemy:function(gk){//敵人整體移動
?? ??? ?var This=this;
?? ??? ?
?? ??? ?var L=0;
?? ??? ?var R=this.oParent.offsetWidth-this.oUl.offsetWidth;//父層的寬減去ul(敵人整體)的寬就是ul能到達的最大值
?? ??? ?
?? ??? ?this.oUl.timer=setInterval(function(){//定時器賦給此timer方便在通關后銷毀
?? ??? ??? ?
?? ??? ??? ?if(This.oUl.offsetLeft>R){
?? ??? ??? ??? ?gk.iSpeedX*=-1;//反向移動
?? ??? ??? ??? ?This.oUl.style.top=This.oUl.offsetTop+gk.iSpeedY+'px';
?? ??? ??? ?}else if(This.oUl.offsetLeft<L){
?? ??? ??? ??? ?gk.iSpeedX*=-1;
?? ??? ??? ??? ?This.oUl.style.top=This.oUl.offsetTop+gk.iSpeedY+'px';
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?This.oUl.style.left=This.oUl.offsetLeft+gk.iSpeedX+'px';//移動速度
?? ??? ?},200);//200毫秒移動一次
?? ??? ?
?? ??? ?setInterval(function(){
?? ??? ??? ?This.oneMove();
?? ??? ?},gk.times);//每隔一段時間就有一個蜜蜂移動
?? ?},
?? ?
?? ?oneMove:function(){//單兵作戰:一個小蜜蜂移動
?? ??? ?var nowLi=this.aLi[Math.floor(Math.random()*this.aLi.length-1)];//范圍內隨機數取整用來做當前小蜜蜂的腳標
?? ??? ?var This=this;
?? ??? ?
?? ??? ?nowLi.timer=setInterval(function(){//小蜜蜂被刪掉了但是此定時器還在就會出問題，所以這里賦給timer，在子彈刪掉蜜蜂前可清除此定時器
?? ??? ??? ?var a=(This.oA.offsetLeft+This.oA.offsetWidth/2)-(nowLi.offsetLeft+nowLi.parentNode.offsetLeft+This.oA.offsetWidth/2);//蜜蜂和飛機中心點的水平距離
?? ??? ??? ?var b=(This.oA.offsetTop+This.oA.offsetHeight/2)-(nowLi.offsetTop+nowLi.parentNode.offsetTop+This.oA.offsetHeight/2);//蜜蜂和飛機中心點的垂直距離
?? ??? ??? ?var c=Math.sqrt(a*a+b*b);//這是實際距離
?? ??? ??? ?
?? ??? ??? ?var iSX=nowLi.speed*a/c;//蜜蜂向飛機靠近的水平速度
?? ??? ??? ?var iSY=nowLi.speed*b/c;//蜜蜂向飛機靠近的垂直速度
?? ??? ??? ?
?? ??? ??? ?nowLi.style.left=nowLi.offsetLeft+iSX+'px';
?? ??? ??? ?nowLi.style.top=nowLi.offsetTop+iSY+'px';
?? ??? ??? ?
?? ??? ??? ?if(This.pz(This.oA,nowLi)){
?? ??? ??? ??? ?alert('游戲結束');
?? ??? ??? ??? ?window.location.reload();
?? ??? ??? ?}
?? ??? ?},30);
?? ?},
?? ?
?? ?createAir:function(){//創建飛機
?? ??? ?var oA=document.createElement('div');
?? ??? ?oA.className=this.air.style;
?? ??? ?
?? ??? ?this.oA=oA;
?? ??? ?
?? ??? ?this.oParent.appendChild(oA);
?? ??? ?oA.style.left=(this.oParent.offsetWidth-oA.offsetWidth)/2+'px';
?? ??? ?oA.style.top=(this.oParent.offsetHeight-oA.offsetHeight)+'px';
?? ??? ?this.bindAir();
?? ?},
?? ?
?? ?bindAir:function(){//操作飛機
?? ??? ?
?? ??? ?var timer=null;
?? ??? ?var iNum=0;
?? ??? ?var This=this;
?? ??? ?
?? ??? ?document.οnkeydοwn=function(ev){//按下按鍵時的處理
?? ??? ??? ?var ev=ev||window.event;
?? ??? ??? ?
?? ??? ??? ?if(!timer){//為了定時器保持只有一份，不會有累加效果
?? ??? ??? ??? ?timer=setInterval(show,30);//把飛機左右移動的定時器賦給timer方便銷毀
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?if(ev.keyCode==37){//左鍵
?? ??? ??? ??? ?iNum=1;
?? ??? ??? ?}else if(ev.keyCode==39){//右鍵
?? ??? ??? ??? ?iNum=2;
?? ??? ??? ?}
?? ??? ?};
?? ??? ?
?? ??? ?document.οnkeyup=function(ev){//松開按鍵后的處理
?? ??? ??? ?var ev=ev||window.event;
?? ??? ??? ?if(ev.keyCode==37||ev.keyCode==39){//若松開左右鍵則取消對應的移動功能
?? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ?timer=null;
?? ??? ??? ??? ?iNum=0;
?? ??? ??? ?}
?? ??? ??? ?if(ev.keyCode == 32){//空格
?? ??? ??? ??? ?This.createBullet();//創建子彈
?? ??? ??? ?}
?? ??? ?}
?? ??? ?
?? ??? ?function show(){
?? ??? ??? ?if(iNum == 1){
?? ??? ??? ??? ?if(This.oA.style.left == -3 + 'px'){//防止飛機移出游戲窗
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?This.oA.style.left = This.oA.offsetLeft - 10 + 'px';
?? ??? ??? ??? ?}
?? ??? ??? ?}else if(iNum == 2){
?? ??? ??? ??? ?if(This.oA.style.left == 757 + 'px'){//防止飛機移出游戲窗
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?This.oA.style.left = This.oA.offsetLeft + 10 + 'px';
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ?},
?? ?
?? ?createBullet:function(){
?? ??? ??? ?//子彈的left值=飛機的left值+飛機本身寬度的一半
?? ??? ??? ?//子彈的top值=飛機的top值-子彈本身的高度
?? ??? ??? ?var oB=document.createElement('div');
?? ??? ??? ?oB.className=this.air.bulletStyle;
?? ??? ??? ?this.oParent.appendChild(oB);
?? ??? ??? ?oB.style.left=this.oA.offsetLeft+this.oA.offsetWidth/2+'px';
?? ??? ??? ?oB.style.top=this.oA.offsetTop-10+'px';
?? ??? ??? ?
?? ??? ??? ?this.runBullet(oB);
?? ?},
?? ?
?? ?runBullet:function(oB){//子彈運動
?? ??? ?var This=this;
?? ??? ?
?? ??? ?oB.timer=setInterval(function(){
?? ??? ??? ?
?? ??? ??? ?if(oB.offsetTop<-10){//當子彈飛出游戲窗就銷毀該子彈，謹防子彈一直飛，導致子彈過多，頁面元素過多影響性能
?? ??? ??? ??? ?clearInterval(oB.timer);
?? ??? ??? ??? ?This.oParent.removeChild(oB);
?? ??? ??? ?}else{
?? ??? ??? ??? ?oB.style.top=oB.offsetTop-10+'px';
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?for(var i=0;i<This.aLi.length;i++){
?? ??? ??? ??? ?if(This.pz(oB,This.aLi[i])){//如果子彈和小蜜蜂碰撞
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?//蜜蜂的血量判斷
?? ??? ??? ??? ??? ?if(This.aLi[i].blood==1){
?? ??? ??? ??? ??? ??? ?clearInterval(This.aLi[i].timer);//清除蜜蜂落下來的定時器
?? ??? ??? ??? ??? ??? ?This.oSNum.innerHTML=parseInt(This.oSNum.innerHTML)+This.aLi[i].score;
?? ??? ??? ??? ??? ??? ?This.oUl.removeChild(This.aLi[i]);//刪掉蜜蜂
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?This.aLi[i].blood--;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?clearInterval(oB.timer);//先把定時器關閉再刪子彈，這樣可提高性能
?? ??? ??? ??? ??? ?This.oParent.removeChild(oB);//刪掉碰撞的子彈
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?if(!This.aLi.length){//如果敵人被打完(li的數組長度為0)，就進入下一關
?? ??? ??? ??? ?This.createEnemy(1);
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?},30);
?? ?},
?? ?
?? ?pz:function(obj1,obj2){//封裝好碰撞檢測，可實現多對多碰撞檢測
?? ??? ?var L1=obj1.offsetLeft;
?? ??? ?var R1=obj1.offsetLeft+obj1.offsetWidth;
?? ??? ?var T1=obj1.offsetTop;
?? ??? ?var B1=obj1.offsetTop+obj1.offsetHeight;
?? ??? ?
?? ??? ?//因為小蜜蜂li是裝在ul里面的，所以計算小蜜蜂的top、left值是相對于ul的，所以要加上ul的top、left值才算小蜜蜂的值
?? ??? ?var L2=obj2.offsetLeft+obj2.parentNode.offsetLeft;;
?? ??? ?var R2=obj2.offsetLeft+obj2.offsetWidth+obj2.parentNode.offsetLeft;
?? ??? ?var T2=obj2.offsetTop+obj2.parentNode.offsetTop;
?? ??? ?var B2=obj2.offsetTop+obj2.offsetHeight+obj2.parentNode.offsetTop;
?? ??? ?
?? ??? ?if(R1<L2||L1>R2||B1<T2||T1>B2){
?? ??? ??? ?return false;
?? ??? ?}else{
?? ??? ??? ?return true;
?? ??? ?}
?? ?}
};
</script>
</head>
<body>
<div id="div1">
?? ?<div id="gameName">飛機大戰小蜜蜂</div>
?? ?<div id="gameBtn">開始游戲</div>
??? <div id="gameAuthor">@copyright 2015 | 免責聲明：本游戲Johnny出品，如有雷同純屬巧合！</div>
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的JS原生编写飞机大战小蜜蜂游戏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小猿日记 - 程序猿的日常日记（3）
- 下一篇： JavaScript基础要点