[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)

整体展示：

一、全局变量

/*===================玩家参数==========================*/
var myPlane;  //英雄对象
var leftbtn = false;  //左移动标志
var rightbtn = false; //右移动标志
var topbtn = false; //上移动标志
var bottombtn = false; //下移动标志
var shot = false;  //射击标志
//var bulletStatus = false; //子弹
var score = 0; //得分
var killNum = 0; //杀敌数
var shotboom = false; //必杀标志
var pass = 1;//关卡
var mainobj = document.getElementById("main");  //获取游戏div元素
/*===================集合==========================*/
var bulletList = new Array();  //英雄子弹集合
var boomList = new Array();    //必杀集合
var boosList = new Array();    //boos集合
var enemyList = new Array();    //敌机集合
var boosBullet = new Array();    //boos子弹集合
var toolList = new Array();    //道具集合
/*====================计时器=========================*/
var ctrlmove;  //英雄移动计时器
var ctrlshot;    //英雄射击计时器
var bulletfly;    //子弹移动计时器
var createenemy;    //敌机生成计时器
var enemymove;    //敌机移动计时器
var hitplane;    //击中判断计时器
var exist;    //判断对象存在与否计时器

二、飞机对象

/**
 * 飞机对象
 * @param {Object} src  飞机图片路径
 * @param {Object} x    x坐标
 * @param {Object} y    y坐标
 * @param {Object} speed    飞机移动速度
 * @param {Object} blood    飞机血量
 */
function createPlane(src, x, y, speed, blood) {
    this.planeNode = document.createElement("img");    //飞机图片节点，用于主界面中显示
    this.src = src;
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.blood = blood;
    this.level = 1;    //等级
    this.boom = 5;    //必杀数量
    //飞机左移动，需要判断是否飞出主界面左侧，如果移出，则从右边出现
    this.leftMove = function() {
        if (this.planeNode.style.left == "-60px")
            this.planeNode.style.left = "440px";
        else {
            this.planeNode.style.left=parseInt(this.planeNode.style.left) - this.speed +"px";
        }
    };
    //飞机右移动，需要判断是否飞出界面，飞出则从左边出现
    this.rightMove = function() {
        if (this.planeNode.style.left == "440px"){
            this.planeNode.style.left = "-60px";
        }
        else {
            this.planeNode.style.left=parseInt(this.planeNode.style.left) + this.speed +"px";
        }
    };
    //飞机上移动，当移动到一定值时则不能移动
    this.topMove = function() {
        if (this.planeNode.style.top == "-10px"){

        }
        else {
            this.planeNode.style.top=parseInt(this.planeNode.style.top) - this.speed +"px";
        }
    };
    //飞机下移动，当移动到一定值时，则不能移动
    this.botoomMove = function() {
        if (this.planeNode.style.top == "600px"){

        }
        else {
            this.planeNode.style.top=parseInt(this.planeNode.style.top) + this.speed +"px";
        }
    };

    //在页面上创建飞机，设置css属性
    this.create = function() {
        this.planeNode.src = this.src;
        this.planeNode.style.position = "absolute";
        this.planeNode.style.left = this.x + "px";
        this.planeNode.style.top = this.y + "px";
        this.planeNode.style.zIndex = 6;
        mainobj.appendChild(this.planeNode);//在游戏界面中添加飞机节点并显示
    };
    //发射子弹
    this.shot = function(){
        var bullet1 = new createBullet("img/img_bullet.png",parseInt(this.planeNode.style.left),parseInt(this.planeNode.style.top),this.speed);
        bulletList.push(bullet1);
        var bullet2 = new createBullet("img/img_bullet.png",parseInt(this.planeNode.style.left)+50,parseInt(this.planeNode.style.top),this.speed);
        bulletList.push(bullet2);
    }
    //释放必杀
    this.shotBoom=function(){
        if(this.boom>0){
            var boom1 = new createBullet("img/daodan1.png",parseInt(this.planeNode.style.left)+20,parseInt(this.planeNode.style.top),this.speed);
            boomList.push(boom1);
            this.boom--;
        }
    }

    this.create();
}

