javascript坦克小游戏

Question

第一部分<script type="text/javascript">
    static_id=0;
    XPrang=function(srcBox,targetBox){
        var x=Math.abs(srcBox.left-targetBox.left);
        var xDistance=srcBox.width/2+targetBox.width/2;
        if(x<xDistance)
            return true;
        else
            return false;
    };
    YPrang=function(srcBox,targetBox){
        var y=Math.abs(srcBox.top-targetBox.top);
        var yDistance=srcBox.height/2+targetBox.height/2;
        if(y<yDistance)
            return true;
        else
            return false;
    };
    IsPrang=function(srcBox){
        for(var _i in Game.Boxs){
            if(srcBox.id==Game.Boxs[_i].id)
                continue;
            else if(XPrang(srcBox,Game.Boxs[_i])&&YPrang(srcBox,Game.Boxs[_i])){
                if(IsDestroy(srcBox,Game.Boxs[_i])=='destroy'){
                    srcBox.Destroy();
                    Game.Boxs[_i].Destroy();
                    return false;
                }
                else
                    return true;
            }
        }
        return false;
    };
    IsDestroy=function(srcBox,targetBox){
        var srcType=srcBox.id.split('_')[0];
        var targetType=targetBox.id.split('_')[0];
        var value=srcType+'X'+targetType;
        var msg=null;
        switch(value){
            case 'RTXRB':
                msg='nothing';
                break;
            case 'RTXBB':
            case 'BTXRB':
            case 'RBXBB':
                msg='destroy';
                break;
            case 'RTXRT':
            case 'RTXBT':
                msg='prang';
                break;
        }
        return msg;
    };
    CreateId=function(){
        static_id++;
        return static_id;
    };
    CreateImg=function(src,top,left){
        var _img=document.createElement('img');
        _img.src=src;
        _img.style.top=top+'px';
        _img.style.left=left+'px';
        return _img;
    };
    IsOutDoc=function(box){
        var _browersize=GetBrowserSize();
        if(box.left<=0||box.left>=(_browersize.width-box.width))
            return true;
        if(box.top<=0||box.top>=(_browersize.height-box.height))
            return true;
        return false;
    };
    GetBrowserSize=function(){
        return{
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        }
    };
    GetKeyPressed=function(event){
        var e=event||window.event;
        var code=e.keyCode;
        var value=String.fromCharCode(code);
        return{
            'code':code,
            'value':value
        };
    };
    Bind=function(object,func){
        return function(){
            return func.apply(object, arguments);
        }
    }
    AddEventHandle=function(target,eventType,func)
    {
        if(target.addEventListener)
            target.addEventListener(eventType,func,false);
        else if(target.attachEvent)
            target.attachEvent('on'+eventType,func);
        else
            target['on'+eventType]=func;
    }

Answer 1

