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

时间：2023-03-08 17:37:48

整体展示：

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

相关文章