[知了堂學習筆記]_純JS製作《飛機大戰》遊戲_第3講(邏輯方法的實現)

標籤：class   logs   star   color   i++   var   英雄   開始遊戲   控制   

整體展示：

    上一講實現了諸多個物件，這次我們就需要實現許多邏輯方法，如控制飛機移動，判斷子彈擊中敵機，敵機與英雄飛機相撞等等。並且我們在實現這些功能的時候需要計時器去調用這些方法。setInterval(fun,ms)

    在調用setInterval()會返回一個類似id的欄位，該欄位在clearInterval（id）可以指定相應的計時器並清除

一、開始遊戲

/** * 面板441*632 * 飛機 66*80 *//** * 開始遊戲 */function startGame() {    var welcome = document.getElementById("welcome");    myPlane = new createPlane("img/own.png", 190, 550, 5, 5);    welcome.style.visibility = "hidden";    //將進入歡迎介面隱藏//    ctrlMove();/* * 啟動定時器 */    ctrlmove = setInterval(ctrlMove,20);    ctrlshot = setInterval(ctrlShot,200);    bulletfly = setInterval(bulletFly,20);    createenemy = setInterval(enemy,200);    enemymove = setInterval(enemyMove,20);    hitplane = setInterval(hitPlane,30);    exist = setInterval(isexist,20);}

 

二、控制英雄飛機移動

/*     * 鍵盤監聽，用於判斷英雄的動作 wasd移動方向，j射擊，k必殺     * 放在開始遊戲方法中     */    document.body.onkeydown = function(code){        if(code.keyCode == 65){            leftbtn = true;        }        if(code.keyCode == 68){            rightbtn = true;        }        if(code.keyCode == 87){            topbtn = true;        }        if(code.keyCode == 83){            bottombtn = true;        }        if(code.keyCode == 74){            shot = true;        }        if(code.keyCode == 75){            shotboom = true;        }    }    document.body.onkeyup=function(code){        if(code.keyCode==65){            leftbtn=false;        }        if(code.keyCode == 68){            rightbtn = false;        }        if(code.keyCode == 87){            topbtn = false;        }        if(code.keyCode == 83){            bottombtn = false;        }        if(code.keyCode == 74){            shot = false;        }        if(code.keyCode == 75){            shotboom = false;        }    }

 

/** * 控制英雄移動的函數 */function ctrlMove(){    if(leftbtn==true){        myPlane.leftMove()    }    if(rightbtn==true){        myPlane.rightMove()    }    if(topbtn==true){        myPlane.topMove()    }    if(bottombtn==true){        myPlane.botoomMove()    }    //擷取玩家參數    getInfo();}

三、子彈擊中對象

/** * 子彈擊中對象 */function hitPlane(){    /*     * 英雄子彈打中敵機     */    for(i=0;i<bulletList.length;i++){    //遍曆英雄子彈集合        for(j=0;j<enemyList.length;j++){    //遍曆敵軍集合            //擷取子彈座標和敵軍座標            var btop = parseInt(bulletList[i].bulletNode.style.top);            var bleft = parseInt(bulletList[i].bulletNode.style.left);            var etop = parseInt(enemyList[j].enemyNode.style.top);            var eleft = parseInt(enemyList[j].enemyNode.style.left);            if(!enemyList[j].isdead){                if(bleft>=eleft-5&&bleft<eleft+34&&btop>etop&&btop<etop+34){                    bulletList[i].ishit=true;    //擊中把子彈狀態改為true                    if(--enemyList[j].blood<=0)    //判斷敵軍是否死亡                        enemyList[j].isdead=true;                }            }        }    }    /*     * boos子彈打中英雄     */    var top = parseInt(myPlane.planeNode.style.top);    var left = parseInt(myPlane.planeNode.style.left);    for(i=0;i<boosBullet.length;i++){            var btop = parseInt(boosBullet[i].bulletNode.style.top);            var bleft = parseInt(boosBullet[i].bulletNode.style.left);            if(myPlane.blood>=0){                if(btop+55>=top&&btop<top+80&&bleft>=left-22&&bleft<left+40){                    boosBullet[i].ishit=true;                    myPlane.blood--;                }            }    }        /**     *子彈打中BOOS      */    for(i=0;i<bulletList.length;i++){        var btop = parseInt(bulletList[i].bulletNode.style.top);        var bleft = parseInt(bulletList[i].bulletNode.style.left);        for(j=0;j<boosList.length;j++){            var top=parseInt(boosList[j].enemyNode.style.top);            var left=parseInt(boosList[j].enemyNode.style.left);            if(!boosList[j].isdead){                if(bleft-5>=left&&bleft<left+90&&btop>=top&&btop<top+80){                    console.log(boosList[j].blood)                    bulletList[i].ishit=true;                    if(--boosList[j].blood<=0)                        boosList[j].isdead=true;                }            }        }    }}

四、對象間碰撞

/** * 對象相撞 */function strike(){    var mleft = parseInt(myPlane.planeNode.style.left);    var mtop = parseInt(myPlane.planeNode.style.top);    if(myPlane.blood>0){        for(i=0;i<enemyList.length;i++){    //遍曆敵機            if(!enemyList[i].isdead){    //敵機是否死亡                var eleft = parseInt(enemyList[i].enemyNode.style.left);                var etop = parseInt(enemyList[i].enemyNode.style.top);                if(eleft>=mleft&&eleft<mleft+68&&etop>=mtop&&etop<mtop+80){    //碰撞判斷                    enemyList[i].isdead = true;    //敵機一碰撞到英雄飛機立即死亡                    enemyList[i].enemyNode.src ="img/enemybz.png";    //切換圖片，製作爆炸特效                    myPlane.blood--;    //英雄血量減少                }            }        }    }    /*     * 得到道具     */    if(myPlane.blood>0){    //判斷英雄是否死亡        for(i=0;i<toolList.length;i++){    //遍曆道具數組            if(!toolList[i].getme){                var tleft = parseInt(toolList[i].toolNode.style.left);                var ttop = parseInt(toolList[i].toolNode.style.top);                if(tleft>=mleft-15&&tleft<mleft+65&&ttop>=mtop&&ttop<mtop+80){                    toolList[i].getme=true;                    if(toolList[i].tooltype%2==1){    //tooltype單數為加必殺，雙數為加血                        if(myPlane.boom<5)                            myPlane.boom++;                    }else{                        myPlane.blood++;                    }                }            }        }    }}

五、判斷對象是否死亡

/* * 判斷對象是否存在 */function isexist(){    /*     * 判斷敵機是否死亡     */    for(i=0;i<enemyList.length;i++){        if(enemyList[i].isdead){    //敵機死亡            enemyList[i].enemyNode.src ="img/enemybz.png";    //將圖片換成爆炸圖片            if(enemyList[i].deadtime>=0){    //移除時間，也就是飛機死亡到移除的時間，實現爆炸的特效                enemyList[i].deadtime--;            }else{                score+=myPlane.level;                killNum++;                mainobj.removeChild(enemyList[i].enemyNode);    //先移除節點                enemyList.splice(i,1);                            //再取消綁定            }        }    }    /*     * 判斷英雄是否死亡     */    if(myPlane.blood<=0){        mainobj.removeChild(myPlane.planeNode);        gameOver();    }    /*     * 判斷boos是否死亡     */    for(i=0;i<boosList.length;i++){        if(boosList[i].isdead){            if(boosList[i].deadtime<=0){                mainobj.removeChild(boosList[i].enemyNode)                boosList.splice(i,1);                score+=100*myPlane.level;                pass++;                nextGame();            }else{                boosList[i].deadtime--;                boosList[i].enemyNode.src="img/dfjbz.png";            }        }    }    /*     * 判斷道具是否存在     */        for(i=0;i<toolList.length;i++){        if(toolList[i].getme){            mainobj.removeChild(toolList[i].toolNode);            toolList.splice(i,1);        }    }}

===============================================================================================================================

第二講補充：

    我在建立對象時候（除英雄飛機對象），都將其放進Arrar中，這是為了綁定該對象，為了方面找到這個對象。方便操作。 

 以上為今天的內容，如需瞭解更加深入的知識，請大家進入知了堂社區：http://www.zhiliaotang.com/portal.php；

[知了堂學習筆記]_純JS製作《飛機大戰》遊戲_第3講(邏輯方法的實現)