学习了JS四天有余，想利用现在所学的一点知识写一个简单的打飞机小游戏。

功能：

1 能够通过上下左右键控制小飞机的移动

2 能够通过按空格键 让小飞机发射***

3 敌方飞机能够随机出现在上方（目前敌方飞机随机出现的位置需要刷新一次才能改变。。需后续改进）

4 发射的***击中敌方飞机能够弹出“boom”提示框


首先，定义了小飞机对象，我使用的是工厂的方式

对象中的属性：小飞机的宽度、小飞机的高度、飞机div对象、

对象中的方法函数：初始化小飞机，实现小飞机根据键盘按键而移动以及开火。

function Plane(){
        var plane = new Object();
        plane.width = 40;
        plane.height = 48;
        document.write('<div id="box"><div id="plane"></div></div>');//box是一个大框，在这个大框中实现打飞机游戏
        plane.p =document.getElementById('plane');
        plane.box = document.getElementById('box');
        plane.sty = function (){
            p = this.p;
            p.style.width = this.width;
            p.style.height = this.height;
            p.style.backgroundImage = "url(./imgs/z5.png)";
            p.style.position = 'absolute';

        }
        plane.move = (window.onkeydown=function (e){//使用onkeydown键盘事件，实现按键小飞机移动以及开火，不建议使用onkeypress
            var p = this.p;
            var b = this.box;
            var e = e ||window.event;
            switch(e.keyCode){
                case 37://zuo
                    p.style.left = Math.max(p.offsetLeft-10,0)+'px';//不能超过边界

                    break;
                case 38://shang
                    p.style.top = Math.max(p.offsetTop-10,0)+'px';

                    break;
                case 39://you

                    p.style.left = Math.min(p.offsetLeft+10,b.offsetWidth-p.offsetWidth)+'px';
                    break;
                case 40://xia
                    p.style.top = Math.min(p.offsetTop+10,b.offsetHeight-p.offsetHeight)+'px';
                    break;
                case 32:
                    bullet.fire(p.offsetLeft+p.offsetWidth/2,p.offsetTop);//调用了Bullet对象中的fire方法，实参是***应该显示的位置
                    break;

            }
        })
        return plane;
    }

然后，定义***对象

***对象的属性：宽、高、边界框内能够同时显示***的个数、边界框内当前显示的***个数，***的位置信息

***对象的方法函数：能够动态控制边框内能够同时显示的***个数，初始化***的样式，发射***，***发射后向边框上部飞出，获取***的位置（offsetLeft,offsetTop）

function Bullet(num){
        var bullet = new Object();
        bullet.width = 3;
        bullet.height =17;
        bullet.num = num;//边界框内同时显示***的个数
        bullet.j;//边界框内当前显示的***个数
        bullet.bs = create();//创建div对象，并且返回***div对象
        bullet.info=new Array;//***的位置信息
        
        function create(){
            bul = new Array();

            for(var i=0;i<num;i++){
            
                var b = document.createElement('div');
                bul[i] = this.box.appendChild(b);
            }
            //alert(bul);
            return bul;
        };
        bullet.box = document.getElementById('box');//获取边界框对象
        bullet.plane = document.getElementById('plane');//获取飞机对象
       
        //让***能够飞起来，周期性执行fly方法
        bullet.fly = function (){
            
            for(var i=0;i<num;i++){//遍历所有的***div对象

                var b = this.bs[i];

                if(b.style.display=='block'){//如果当前***是已经发射的，那么***的高度自身减10px
                    
                    b.style.top = (b.offsetTop-10)+'px';

                }
                if(b.offsetTop<0){//如果***已经超出了边界，则***的display为none
                    b.style.display = 'none';

                }
                this.getInfo(b,i);//调用getInfo函数，能够获取***当前的位置信息，实参分别是***对象以及索引
                
                
            }

        }

        setInterval('bullet.fly()','100');//周期性执行fly，使***飞起来

        bullet.sty = function (){//初始化***
  
            for(var i=0;i<num;i++){
                var b = this.bs[i];
                p = this.plane;
                b.style.width = this.width;
                b.style.height = this.height;
                b.style.backgroundImage = "url(./imgs/bullet.png)";
                b.style.position = 'absolute';
                b.style.display = 'none';
            }

        }
        var inf = new Array();//声明一个数组，用来存放***位置信息
        bullet.getInfo = function (b,i){
            
            if(b.style.display=='block'){//如果***在边界框内则把***的位置信息存入数组
            
                inf[i]=[b.offsetLeft,b.offsetTop];
                this.info = inf;
                //document.title = this.info;                
            }
        }        
        
        
        bullet.j = 0;//初始化边界内显示的当前***个数
        
        bullet.fire = function(x,y){//在小飞机对象中调用了本方法，传进来的参数是***应该显示的位置
            //alert(this.bs);
            if(this.j>num-1){如果个数超过了最大显示***个数，则从0开始计数
                this.j=0;
                
            }
           
            var b = this.bs[this.j];
           

            if(b.style.display=='none'){//如果***超出边界框设置为不显示，则能够再次显示，俗称补充弹药
                b.style.display = 'block';
            }
            b.style.left = x+'px';//设置***的位置
            b.style.top=y+'px';
            
            this.j++;
            
        }

        
        
        return bullet;
        
    }