第2部分 /***********************************************************************************************/
    /*static class Game*/
    Game=function(){};
    Game.Init=function(){
        Game.Boxs=new Array();
        Game.RedCount=10;
        Game.ExistCount=10;
        Game.timer=null;
        Game.BlueCount=3;
        var _t=setInterval(Game.RandomDirection,1000);
    };
    Game.RandomDirection=function(){
        var r=Math.floor(Math.random()*10/3);
        var d=Game.direction[r];
        while(true){
            var _r=Math.floor(Math.random()*100%Game.Boxs.length);
            if(Game.Boxs[_r].id.substring(0,2)=='BT'||Game.Boxs[_r].id.substring(0,2)=='RB'||Game.Boxs[_r].id.substring(0,2)=='BB')
                continue;
            else{
                Game.Boxs[_r].SetDirection(d);
                break;
            }
        }
    };
    Game.direction=['u','d','l','r'];
    Game.Start=function(){
        Game.Init();
        Game.CreateTanker('blue');
        Game.CreateTanker('red');
        Game.timer=setInterval(function(){
            if(Game.RedCount>0){
                Game.CreateTanker('red');
                Game.RedCount--;
            }
        },2000);
    };
    Game.Stop=function(){};
    Game.Over=function(){};
    Game.CreateTanker=function(tanker_type){
        var _tanker=null;
        var _browser_size=GetBrowserSize();
        switch(tanker_type){
            case 'red':
                _tanker=new RedTanker(1,1);
                break;
            case 'blue':
                _tanker=new BlueTanker(1,1);
                break;
        }
        Game.AddToBoxs(_tanker);
        Game.AppendToDoc(_tanker);
    };
    Game.CreateBullet=function(tanker){
        if(tanker.bulletcount<=0)
            return;
        var _b=new Bullet(1);
        var _reg=/T/gi;
        _b.id=tanker.id.replace(_reg,'B');        
        _b.SetDirection(tanker.direction);
        var _position=tanker.CaculateBulletPosition(_b);
        _b.SetPosition(_position.top,_position.left);
        Game.AddToBoxs(_b);
        Game.AppendToDoc(_b);
    };
    Game.AppendToDoc=function(box){
        document.body.appendChild(box.img);
    };
    Game.RemoveToDoc=function(box){
        document.body.removeChild(box.img);
    };
    Game.AddToBoxs=function(tanker){
        Game.Boxs.push(tanker);
    };
    Game.DeleteToBoxs=function(Tanker){
        var _lastBox=Game.Boxs[Game.Boxs.length-1];
        for(var i in Game.Boxs){
            if(Game.Boxs[i].id==Tanker.id){
                Game.Boxs[i]=_lastBox;
                Game.Boxs.pop();
                break;
            }
        }
    };
    Game.UpdateBulletCount=function(bullet){
        var _reg=/B_/gi;
        var _id=bullet.id.replace(_reg,'T_');
        for(var _i in Game.Boxs){
            if(Game.Boxs[_i].id==_id){
                Game.Boxs[_i].bulletcount++;
                return;
            }
        }
    };
    /***********************************************************************************************/
    /*class MoveBox*/
    MoveBox=function(){
        this.id=null;
        this.top=0;
        this.left=0;
        this.height=null;
        this.width=null;
        this.speed=null;
        this.direction=null;
        this.timer=null;
        this.img=CreateImg(null,0,0);
    };
    MoveBox.prototype.Move=function(){
        if(this.direction==null||this.top==null||this.left==null||this.speed==null){
            throw Error('初始化错误');
            return;
        }
        switch(this.direction){
            case 'u':
                this.top-=this.speed;
                break;
            case 'd':
                this.top+=this.speed;
                break;
            case 'l':
                this.left-=this.speed;
                break;
            case 'r':
                this.left+=this.speed;
                break;
        }
        if(IsOutDoc(this)){
            var type=this.id.substring(2,1);
            if(type=='T')
                this.doback();
            else if(type=='B')
                this.Destroy();
        }
        if(IsPrang(this))
            this.doback();
        this.RegulatePosition();
    };
    MoveBox.prototype.RegulatePosition=function(){
        this.img.style.top=this.top+'px';
        this.img.style.left=this.left+'px';
    };
    MoveBox.prototype.SetSrc=function(src){
        if(src==null){
            throw Error('图片路劲不能为null');
            return;
        }
        this.img.src=src;
        this.SetSize();
    };
    MoveBox.prototype.doback=function(){
        switch(this.direction){
            case 'u':
                this.top+=this.speed;
                break;
            case 'd':
                this.top-=this.speed;
                break;
            case 'l':
                this.left+=this.speed;
                break;
            case 'r':
                this.left-=this.speed;
                break;
        }
    }
    MoveBox.prototype.SetPosition=function(top,left){
        this.top=top;
        this.left=left;
        this.RegulatePosition();
    };
    MoveBox.prototype.SetSize=function(){
        var _img=new Image();
        _img.src=this.img.src;
        this.width=_img.width;
        this.height=_img.height;
    };
    MoveBox.prototype.SetId=function(header,id){
        if(id==null||id=='undefined')
            this.id=header+'_'+CreateId();
        else
            this.id=header+'_'+id;
    };
    MoveBox.prototype.SetSpeed=function(speed){
        this.speed=speed;
    };
    /***********************************************************************************************/
    /*class Tanker extend MoveBox*/
    Tanker=function(){
        MoveBox.call(this,arguments);
        this.bulletcount=null;
    };
    Tanker.prototype=new MoveBox();
    Tanker.prototype.Fire=function(){};
    Tanker.prototype.CaculateBulletPosition=function(bullet){
        var _position=null;
        switch(this.direction){
            case 'u':
                _position={
                    top:this.top-bullet.height-20,
                    left:this.left+(this.width-bullet.width)/2
                };
                break;
            case 'd':
                _position={
                    top:this.top+this.height,
                    left:this.left+(this.width-bullet.width)/2
                };
                break;
            case 'l':
                _position={
                    top:this.top+(this.height-bullet.height)/2,
                    left:this.left-bullet.width-20
                };
                break;
            case 'r':
                _position={
                    top:this.top+(this.height-bullet.height)/2,
                    left:this.left+this.width
                };
                break;
        }
        return _position;
    };
    Tanker.prototype.SetDirection=function(d){
        this.direction=d;
        switch(d){
            case 'u':
                this.SetSrc('Img/T_UP.gif');
                break;
            case 'd':
                this.SetSrc('Img/T_DOWN.gif');
                break;
            case 'l':
                this.SetSrc('Img/T_LEFT.gif');
                break;
            case 'r':
                this.SetSrc('Img/T_RIGHT.gif');
                break;
            
        }
    };
    Tanker.prototype.SetBulletCount=function(count){
        this.bulletcount=count;
    };
    Tanker.prototype.Destroy=function(){
        Game.RemoveToDoc(this);
        clearInterval(this.timer);
        Game.DeleteToBoxs(this);
    };

