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