接着，声明一个敌人对象

敌人对象属性：宽、高、边界框内能够显示的最大个数，敌人对象的位置信息，边界框内当前显示的敌人个数

敌人对象方法：能够动态控制边框内能够同时显示的***个数、初始化敌人样式、周期性执行显示敌人，周期性让敌人不停的往下飞，获取敌人的位置信息，周期性判断***有没有打中敌人

   

function Enemy(num){
        var enem = new Object();
        enem.width = 40;
        enem.height =48;
        enem.num = num;//边界框内最多显示敌人个数
        enem.k;//当前边界框内显示的敌人个数
        enem.boom=0;
        enem.es = create();
        enem.box = document.getElementById('box');
        enem.info = new Array();
        function create(){//动态创建敌人div对象，返回敌人对象
            ene = new Array();

            for(var i=0;i<num;i++){
            
                var e = document.createElement('div');
                ene[i] = this.box.appendChild(e);
            }
            //alert(bul);
            return ene;
        }

        enem.styl = function(){
            var b = this.box;
            
            for(var i=0;i<num;i++){
                var en = this.es[i];

                en.style.width = this.width;
                en.style.height = this.height;
                en.style.backgroundImage = "url(./imgs/enemy.png)";
                en.style.position = 'absolute';
                en.style.display = 'none';
                en.style.left = getRandom(0,b.offsetWidth-this.width);//敌人出现的位置随机，但是不超出边界框

            }
            
        }

        function getRandom(min,max){//随机
            return (max-min)*Math.random()+min;

        }
        enem.k = 0;//初始化定义当前边界框内显示的敌人个数
        

        setInterval(function(){//周期性执行，如果敌人对象不显示，则重新从边界框上部显示
            
            if(enem.k>num-1){
                enem.k=0;

            }

            
            var en = enem.es[enem.k];
            
            if(en.style.display=='none'){
                
                en.style.top='0px';
                en.style.display = 'block';

            }
            enem.k++;//统计当前敌人个数

        },getRandom(0,1000));
        
        

        setInterval(function(){//周期性执行让敌人显示，并且向下降 如果敌人一直下降到边界框外部，则不显示
            var b = enem.box;
            for(var i=0;i<num;i++){

                var en = enem.es[i];

                if(en.style.display=='block'){
                    //alert(b.offsetTop-10);
                    en.style.top = (en.offsetTop+10)+'px';

                }
                if(en.offsetTop>b.offsetHeight-en.offsetHeight){
                    en.style.display = 'none';

                }
                enem.getInfo(en,i);
            }

            
        },'100')
        var infom =new Array();
        enem.getInfo = function (en,i){//获取敌人的位置信息
            
            if(en.style.display=='block'){
            
                infom[i]=[en.offsetLeft,en.offsetTop];
                this.info = infom;
                //document.title = this.info;                
            }
        }    

        //document.title = enem.info;
        //周期性判断***有没有打中敌人
        setInterval(function(){
            
            var b_num = bullet.num;
            var e_num = enem.num;
            var e_i = new Array();
            var b_i = new Array();

            for(var i=0;i<enem.k;i++){//循环遍历所有敌人对象
                
                e_i[i] = enem.info[i];//获取敌人的位置信息
                
                e_b_l = e_i[i][0];//获取敌人的offsetLeft
                e_b_r = e_i[i][0]+enem.width;//获取敌人的右侧距离左边界的距离
                
                e_b_h = e_i[i][1];//获取敌人的offsetTop
                e_b_t = e_i[i][1]+enem.height;//获取敌人的下部到上边界的距离
                
                for(var j=0;j<bullet.j;j++){//循环遍历所有***信息
                    

                    b_i[j] =  bullet.info[j];//获取***的位置信息
                    
                    b_b_l = b_i[j][0];//获取***的offsetLeft

                    b_b_r = b_i[j][0]+bullet.width;//获取***的右部到左边界的距离
                    
                    b_b_t = b_i[j][1];//获取***的offsetTop
                    
                    if(e_b_t>b_b_t&&b_b_t>e_b_h){//判断***与敌人有么有相撞
                        
                        if(e_b_l<b_b_l&&e_b_r>b_b_r){    
                            enem.boom++;
                            alert('boom');
                        }
                    }
                }

            }


        },'1');

        return enem;


    }

在三个对象外部，分别调用，然后打飞机小游戏的初步功能就实现了！

刚刚开始学JS，对JS的对象的理解还不是很深刻，有的时候使用的PHP的思维方式，感觉写得不是很完美，心里有点不自在，有些地方在写博客的时候也感觉到了不足，今后会改正。

另外敌方小飞机的只有通过刷新，才会改变位置，这个是后期需要改正的，***碰撞了敌人之后，应该消失，但是本方法中还没有实现，击中敌人后依然能够击中再次出现的敌人。。。这个也需要改进。

写得第一个JS小玩意儿让我感受到了JS的乐趣，但是也感受到了JS的痛苦！！！！