三、敌机对象

/**
 * 敌人飞机对象
 * @param {Object} src
 * @param {Object} x
 * @param {Object} y
 * @param {Object} speed
 * @param {Object} blood
 */
function createEnemyPlane(src,x,y,speed,blood){
    this.src = src;
    this.x = x;
    this.y = y;
    this.blood = blood;
    this.speed = speed;
    this.isdead = false;    //是否死亡
    this.deadtime = 10;        //移除时间(计时器时间*10)，用于爆炸效果
    this.enemyNode = document.createElement("img");

    this.create = function(){
        this.enemyNode.src = this.src;
        this.enemyNode.style.position = "absolute";
        this.enemyNode.style.left = this.x +"px";
        this.enemyNode.style.top = this.y+"px";
        this.enemyNode.style.zIndex = 6;
        mainobj.appendChild(this.enemyNode);
    };

    this.move = function(){
        this.enemyNode.style.top=parseInt(this.enemyNode.style.top) + this.speed +"px";
    };

    this.rightMove=function(){
        this.enemyNode.style.left=parseInt(this.enemyNode.style.left) + this.speed +"px";
    };

    this.leftMove=function(){
        this.enemyNode.style.left=parseInt(this.enemyNode.style.left) - this.speed +"px";
    };

    this.shot=function(){

    };
    /**
     * boos射击
     * 很据英雄的level不同，boos的子弹不同
     */
    this.boosShot=function(){
        if(myPlane.level==1){
            var bullet = new createBullet("img/wp2.png",parseInt(this.enemyNode.style.left)+22,parseInt(this.enemyNode.style.top),this.speed);
            boosBullet.push(bullet);
        }
        if(myPlane.level==3){
            var bullet = new createBullet("img/wp3.png",parseInt(this.enemyNode.style.left)+26,parseInt(this.enemyNode.style.top),this.speed);
            boosBullet.push(bullet);
        }
    };
    this.create();

}

四、子弹对象

/**
 * 子弹对象
 * @param {Object} src
 * @param {Object} x
 * @param {Object} y
 * @param {Object} speed
 */
function createBullet(src,x,y,speed){
        this.src = src;
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.ishit = false;        //子弹是否击中
        this.boomStop = 50;        //必杀移动时间
        this.boomTime = 100;    //必杀移除时间
        this.bulletNode = document.createElement("img");

        this.create = function(){
            this.bulletNode.src = src;
            this.bulletNode.style.position = "absolute";
            this.bulletNode.style.left = this.x+"px";
            this.bulletNode.style.top = this.y + "px";
            this.bulletNode.style.zIndex = 6;
            mainobj.appendChild(this.bulletNode);
        };

        this.move = function(){
            this.bulletNode.style.top = parseInt(this.bulletNode.style.top)-this.speed +"px";
        };

        this.downMove=function(){
            this.bulletNode.style.top = parseInt(this.bulletNode.style.top)+this.speed +"px";
        }
        this.create();
    }

五、道具对象

function createTool(src,x,y,speed,tooltype){
    this.src = src;
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.getme = false;
    this.tooltype = tooltype;//道具类型 1为加boom  2为加血，
    this.toolNode = document.createElement("img");

    this.create=function(){
        this.toolNode.src=this.src;
        this.toolNode.style.top=this.y+"px";
        this.toolNode.style.left=this.x+"px";
        this.toolNode.style.position="absolute";
        this.toolNode.style.zIndex=6;
        mainobj.appendChild(this.toolNode);
    }

    this.move=function(){
        this.toolNode.style.top=parseInt(this.toolNode.style.top) + this.speed +"px";
    }
    this.create();
}

其实在这些对象中，很多代码都是类似的，只要能实现一个对象，在仔细想一想其他对象的特性，结合下代码很快能实现。

　下一讲，则会实现各种处理方法了，让游戏活起来。

以上为今天的第一讲，如需了解更加深入的知识，请大家进入知了堂社区：http://www.zhiliaotang.com/portal.php