飞机大战（JavaScript）
HTML主界面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>打飞机</title> <style> #gamePanel{width:900px;height:500px;background:Black;position:absolute;left:100px;top:100px;} #gamePanel .score{font-size:12px;color:White;position:absolute;left:0;top:0;z-index:9999;} #gamePanel .bullet{width:5px;height:15px;position:absolute;background:url(img/bullet.png);overflow:hidden; _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/bullet.png");} #gamePanel .flyer{width:48px;height:54px;position:absolute;background:url(img/flyer1.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/flyer1.png");} #gamePanel .enemy1{width:29px;height:32px;position:absolute;background:url(img/enemy1.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy1.png");} #gamePanel .enemy2{width:26px;height:26px;position:absolute;background:url(img/enemy2.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy2.png");} #gamePanel .enemy3{width:48px;height:48px;position:absolute;background:url(img/enemy3.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy3.png");} #gamePanel .enemy4{width:48px;height:48px;position:absolute;background:url(img/enemy4.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy4.png");} #gamePanel .bingo{width:18px;height:18px;position:absolute;background:url(img/bingo.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/bingo.png");} #gamePanel .change{width:40px;height:40px;position:absolute;background:url(img/change.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/change.png");} #startBtn{border-width:20px;border-style:solid;border-color:Black Black Black Green; position:absolute;left:440px;top:240px;cursor:pointer;width:0px;height:0px;overflow:hidden;} </style> </head> <body> <div id="gamePanel" tabindex="0"> <div class="score">分数：<span id="score">0</span></div> <div id="startBtn" οnclick="Start()"></div> </div> <script type="text/javascript" src="js/change.js"></script> <script type="text/javascript" src="js/enemy.js"></script> <script type="text/javascript" src="js/flyer.js"></script> <script type="text/javascript" src="js/bullet.js"></script> <script type="text/javascript" src="js/game.js"></script> </body> </html>
子弹类：
/** * @author floyd * download by http://www.codefans.net */ //子弹类 var Bullet = function(n,flag){ //子弹Dom元素 this.dom = null; this.init(); this.n=n; this.flag=flag; } Bullet.prototype = { //子弹移动速度 movepx : 8, //子弹移动频率 movesp : 10, //初始化 init : function(){ this.dom = document.createElement('gamePanel'); this.dom.className = 'bullet'; }, //设置子弹初始位置 //flyerinfo = {left:1,top:1,width:1,position:1,level:1} setPosition : function(flyerinfo){ //子弹在飞机的中点位置 var center = flyerinfo.left + ((flyerinfo.width-this.dom.clientWidth)/2), //偏移量 offset = 0; //设置第几发子弹 flyerinfo.position = (flyerinfo.level % 2 != 0)?flyerinfo.position:flyerinfo.position+1; //计算偏移量 offset = (flyerinfo.position % 2 != 0)?(parseInt(flyerinfo.position/2,10) * this.dom.clientWidth):flyerinfo.position / 2 * this.dom.clientWidth * -1; //设置子弹位置 this.dom.style.left = center + offset + 'px'; this.dom.style.top = flyerinfo.top - this.dom.clientHeight + 'px'; }, //子弹动画，移动 animation : function(){ var _this = this; //处理移动函数 if(this.flag==0){ var process = function(){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; top = top - _this.movepx >= 0 ? top - _this.movepx : 0; _this.dom.style.top = top + 'px'; //判断是否移动到尽头，是否击中敌机 if(top > 0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); }else if(this.flag==1){ if(this.n==1){ var process = function(){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; top = top - _this.movepx >= 0 ? top - _this.movepx : 0; left=left- _this.movepx>=0 ? left- _this.movepx:0; _this.dom.style.top = top + 'px'; _this.dom.style.left=left+'px'; //判断是否移动到尽头，是否击中敌机 if(left>0 && top > 0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); } if(this.n==2){ var process = function(){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; top = top - _this.movepx >= 0 ? top - _this.movepx : 0; left=left+_this.movepx>=895 ? 895:left+_this.movepx; _this.dom.style.top = top + 'px'; _this.dom.style.left=left+'px'; //判断是否移动到尽头，是否击中敌机 if(left<895 && top > 0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); } if(this.n==3){ var process = function(){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; top = top - _this.movepx >= 0 ? top - _this.movepx : 0; _this.dom.style.top = top + 'px'; //判断是否移动到尽头，是否击中敌机 if(top > 0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); } }else if(this.flag==2){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; var r=15; var randoms=this.n*2; var process = function(){ var o=randoms*(2*Math.PI)/36; var left2=left+Math.cos(o)*r; var top2=top+Math.sin(o)*r; r=r+5; if(left2>=895){ left2=895; } _this.dom.style.top = top2 + 'px'; _this.dom.style.left=left2+'px'; //判断是否移动到尽头，是否击中敌机 if(left2>0 && left2<895 && top2<495 && top2 > 0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); }else if(this.flag==3){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; var r=60; var randoms=this.n; var process = function(){ var o=randoms*(2*Math.PI)/36; var o=randoms*(2*Math.PI)/36; var left2=left+Math.cos(o)*r; var top2=top+Math.sin(o)*r; randoms++; top=top-3; _this.dom.style.top = top2 + 'px'; _this.dom.style.left=left2+'px'; //判断是否移动到尽头，是否击中敌机 if(left2>=0 && left2<=895 && top2<=495 && top2 >=0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); }else if(this.flag==-4){ var process = function(){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; top = top + _this.movepx-3 >= 495 ? 495:top + _this.movepx-3; _this.dom.style.top = top + 'px'; //判断是否移动到尽头，是否击中敌机 if(top <495 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); }else if(this.flag==-3){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; var r=15; var randoms=this.n*2; var process = function(){ var o=randoms*(2*Math.PI)/36; var left2=left+Math.cos(o)*r; var top2=top+Math.sin(o)*r; r=r+3; if(left2>=895){ left2=895; } _this.dom.style.top = top2 + 'px'; _this.dom.style.left=left2+'px'; //判断是否移动到尽头，是否击中敌机 if(left2>0 && left2<895 && top2<495 && top2 > 0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); }else if(this.flag==-2){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; var r=60; var randoms=this.n; var process = function(){ var o=randoms*(2*Math.PI)/36; var o=randoms*(2*Math.PI)/36; var left2=left+Math.cos(o)*r; var top2=top+Math.sin(o)*r; randoms++; top=top+2; _this.dom.style.top = top2 + 'px'; _this.dom.style.left=left2+'px'; //判断是否移动到尽头，是否击中敌机 if(left2>=0 && left2<=895 && top2<=495 && top2 >=0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); }else if(this.flag==-1){ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; var r=1; var randoms=this.n+21; var process = function(){ var o=randoms*(2*Math.PI)/36; var left2=left+Math.cos(o)*r; var top2=top+Math.sin(o)*r; r=r-3; _this.dom.style.top = top2 + 'px'; _this.dom.style.left=left2+'px'; //判断是否移动到尽头，是否击中敌机 if(left2>=0 && left2<=895 && top2<=495 && top2 >=0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); }else{ var top = _this.dom.offsetTop; var left=_this.dom.offsetLeft; var r=1; var randoms=this.n+21; var process = function(){ var o=randoms*(2*Math.PI)/36; var left2=left+Math.cos(o)*r; var top2=top+Math.sin(o)*r; r=r+5; _this.dom.style.top = top2 + 'px'; _this.dom.style.left=left2+'px'; //判断是否移动到尽头，是否击中敌机 if(left2>=0 && left2<=895 && top2<=495 && top2 >=0 && !_this.checkBeat()){ setTimeout(process,_this.movesp); } else { _this.onend(); } } process(); } }, //外部接口，是否击中敌机 onanimation : function(){}, checkBeat : function(){}, //外部接口，子弹结束事件 onend : function(){} }
物品类
//物品类 var Change= function(){ //敌机dom元素 this.dom = null; //是否 this.isLive = true; this.init(); } Change.prototype = { //敌机横向移动速度 movepx : 6, //敌机纵向移动速度 movepy : 4, //敌机移动频率 movesp : 75, //敌机移动频率映射 movespMap : { 1: 75, 2: 65, 3: 50, 4: 40 }, //初始化 init : function(){ this.dom = document.createElement('div'); this.dom.className = 'change'; }, //设置敌机初始位置,x与y坐标 setPosition : function(x,y){ this.dom.style.left = x +'px'; this.dom.style.top = y + 'px'; }, //敌机动画，就是移动，传入参数为游戏背景的宽与高 animation : function(gameWidth,gameHeight){ var _this = this, //实际的横向移动速度，左或者右 _movepx = this.dom.offsetLeft > gameWidth / 2 ?- 1*this.movepx:this.movepx; //处理移动函数 var process = function(){ //敌机的x,y坐标 var left = _this.dom.offsetLeft,top = _this.dom.offsetTop; //向右移动 if(_movepx > 0){ left = left + _movepx >= gameWidth-_this.dom.clientWidth ? gameWidth-_this.dom.clientWidth : left + _movepx; } //向左移动 else { left = left + _movepx <=0 ? 0 : left + _movepx; } //是否要掉转方向 if(left <= 0 || left >= gameWidth-_this.dom.clientWidth){_movepx *= -1;} //向下移动 top = top + _this.movepy >= gameHeight - _this.dom.clientHeight? gameHeight - _this.dom.clientHeight:top + _this.movepy; //设置敌机位置 _this.dom.style.top = top + 'px'; _this.dom.style.left = left + 'px'; //判断是否撞到飞机玩家 var isCrash = _this.OnCheckCrash(); //判断是否飞到尽头，是否活着，是否撞到飞机玩家 if(_this.isLive && !isCrash){ //继续移动 if(top >=gameHeight - _this.dom.clientHeight ){ _this.effect(); } setTimeout(process,_this.movesp); } else { //敌机死了而且没撞到飞机玩家 if (!_this.isLive && !isCrash) //爆炸 _this.effect(); //敌机撞到飞机玩家 else { //爆炸 _this.effect(); //游戏结束 setTimeout(function(){_this.gameover();}, 100); } } } //开始移动 process(); }, //敌机爆炸 effect : function(){ this.dom.className = 'bingo'; var _this = this; setTimeout(function(){_this.onend()},50); }, //外部接口，检测是否撞到飞机玩家 OnCheckCrash : function(){}, //敌机结束事件 onend : function(){}, //游戏结束 gameover:function(){} }
敌机类：
/** * @author floyd download by http://www.codefans.net */ //敌机类 var Enemy = function(changeflag,flyer){ //敌机dom元素 this.dom = null; //是否 this.isLive = true; this.flyer=flyer; this.changeflag=changeflag; this.init(); } Enemy.prototype = { //敌机横向移动速度 flag:0, j:1, ej:1, count:0, timecount:500, movepx : 6, //敌机纵向移动速度 movepy : 4, //敌机移动频率 movesp : 75, //敌机移动频率映射 movespMap : { 1: 75, 2: 65, 3: 50, 4: 40 }, //初始化 init : function(){ this.dom = document.createElement('div'); //document.getElementById('score').innerHTML = this.changeflag; if(this.changeflag==0){ this.dom.className = 'enemy1'; }else if(this.changeflag==1){ this.dom.className = 'enemy2'; }else if(this.changeflag==2){ this.dom.className = 'enemy3'; }else if(this.changeflag==3){ this.dom.className = 'enemy4'; } }, //设置敌机初始位置,x与y坐标 setPosition : function(x,y){ this.dom.style.left = x +'px'; this.dom.style.top = y + 'px'; }, enemyfire:function(){ var _this = this; //循环发弹，根据飞机子弹级别 if(_this.flyer.isLive){ //将子弹的dom添加到游戏背景中 var bullet = new Bullet(_this.j,_this.changeflag-4); this.flyer.gamePanel.appendChild(bullet.dom); //设置子弹的初始位置 bullet.setPosition({ left: this.dom.offsetLeft, top: this.dom.offsetTop, width: this.dom.clientWidth, position : 1, level : 1 }); //重写子弹的检测是否打中敌机函数 bullet.checkBeat = function(){ //获取敌机的x,y坐标以及半径，还有子弹的x,y坐标以及半径 var e_left = _this.flyer.dom.offsetLeft, e_top =_this.flyer.dom.offsetTop, e_radius = _this.flyer.dom.clientWidth / 2, b_left = this.dom.offsetLeft, b_top = this.dom.offsetTop, b_radius = bullet.dom.clientWidth / 2; //判断是否被击中 //原理，比较两个圆的圆心距与两个圆的半径之和 if (Math.sqrt(Math.pow(e_left - b_left, 2) + Math.pow(e_top - b_top, 2)) <= e_radius + b_radius) { //敌机死亡 _this.flyer.isLive = false; _this.flyer.gamePanel.removeChild(this.dom); _this.gameover(); //返回 return true } return false; } //重写子弹的结束函数 bullet.onend = function(){ //从游戏背景移除子弹 _this.flyer.gamePanel.removeChild(this.dom); //已经发弹数减一 } //发弹动画，就是移动 bullet.animation(); //已发弹数加一 } }, //敌机动画，就是移动，传入参数为游戏背景的宽与高 animation : function(gameWidth,gameHeight){ var _this = this, //实际的横向移动速度，左或者右 _movepx = this.dom.offsetLeft > gameWidth / 2 ?-1*this.movepx:this.movepx; //处理移动函数 var process = function(){ //敌机的x,y坐标 var left = _this.dom.offsetLeft,top = _this.dom.offsetTop; //向右移动 if(_movepx > 0){ left = left + _movepx >= gameWidth-_this.dom.clientWidth ? gameWidth-_this.dom.clientWidth : left + _movepx; } //向左移动 else { left = left + _movepx <=0 ? 0 : left + _movepx; } //是否要掉转方向 if(left <= 0 || left >= gameWidth-_this.dom.clientWidth){_movepx *= -1;} //向下移动 top = top + _this.movepy >= gameHeight - _this.dom.clientHeight?gameHeight - _this.dom.clientHeight:top + _this.movepy; //设置敌机位置 _this.dom.style.top = top + 'px'; _this.dom.style.left = left + 'px'; //判断是否撞到飞机玩家 var isCrash = _this.OnCheckCrash(); if(_this.count%5==0){ if(_this.changeflag==0){ _this.ej=1; }else if(_this.changeflag==1){ _this.ej=20; }else if(_this.changeflag==2){ _this.ej=5; }else if(_this.changeflag==3){ _this.ej=11; } for(_this.j=1;_this.j<=_this.ej;_this.j++){ _this.enemyfire(); } } //判断是否飞到尽头，是否活着，是否撞到飞机玩家 if(top < gameHeight - _this.dom.clientHeight && _this.isLive && !isCrash){ //继续移动 setTimeout(process,_this.movesp+_this.timecount); _this.count++; if(_this.timecount>=0){ _this.timecount=_this.timecount-5; } } else { //敌机死了而且没撞到飞机玩家 if (!_this.isLive && !isCrash) //爆炸 _this.effect(); //敌机撞到飞机玩家 else { //爆炸 _this.effect(); //游戏结束 setTimeout(function(){_this.gameover();}, 300); } } } //开始移动 process(); }, //敌机爆炸 effect : function(){ this.dom.className = 'bingo'; var _this = this; setTimeout(function(){_this.onend()},50); }, //外部接口，检测是否撞到飞机玩家 OnCheckCrash : function(){}, //敌机结束事件 onend : function(){}, //游戏结束 gameover:function(){}, onenemyfire : function(){} }
飞机类---玩家飞机：
/** * @author floyd download by http://www.codefans.net */ //飞机类---玩家飞机 var Flyer = function(){ //飞机对应的dom元素 this.dom = null; //是否活着 this.isLive = true; //是否移动中 this.isMove = false; //移动的ID this.moveId = null; //是否发弹中 this.isSend = false; //目前已经发了多少颗弹(存在屏幕显示) this.nowBullet = 0; this.init(); } Flyer.prototype = { //游戏背景Dom gamePanel : null, //游戏背景宽度 gameWidth : 0, //游戏背景高度 gameHeight : 0, //飞机移动速度 movepx : 10, //飞机移动频率 movesp : 30, //飞机子弹级别 bulletLevel : 1, //最大发弹数(存在屏幕显示) maxBullet : 200, flag:0, j:1, ej:1, bullet : null, //方向键值对应 keyCodeAndDirection : { 37 : "left", 38 : "up", 39 : "right", 40 : "down" }, //初始化 init : function(){ this.dom = document.createElement('gamePanel'); this.dom.className = 'flyer'; }, setFlag:function(n){ this.flag=n; }, //设置位置 setPosition : function(gamePanel,width,height){ //将飞机添加进游戏背景中 this.gamePanel = gamePanel; this.gamePanel.appendChild(this.dom); //设置飞机的初始位置 this.dom.style.left = (width - this.dom.clientWidth) / 2 + 'px'; // this.dom.clientWidth是什么意思？？ this.dom.style.top = height - this.dom.clientHeight + 'px'; //获取到游戏背景的宽和高 this.gameWidth = width; this.gameHeight = height; }, //键盘按下事件 keydown : function(e) { var keyCode = e.keyCode; //按了空格发弹 if(keyCode == 32){ //判断是否发弹中 if(!this.isSend){ //发弹 // var bullet =new Array(); //新建一个子弹对象 if(this.flag==0){ this.ej=1; } if(this.flag==1){ this.ej=3; } if(this.flag==2){ this.ej=20; } if(this.flag==3){ this.ej=5; } if(this.flag==4){ this.ej=11; } for(this.j=1;this.j<=this.ej;this.j++){ this.onSendBullet(); this.isSend = true; } } } //判断是否移动中，移动 else if(!this.isMove)this.move(keyCode); }, //键盘释放事件 keyup : function(e){ //判断是否为键盘释放 if(this.keyCodeAndDirection[e.keyCode]){ //停止移动 this.stopMove(); } //发弹键释放 else if(e.keyCode == 32){ //设置为非发弹中 this.isSend = false; } }, //移动 move : function(keyCode){ //设置为移动中 this.isMove = true; var _this = this; //判断移动方向 switch(this.keyCodeAndDirection[keyCode]){ case "left":{ this.moveId = setInterval(function(){_this.moveLeftUp("left");},_this.movesp); break; } case "up":{ this.moveId = setInterval(function(){_this.moveLeftUp("up");},_this.movesp); break; } case "right":{ this.moveId = setInterval(function(){_this.moveRightDown("right")},_this.movesp); break; } case "down":{ this.moveId = setInterval(function(){_this.moveRightDown("down");},_this.movesp); break; } default:break; } }, //左或上移动 moveLeftUp : function(direction){ var leftOrUp = this.dom[direction=="left"?"offsetLeft":"offsetTop"]; leftOrUp = leftOrUp - this.movepx >= 0 ? leftOrUp - this.movepx:0; this.dom.style[direction=="left"?"left":"top"] = leftOrUp + 'px'; if(leftOrUp == 0){this.stopMove();} }, //右或下移动 moveRightDown : function(direction){ var leftOrUp = this.dom[direction=="right"?"offsetLeft":"offsetTop"]; var maxDistance = direction=="right"?this.gameWidth-this.dom.clientWidth:this.gameHeight - this.dom.clientHeight; leftOrUp = leftOrUp + this.movepx <= maxDistance ? leftOrUp + this.movepx:maxDistance; this.dom.style[direction=="right"?"left":"top"] = leftOrUp + 'px'; if(leftOrUp == maxDistance){this.stopMove();} }, //停止移动 stopMove : function(){ this.isMove = false; clearInterval(this.moveId); }, //发射子弹,enemyList为敌机列表 sendBullet :function(enemyList){ //判断发单数是否超出 if(this.bulletLevel + this.nowBullet > this.maxBullet){return;} var _this = this; //循环发弹，根据飞机子弹级别 //将子弹的dom添加到游戏背景中 bullet = new Bullet(this.j,this.flag); _this.gamePanel.appendChild(bullet.dom); //设置子弹的初始位置 bullet.setPosition({ left: this.dom.offsetLeft, top: this.dom.offsetTop, width: this.dom.clientWidth, position : 1, level : 1 }); //重写子弹的检测是否打中敌机函数 bullet.checkBeat = function(){ //遍历敌机列表，判断是否打中敌机 for (var i = 0, l = enemyList.length; i < l; i++) { //敌机是死的，跳过 if(!enemyList[i].isLive)continue; //获取敌机的x,y坐标以及半径，还有子弹的x,y坐标以及半径 var e_left = enemyList[i].dom.offsetLeft, e_top = enemyList[i].dom.offsetTop, e_radius = enemyList[0].dom.clientWidth / 2, b_left = this.dom.offsetLeft, b_top = this.dom.offsetTop, b_radius = bullet.dom.clientWidth / 2; //判断是否被击中 //原理，比较两个圆的圆心距与两个圆的半径之和 if (Math.sqrt(Math.pow(e_left - b_left, 2) + Math.pow(e_top - b_top, 2)) <= e_radius + b_radius) { //敌机死亡 enemyList[i].isLive = false; //修改分数 _this.onChangeScore(); //返回true return true; } } return false; } //重写子弹的结束函数 bullet.onend = function(){ //从游戏背景移除子弹 _this.gamePanel.removeChild(this.dom); //已经发弹数减一 } //发弹动画，就是移动 bullet.animation(); //已发弹数加一 }, //飞机爆炸 burstFlyer : function(){ this.dom.className = 'bingo'; }, //发射子弹外部接口，主要任务为回调sendBullet函数，传入敌机列表参数 onSendBullet : function(){}, //改分数外部接口 onChangeScore : function(){}, onsetFlag : function(){} }
游戏控制类：
/** * @author floyd download by http://www.codefans.net */ //扩展数组方法，删除特定的值 Array.prototype.remove = function(obj){ for(var i=0,l=this.length;i < l;i++){ if(this[i] == obj){ this.splice(i,1); return this; } } throw "The Array has no this Obj"; } //游戏控制类 var Game = { //游戏背景dom timechange:0, changeflag:0, timecount:0, gamePanel : null, n:0, //飞机玩家 flyer : null, //敌机列表 enemyList : [], changeList : [], //分数 score : 0, //游戏是否结束 isGameOver : false, //初始化 init : function(){ var _this = this; //获取游戏背景 this.gamePanel = document.getElementById("gamePanel"); //游戏背景获得焦点 this.gamePanel.focus(); //启动飞机 this.startFlyer(); //启动物品 this.startChange(); //启动 敌机 this.startEnemy(); //设置键盘按下与释放事件 document.body.onkeydown = function(e){_this.onkeydown(e);}; document.body.onkeyup = function(e){_this.onkeyup(e);} }, //启动飞机 startFlyer : function(){ var _this = this; //新建飞机对象 this.flyer = new Flyer(); //设置位置 this.flyer.setPosition(this.gamePanel,this.gamePanel.clientWidth,this.gamePanel.clientHeight); //重写发弹函数 this.flyer.onSendBullet = function(){this.sendBullet(_this.enemyList);}; //重写修改分数 this.flyer.onChangeScore = function(){_this.changeScore();}; this.flyer.onsetFlag = function(){this.setFlag(_this.n);}; }, //启动敌机 startEnemy : function(){ //游戏结束，退出 if(this.isGameOver)return; var _this = this; //新建一个敌机对象 var enemy = new Enemy(_this.changeflag,_this.flyer); //将敌机添加进游戏背景 this.gamePanel.appendChild(enemy.dom); //随机出敌机的x坐标位置 var randomX = parseInt(Math.random()* (this.gamePanel.clientWidth / enemy.dom.clientWidth),10); //设置位置 enemy.setPosition(randomX * enemy.dom.clientWidth,0); //重写检测是否击中飞机玩家 enemy.OnCheckCrash = function(){ //游戏结束，退出 if(_this.isGameOver)return; //判断是否击中 if(Math.sqrt(Math.pow(_this.flyer.dom.offsetLeft-this.dom.offsetLeft,2)+Math.pow(_this.flyer.dom.offsetTop-this.dom.offsetTop,2)) <= _this.flyer.dom.clientWidth/2 + this.dom.clientWidth/2){ //敌机死亡 this.isLive = false; //飞机玩家爆炸 _this.flyer.burstFlyer(); return true; } return false; } //重写敌机结束事件 enemy.onend = function(){ _this.gamePanel.removeChild(this.dom); _this.enemyList.remove(this); } //游戏结束函数 enemy.gameover = function(){_this.gameover();} //敌机移动 enemy.animation(this.gamePanel.clientWidth,this.gamePanel.clientHeight); //将敌机添加到列表中 this.enemyList.push(enemy); //启动 _this.timecount=_this.timecount+50; _this.timechange++; if(_this.timechange%4==0){ _this.changeflag=2; }else if(_this.timechange%6==0){ _this.changeflag=3; }else if(_this.timechange%10==0){ _this.changeflag=1; }else{ _this.changeflag=0; } var label=4000-_this.timecount; if(label<=800){ label=800; } setTimeout(function(){_this.startEnemy();},label); }, //键盘按下事件 onkeydown : function(e){ e = e || window.event; var keyCode = e.keyCode; //阻止浏览器默认事件 if(keyCode == 32 || this.flyer.keyCodeAndDirection[keyCode]){ if(e.preventDefault)e.preventDefault(); else e.returnValue = false; } else return; //回调飞机键盘按下事件 this.flyer.keydown(e); }, //键盘释放事件 onkeyup : function(e){ e = e || window.event; //回调飞机键盘释放事件 this.flyer.keyup(e); }, startChange : function(){ //游戏结束，退出 if(this.isGameOver)return; var _this = this; //新建一个敌机对象 var change = new Change(); //将敌机添加进游戏背景 this.gamePanel.appendChild(change.dom); //随机出敌机的x坐标位置 var randomX = parseInt(Math.random()* (this.gamePanel.clientWidth / change.dom.clientWidth),10); //设置位置 change.setPosition(randomX * change.dom.clientWidth,0); //重写检测是否击中飞机玩家 change.OnCheckCrash = function(){ //游戏结束，退出 if(_this.isGameOver)return; //判断是否击中 if(Math.sqrt(Math.pow(_this.flyer.dom.offsetLeft-this.dom.offsetLeft,2)+Math.pow(_this.flyer.dom.offsetTop-this.dom.offsetTop,2)) <= _this.flyer.dom.clientWidth/2 + this.dom.clientWidth/2){ //敌机死亡 this.isLive = false; _this.n++; _this.flyer.onsetFlag(); } return false; } //重写敌机结束事件 change.onend = function(){ _this.gamePanel.removeChild(this.dom); _this.changeList.remove(this); } //游戏结束函数 change.gameover = function(){_this.gameover();} //敌机移动 change.animation(this.gamePanel.clientWidth,this.gamePanel.clientHeight); //将敌机添加到列表中 this.changeList.push(change); //启动 setTimeout(function(){_this.startChange();},20000); }, //键盘按下事件 onkeydown : function(e){ e = e || window.event; var keyCode = e.keyCode; //阻止浏览器默认事件 if(keyCode == 32 || this.flyer.keyCodeAndDirection[keyCode]){ if(e.preventDefault)e.preventDefault(); else e.returnValue = false; } else return; //回调飞机键盘按下事件 this.flyer.keydown(e); }, //键盘释放事件 onkeyup : function(e){ e = e || window.event; //回调飞机键盘释放事件 this.flyer.keyup(e); }, //修改分数 changeScore : function(){ this.score += 100; document.getElementById('score').innerHTML = this.score; //分数级别 var scoreLevel = parseInt(this.score / 5000,10) + 1; //判断是否升级飞机子弹级别 if(scoreLevel > 1){ this.flyer.bulletLevel = scoreLevel>4?4:scoreLevel; //修改敌机移动速度 Enemy.prototype.movesp = Enemy.prototype.movespMap[this.flyer.bulletLevel]; } }, onsetFlag : function(){ _this.flyer.setFlag(this.n); }, //游戏结束 gameover : function(){ this.isGameOver = true; document.getElementById('score').innerHTML = "The Game is Over...You Score:" + this.score; for(var i=0,l=this.enemyList.length;i < l;i++){ this.gamePanel.removeChild(this.enemyList[0].dom); this.enemyList.remove(this.enemyList[0]); } for(var j=0,l=this.changeList.length;j < l;j++){ this.gamePanel.removeChild(this.changeList[0].dom); this.changeList.remove(this.changeList[0]); } this.gamePanel.removeChild(this.flyer.dom); this.timechange=0, this.changeflag=0, this.timecount=0; this.n=0; this.flyer = null; this.score = 0; this.gamePanel = null; document.body.onkeydown = null; document.body.onkeyup = null; document.getElementById('startBtn').style.display = 'block'; } } //游戏开始入口 function Start(){ Game.isGameOver = false; Game.init(); document.getElementById('startBtn').style.display = 'none'; document.getElementById('score').innerHTML = 0; }
腾讯云开发者
