HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能（二）

来源：互联网发布：网络监控系统软件编辑：程序博客网时间：2024/05/05 16:57

上一篇博客只画出了，一个坦克，并让其可以上下左右移动，这篇博客将画出敌人的坦克，并让自己的坦克可以发子弹，但是还不是尽善尽美，还有一些问题，将会在下篇博客说明：

html代码：

<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body  onkeydown="getCommand()"><h1>html5-经典的坦克大战</h1><canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black"></canvas><span id="aa">数据</span><script type="text/javascript" src="tankeGame.js"></script><script type="text/javascript">    //准备工作    //得到画布    var  canvas1=document.getElementById("tankeMap");    //得到上下文引用对象，你可以理解成画笔    var cxt=canvas1.getContext("2d");        //定义一个坦克    //数字0表示向上 数字1表示右 数字2表示下 数字3表示左    var  hero=new Hero(130,130,0,tankeColor);        var  heroBullet=null;    //定义一个敌人的坦克数组对象     var enemyTankes=new Array();        //生成3个敌方坦克    for(var i=0;i<3;i++){        //创建敌人的坦克对象        var enemyTanke=new EnemyTanke((i+1)*50,30,2,enemyColor);        enemyTankes[i]=enemyTanke;    }        //刚进来先刷新画布，并初始化元素    flashMap();        //刷新画布的函数    function flashMap(){    //清除画布的元素，刷新    cxt.clearRect(0,0,500,500);        //画自己的坦克        drawTanke(hero);        //画自己的子弹        drawHeroBullet();                //画敌人的坦克        for(var i=0;i<3;i++){        drawTanke(enemyTankes[i]);    }    }        //获取键盘的命令的处理的函数    function getCommand(){        var code=event.keyCode;        cxt.clearRect(0,0,500,500);        switch(code){            case 87://w键                hero.moveUp();                break;            case 68://d键                hero.moveRight();                break;            case 83://s键                hero.moveDown();                 break;            case 65://a键                hero.moveLeft();                break;            case 74://j键hero.shotEnemy();break;            }       flashMap();//调用上下左右的同时刷新画布    }    //每隔100毫秒刷新画布    window.setInterval("flashMap()",100);    </script></body></html>

tankeGame.js代码：

var tankeColor=new Array("#BA9658","#FEF26E");var enemyColor=new Array("#00A2B5","#00FEFE");//坦克的父类    function TanK(x,y,direct,color){        this.x=x;        this.y=y;        this.direct=direct;           this.speed=5;        this.color=color;                this.moveUp=function(){            this.y-=this.speed;            this.direct=0;        }        this.moveDown=function(){            this.y+=this.speed;            this.direct=2;        }        this.moveRight=function(){            this.x+=this.speed;            this.direct=1;        }        this.moveLeft=function(){            this.x-=this.speed;            this.direct=3;        }    }        //子弹类    function  Bullet(x,y,direct,speed){        this.x=x;this.y=y;this.direct=direct;this.speed=speed;this.timer=null;this.isLive=true;this.run=function run(){if(this.x<=0||this.x>=500||this.y<=0||this.y>=500){window.clearInterval(this.timer);this.isLive=false;}else{switch(this.direct){case 0:this.y-=this.speed;break;case 1:this.x+=this.speed;break;case 2:this.y+=this.speed;break;case 3:this.x-=this.speed;break;}}document.getElementById("aa").innerHTML="子弹的x="+this.x+"y="+this.y;}    }       //定义一个hero类    //x、y表示初始坐标，direct表示方向    function  Hero(x,y,direct,color){        this.tanke=TanK;        this.tanke(x,y,direct,color);        this.shotEnemy=function(){        switch(this.direct){        case 0://上        heroBullet=new Bullet(this.x+9,this.y,this.direct,1);        break;        case 1://右        heroBullet=new Bullet(this.x+36,this.y+9,this.direct,1);        break;        case 2://下        heroBullet=new Bullet(this.x+9,this.y+36,this.direct,1);        break;        case 3://左        heroBullet=new Bullet(this.x-6,this.y+9,this.direct,1);        break;        }                var timer=window.setInterval("heroBullet.run()",50);        heroBullet.timer=timer;        }    }        //定义一个hero类    //x、y表示初始坐标，direct表示方向    function  EnemyTanke(x,y,direct,color){        this.tanke=TanK;        this.tanke(x,y,direct,color);    }        //画自己的子弹    function  drawHeroBullet(){    if(heroBullet!=null&&heroBullet.isLive){    cxt.fillStyle="#FEF26E";    cxt.fillRect(heroBullet.x,heroBullet.y,2,2);    }    }        //把创建坦克的方法封装为一个对象    //该函数可以画自己的坦克，也可以画敌人的坦克    //tanke就是一个对象     function  drawTanke(tanke){        //坦克的方向        switch(tanke.direct){            case 0:            case 2:            {//上                //画出自己的坦克设置颜色                cxt.fillStyle=tanke.color[0];                cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮                cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮                cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体                                //画中间的圆形的炮筒体                cxt.fillStyle=tanke.color[1];                cxt.beginPath();                cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false);                cxt.closePath();                cxt.fill();                                //画出炮筒                cxt.strokeStyle=tanke.color[1];                //cxt.fillStyle="#FFD972";                cxt.lineWidth=1.9;                cxt.beginPath();                cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置                  if(tanke.direct==0){                    cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置                 }else if(tanke.direct==2){                    cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置                }                cxt.closePath();                    cxt.stroke();            }            break;            case 1:            case 3:            {//右                //画出自己的坦克设置颜色                cxt.fillStyle=tanke.color[0];                cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮                cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮                cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体                                //画中间的圆形的炮筒体                cxt.fillStyle=tanke.color[1];                cxt.beginPath();                cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false);                cxt.closePath();                cxt.fill();                                //画出炮筒                cxt.strokeStyle=tanke.color[1];                //cxt.fillStyle="#FFD972";                cxt.lineWidth=1.9;                cxt.beginPath();                cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置                  if(tanke.direct==1){//右                    cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置                 }else if(tanke.direct==3){//左                    cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置                 }                cxt.closePath();                    cxt.stroke();            }            break;        }    }

end；

阅读全文

0 0