用JS制作《飛機大作戰》游戲_第3講（玩家發射子彈）-陳遠波

一、公布上一講中玩家飛機上、下、右移動實現的代碼：

            /*=========================鍵盤按下事件  keycode為得到鍵盤相應鍵對應的數字====================*/
    document.body.onkeydown=function(code) {
        if(code.keyCode==37) {
            //當鍵盤按下的是左鍵（對應的數字是37）
            leftbtn=true; //
        }
        if(code.keyCode==38) {
            //鍵盤按的是上鍵
            topbtn=true;
        }
        if(code.keyCode==39) {
            //右鍵
            rightbtn=true;
        }
        if(code.keyCode==40) {
            //下鍵
            buttombtn=true;
        }
        if(code.keyCode==65 || code.keyCode==32) {
            //按下A鍵 或空格 子彈發射狀態改變（發射）
            shutbtn=true;
        }
    }
    /*==================================根據鍵盤按的鍵,改變相應的狀態=======================*/
    document.body.onkeyup=function(code) {
        if(code.keyCode==37) {
            leftbtn=false;
        }
        if(code.keyCode==38) {
            //鍵盤按的是上鍵
            topbtn=false;
        }
        if(code.keyCode==39) {
            //右移動
            rightbtn=false;
        }
        if(code.keyCode==40) {
            //下移動
            buttombtn=false;
        }
        if(code.keyCode==65 || code.keyCode==32) {
            //按下A鍵 或空格 子彈發射狀態改變（停止發射）
            shutbtn=false;
        }
    }
            
        }

/*=====================================操作飛機移動的方向（上下左右）==========================*/
function ctrlplane() {
    if(leftbtn==true) {
        myplane.leftmove(); //調用飛機左移動的方法
    }
    if(rightbtn==true) {
        myplane.rightmove();
    }
    if(topbtn==true) {
        myplane.topmove();
    }
    if(buttombtn==true) {
        myplane.buttommove();
    }
}
以下代碼我是放入JS文件中的 var mainobj = document.getElementById("main"); //獲取游戲界面的div
/*===============玩家飛機對象屬性的聲明==================*/
var myplane; //聲明飛機對象
var leftbtn = false; //判斷是否左移方向鍵
var rightbtn = false; //判斷是否右移方向鍵
var topbtn = false; //判斷是否上移方向鍵
var buttombtn = false; //判斷是否下移方向鍵

/*===================監聽器==================*/
var ctrlplanestop;

/*==================創建玩家飛機對象========================*/
function createPlayerPlance(imgsrc, x, y, blood, speed) {
    this.imageSrc = imgsrc; //當前飛機圖片的地址為實例化該方法傳入的圖片地址
    this.x = x;//當前飛機的X軸坐標為傳入的X軸坐標
    this.y = y;//當前飛機的Y軸坐標為傳入的y軸坐標
    this.blood = blood;//飛機的當前血量為傳入的血量
    this.monvspeed = speed; //當前飛機的移動速度為實例化該方法傳入的移動速度
    this.level = 1; //設定玩家飛機等級，實現后續的升級功能
    this.wfjdead = false; //我方飛機的狀態 為false的時候  飛機沒有被擊中
    this.wfjdeadtime = 10; //控制我方飛機被擊中產生的爆炸效果消失時間
    this.planeNode = document.createElement("img"); //創建飛機圖片對象節點
    
    /*飛機向左移動*/
    this.leftmove = function() {
        //當飛機超過大DIV80PX時（飛機圖片的寬度就是80px）飛機從右邊進入
        if(this.planeNode.style.left == "-80px") { //如果飛機圖片往左移動剛好離開游戲界面
            this.planeNode.style.left = "440px"; //飛機圖片從游戲界面右邊進入
        } else {
            //當飛機沒有達到臨界點時，飛機每移動一次后的坐標為：當前的坐標減去移動速度的距離（PX)
            this.planeNode.style.left = parseInt(this.planeNode.style.left) - this.monvspeed + "px";
        }
    }    
        /*飛機向右移動*/
    this.rightmove = function() {
        if(this.planeNode.style.left == "440px") { //如果飛機圖片往右移動剛好離開游戲界面
            this.planeNode.style.left = "-80px";
        } else {
            this.planeNode.style.left = parseInt(this.planeNode.style.left) + this.monvspeed + "px";
        }
    }
    /*飛機向上移動*/
    this.topmove = function() {
        if(this.planeNode.style.top == "0px") {
            this.planeNode.style.top = "0px";
        } else {
            this.planeNode.style.top = parseInt(this.planeNode.style.top) - this.monvspeed + "px";
        }
    }
    this.buttommove = function() {
        if(this.planeNode.style.top == "600px") {
            this.planeNode.style.top = "600px"
        } else {
            this.planeNode.style.top = parseInt(this.planeNode.style.top) + this.monvspeed + "px";
        }
    }
    /* 定義飛機的樣式參數      */
    this.create = function() {
        this.planeNode.src = this.imageSrc;
        this.planeNode.style.position = "absolute";
        this.planeNode.style.left = this.x + "px";
        this.planeNode.style.top = this.y + "px";
        this.planeNode.style.zIndex = "6"; //節點顯示在第6層
        mainobj.appendChild(this.planeNode); //把當前的飛機對象作為節點放在主界面中    
    }
    this.create(); //創建飛機的DOM對象 （調用飛機樣式參數方法）
    
    
}

一、玩家飛機發射子彈

（一）實現思路

　　1、先建立子彈對象，子彈對象也具備以下屬性：

　　　　子彈圖片、子彈坐標（X軸、Y軸）、子彈速度、子彈的狀態（是否消失）

