[知了堂学习笔记]_纯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