Answer 2

第3部分/***********************************************************************************************/
    /*class BlueTanker extend Tanker*/
    BlueTanker=function(speed,bulletcount){
        Tanker.call(this,arguments);
        this.SetId('BT',null);
        this.SetDirection('u');   
        this.isFire=false;
        this.isMove=false;     
        //first position
        var _browersize=GetBrowserSize();
        var _top=_browersize.height-this.height;
        var _left=(_browersize.width-this.width)/2;
        this.SetPosition(_top,_left);
        this.SetSpeed(speed);
        this.SetBulletCount(bulletcount);
        AddEventHandle(document,'keydown',Bind(this,this.KeyDown));
        AddEventHandle(document,'keyup',Bind(this,this.KeyUp));
        this.timer=setInterval(Bind(this,this.active),5);
    };
    BlueTanker.prototype=new Tanker();
    BlueTanker.prototype.KeyDown=function(event){
        var _value=GetKeyPressed(event).value;
        switch(_value){
            case 'W':
                this.SetDirection('u');
                this.isMove=true;
                break;
            case 'S':
                this.SetDirection('d');
                this.isMove=true;
                break;
            case 'A':
                this.SetDirection('l');
                this.isMove=true;
                break;
            case 'D':
                this.SetDirection('r');
                this.isMove=true;
                break;
            case 'J':
                this.isFire=true;
                return;
        }
    };
    BlueTanker.prototype.KeyUp=function(){
        var _value=GetKeyPressed(event).value;
        switch(_value){
            case 'W':
            case 'S':
            case 'A':
            case 'D':
                this.isMove=false;
                break;
            case 'J':
                this.isFire=false;
                return;
        }
    }
    BlueTanker.prototype.Fire=function(){
        if(this.bulletcount>0){
            Game.CreateBullet(this);
            this.bulletcount--;
        }
    };
    BlueTanker.prototype.active=function(){
        if(this.isMove)
            this.Move();
        if(this.isFire)
            this.Fire();
    }
    /***********************************************************************************************/
    /*class RedTanker extend Tanker*/
    RedTanker=function(speed,bulletcount){
        Tanker.call(this,arguments);
        this.SetId('RT',null);
        this.SetDirection('d');        
        //first position
        var _browersize=GetBrowserSize();
        var _top=0;
        var _left=(_browersize.width-this.width)/2;
        this.SetPosition(_top,_left);
        this.SetSpeed(speed);
        this.SetBulletCount(bulletcount);
        this.AutoMove();
    };
    RedTanker.prototype=new Tanker();
    RedTanker.prototype.AutoMove=function(){
        this.timer=setInterval(Bind(this,this.RedMove),5);
    };
    RedTanker.prototype.RedMove=function(){
        this.Move();
    }
    RedTanker.prototype.Fire=function(){
        if(this.bulletcount>0){
            Game.CreateBullet(this);
            this.bulletcount--;
        }
    }
    /***********************************************************************************************/
    /*class Bullet extend MoveBox*/
    Bullet=function(speed){
        MoveBox.call(this,arguments);
        this.SetSpeed(speed);
        this.AutoMove();
    };
    Bullet.prototype=new MoveBox();
    Bullet.prototype.SetDirection=function(d){
        this.direction=d;
        switch(d){
            case 'u':
                this.SetSrc('Img/B_UP.gif');
                break;
            case 'd':
                this.SetSrc('Img/B_DOWN.gif');
                break;
            case 'l':
                this.SetSrc('Img/B_LEFT.gif');
                break;
            case 'r':
                this.SetSrc('Img/B_RIGHT.gif');
                break;
            
        }
    };
    Bullet.prototype.AutoMove=function(){
        this.timer=setInterval(Bind(this,this.Move),1);
    }
    Bullet.prototype.Destroy=function(){
        Game.RemoveToDoc(this);
        clearInterval(this.timer);
        Game.DeleteToBoxs(this);
        Game.UpdateBulletCount(this);
    }
    /***********************************************************************************************/
    window.onload=function(){
        Game.Start();
        var _msg=document.getElementById('msg');
        var _t=setInterval(function(){
            _msg.innerHTML=Game.Boxs.length;
        },1);
    }

Answer 3

study!this is very good