　　2、把建立的對象以節點方式添加到游戲界面上

　　3、定義自己的運行軌跡

　　4、構建子彈設計方法（實例化子彈對象）

　　5、定義觸發和結束發射子彈的時間判斷onkeydown、onkeyup

　　6、在開始游戲方法中使用子彈移動、子彈創建監聽器

（二）構建子彈對象和定義子彈的運行軌跡（子彈運行軌跡屬於子彈對象的，方法應定義在子彈對象中）

/*===========子彈圖片路徑,子彈x軸,y軸,速度================*/
function createbullet(bulletsrc, x, y, speed) {
    this.bulletsrc = bulletsrc; //定義子彈的圖片屬性（子彈圖片的路徑）
    this.x = x; //定義子彈飛行的X軸坐標
    this.y = y;
    this.bullernode = document.createElement("img"); //創建一個圖片節點
    this.btstate = true; //定義子彈沒有擊中地方飛機的狀態
    this.speed = speed; //子彈的飛行速度
    //定義子彈圖片節點的屬性，並將圖片節點放入游戲界面
    this.create = function() {
        this.bullernode.src = this.bulletsrc;
        this.bullernode.style.position = "absolute";
        this.bullernode.style.left = this.x + "px";
        this.bullernode.style.top = this.y + "px";
       mainobj.appendChild(this.bullernode); //向大的DIV下添加子彈節點
    }

    //定義子彈運行的軌跡
    this.move = function() {
        this.bullernode.style.top = parseInt(this.bullernode.style.top) - this.speed + "px";
    }
    //在創建子彈對象的時候就把子彈顯示在游戲界面上
    this.create();
}

（三）定義發射子彈方法並實例化子彈對象（該功能是屬於飛機對象的，需要定義在飛機方法內部）

以下定義的數組是全局變量，要放在定義飛機方法外部，飛機發射的子彈不止一顆 所有需要將子彈存放在數組中
var bulletlist = new Array(); //存儲我方飛機子彈的數組列表

    //定義發射子彈的方法  並實例化子彈對象
    this.shot = function() {
        //調用子彈對象 定義的兩個變量  說明飛機可以同時發射兩列子彈
        var bullet1 = new createbullet("../img/bullet1.png", parseInt(this.planeNode.style.left) + 35, parseInt(this.planeNode.style.top) + 12, 2);
        var bullet2 = new createbullet("../img/bullet1.png", parseInt(this.planeNode.style.left) - 5, parseInt(this.planeNode.style.top) + 12, 2);
        //把子彈存放在集合中 
        bulletlist.push(bullet1);
        bulletlist.push(bullet2);
    }

（四）設置鍵盤事件，按下相應按鈕，改變狀態，觸發子彈設計方法，松開按鈕，停止發射子彈

鍵盤按下的點擊事件  shutbtn的狀態是為了觸發射擊方法用的
document.body.onkeydown=function(code) {
if(code.keyCode==65 || code.keyCode==32) {
            //按下A鍵 或空格 子彈發射狀態改變（發射）
            shutbtn=true;
        }
}
鍵盤松開的點擊事件
/*==================================根據鍵盤按的鍵,改變相應的狀態=======================*/
    document.body.onkeyup=function(code) {

if(code.keyCode==65 || code.keyCode==32) {
            //按下A鍵 或空格 子彈發射狀態改變（停止發射）
            shutbtn=false;
        }
    }


//通過以上的鍵盤事件，根據判斷定義的shutbtn值，進行調用飛機射擊子彈方法
function bulletspeed() {
    if(shutbtn==true) {
        //判斷按下A鍵或空格時啟動上彈夾
        /*//加載飛機移動的聲音
        var shutmusic = document.getElementById("");
        shutmusic.play();*/
        //調用JS文件中飛機上彈夾的方法
        myplane.shot();
    }
}

（四）定義當子彈移除游戲界面時，清除子彈的節點，並將子彈對象從數組中移除，當子彈狀態為死亡時也刪除節點，狀態為活着的時候，子彈飛行

 /*====================================我方飛機子彈飛行方法 ======================*/

function bulletfly() {
    for(var i=0;
    i < bulletlist.length;
    i++) {
        //如果彈夾中的子彈沒有擊中敵方飛機
        if(bulletlist[i].btstate==true) {
            //調用子彈節點移動方法  讓子彈移動
            bulletlist[i].move();
            //如果當子彈移出游戲界面時
            if(parseInt(bulletlist[i].bullernode.style.top) <=0) {
                //移除游戲界面節點下的子節點（子彈節點）
                mainobj.removeChild(bulletlist[i].bullernode);
                //移除彈夾中的子彈
                bulletlist.splice(i, 1); //i為下標，1為移除的數量
            }
        }
        //如果子彈擊中敵方飛機時
        else {
            //移除子彈節點
            mainobj.removeChild(bulletlist[i].bullernode);
            //移除彈夾中的子彈
            bulletlist.splice(i, 1); //i為下標，1為移除的數量
        }
    }
}

 

（四）在開始游戲中使用監聽器（注意先設置函數的全局變量）

　　　　1、 調用判斷是否觸發射擊子彈的方法（bulletspeed）

　　　　2、判斷子彈是否移除游戲界面和死亡的方法（bulletfly）

 

 

（五）注意事項：

        在HTML文件中要記着引入另一文件中的JS文件路徑

 

（六）實現效果：

   以上是我這講的主要內容，下一講將為大家講解創建敵方飛機、敵方飛機被玩家子彈擊中死亡。若以上知識點講解的不夠仔細的請各位大神多多包涵和指正，需要學習更多關於軟件知識的博友可以關注后面部分博客