JavaScript游戏之飞机接子弹

啥都不说，先预览一下。这次没UI，哈哈。。。都是用css凑出来的。。。

游戏说明：方向键左右控制移动，左Ctrl为变大5秒，吃到白色加100分，红色扣100分，蓝色增加一次变大

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  以下是源码以及解析：

html代码

 1 <style>
 2     #panel{height:400px;width:300px;background:Black;position:absolute;left:100px;top:100px;overflow:hidden;}
 3     #panel div{position:absolute;left:0;color:White;font-size:12px;}
 4     #panel .time{top:0;}
 5     #panel .canBigCount{top:12px;}
 6     #panel .score{top:24px;}
 7 </style>
 8 
 9 <div style="color:Red;">游戏说明：方向键左右控制移动，空格为变大5秒，吃到白色加100分，红色扣100分，蓝色增加一次变大</div>
10 <div><input type="button" value="开始" onclick="GameStart()" /></div>
11 
12 <div id="panel" tabindex="0">
13     <div class="time">时间：<span id="time">60</span></div>
14     <div class="canBigCount">可变大次数：<span id="canBigCount">1</span></div>
15     <div class="score">分数：<span id="score">0</span></div>
16 </div>

 

两个工具函数

 1 //根据ID获取对应的dom元素
 2 function $(obj){
 3     return typeof obj == 'string'?document.getElementById(obj):obj;
 4 }
 5 //获取某dom元素name对应的css值
 6 function getCss(obj,name){
 7     obj = $(obj);
 8     if(obj.currentStyle) {
 9         return obj.currentStyle[name];
10     }
11     else {
12         return document.defaultView.getComputedStyle(obj,null)[name];
13     }
14 }

 

  1 var Fly = function(){
  2     //飞机对应的dom元素
  3     this.dom = null;
  4     //飞机信息
  5     this.left = 0;
  6     this.top = 0;
  7     this.width = 0;
  8     this.height = 0;
  9     //可变大次数
 10     this.canBigCount = 1;
 11     //目前变大状态
 12     this.isBig = false;
 13     //移动状态
 14     this.isMove = false;
 15     //移动ID
 16     this.moveId = null;
 17 
 18     this.create();
 19 }
 20 Fly.prototype = {
 21     //移动位移
 22     movepx : 10,
 23     //移动速度
 24     moveSpeed : 30,
 25     //创建飞机dom
 26     create : function(){
 27 
 28         this.dom = document.createElement('div');
 29         this.dom.style.cssText = 'position:absolute;width:40px;height:15px;background:Yellow;';
 30         
 31         this.width = parseInt(this.dom.style.width,10);
 32         this.height = parseInt(this.dom.style.height,10);
 33     },
 34     //初始化飞机位置
 35     initPosition : function(gameWidth,gameHeight){
 36         
 37         this.left = (gameWidth-this.width)/2;
 38         this.top = gameHeight-this.height;
 39         this.dom.style.left = this.left + 'px';
 40         this.dom.style.top = this.top + 'px';
 41     },
 42     //更新位置
 43     update : function(){
 44         this.dom.style.left = this.left+'px';
 45         this.dom.style.top = this.top +'px';
 46     },
 47     //变大
 48     changeBig : function(){
 49         this.dom.style.width = (this.width*2) + 'px';
 50         this.width = this.width*2;
 51         this.isBig = true;
 52     },
 53     //还原
 54     changeNormal : function(){
 55         this.dom.style.width = (this.width/2) + 'px';
 56         this.width = this.width/2;
 57         this.isBig = false;
 58     },
 59     //键盘按下事件,e为event,gameWidth为游戏背景宽度
 60     keydown : function(e,gameWidth){
 61         switch(e.keyCode){
 62             //空格
 63             case 32:{
 64                 //判断剩余变大次数与变大状态
 65                 if(this.canBigCount > 0 && !this.isBig){
 66                     
 67                     var _this = this;
 68                     //变大
 69                     this.changeBig();
 70                     //设置还原事件
 71                     setTimeout(function(){
 72                         _this.changeNormal();
 73                     },5000);
 74                     
 75                     this.canBigCount -= 1;
 76                     //刷新变大次数显示
 77                     this.flashBigCount();
 78                 }
 79                 break;
 80             };
 81             //方向左
 82             case 37:{
 83                 if(!this.isMove){
 84                     this.isMove = true;
 85                     this.move('left');
 86                 }
 87                 break;
 88             };
 89             //方向右
 90             case 39:{
 91                 if(!this.isMove){
 92                     this.isMove = true;
 93                     this.move('right',gameWidth);
 94                 }
 95                 break;
 96             };
 97         }
 98     },
 99     //键盘释放事件
100     keyup : function(e){
101         
102         if(e.keyCode == 37 || e.keyCode == 39){
103             this.isMove = false;
104             clearInterval(this.moveId);
105         }
106         
107     },
108     //飞机移动
109     move : function(dir,gameWidth){
110         
111         _this = this;
112         
113         if(dir == 'left'){
114             this.moveId = setInterval(function(){
115                 
116                 _this.left = _this.left-_this.movepx <=0?0:_this.left-_this.movepx;
117                 _this.update();
118                 
119             },this.moveSpeed);
120         }
121         else{
122             this.moveId = setInterval(function(){
123                 
124                 _this.left = _this.left+_this.movepx >=gameWidth-_this.width?gameWidth-_this.width:_this.left+_this.movepx;
125                 _this.update();
126                 
127             },this.moveSpeed);
128         }
129         
130     },
131     //刷新变大次数显示，外部调用接口
132     flashBigCount : function(){}
133 }