比较完善的用HTML5做的坦克大战代码

此HTML5所做坦克的坦克大战的功能比较齐全   而且都是用HTML5画出来的坦克和炮弹

一、自己的坦克能上下左右移动  按wsad 这是上下左右键

二、自己的坦克可以发射多颗炮弹 连续发射炮弹    

三、画出敌人的三个坦克 而且可以向四个方向随机移动  发射炮弹

四、自己的坦克可以击中敌人的坦克  敌人也可以击中自己的

五、不可以超出边界,击中敌人坦克  坦克爆炸 子弹消失

html代码:









你的浏览器不支持canvas标签







js代码:



    //定义敌人和我们自己的坦克的颜色
    var enemyColor = new Array('#00FEFE','#00A2B5');
    var heroColor = new Array('#FEF26E','#BA9658');
    //封装一个公用的坦克类
    function Tank(x,y,direct){
        this.x = x;
        this.y = y;
        this.speed = 3;
        this.direct = direct;
        this.moveUp = function(){
            hero.y -= hero.speed;
            hero.direct = 0;
        }
        this.moveRight = function(){
            hero.x += hero.speed;
            hero.direct = 1;
        }
        this.moveBottom = function(){
            hero.y += hero.speed;
            hero.direct = 2;
        }
        this.moveLeft = function(){
            hero.x -= hero.speed;
            hero.direct = 3;
        }
    }
    
    //英雄坦克类
    function Hero(x,y,direct,color){
        //将坦克类的构造方法赋给hero
        this.hero = Tank;
        //调用,拥有坦克类的所有的属性和方法
        this.hero(x,y,direct);
        this.color = color;
        this.direct = direct;
        this.isLive = true;
        this.shotEnemy = function(){
            switch(this.direct){
                case 0:
                    heroBullet = new Bullet(this.x+9,this.y,this.direct);
                break;
                case 1:
                    heroBullet = new Bullet(this.x+30,this.y+9,this.direct);
                break;
                case 2:
                    heroBullet = new Bullet(this.x+9,this.y+30,this.direct);
                break;
                case 3:
                    heroBullet = new Bullet(this.x,this.y+9,this.direct);
                break;
            }
            heroBullets.push(heroBullet);
            heroBullets[heroBullets.length-1].timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
        }
    }
    //敌人的坦克
    function EnemyTank(x,y,direct,color){
        //将坦克类的构造方法赋给hero
        this.enemyTank = Tank;
        //调用,拥有坦克类的所有的属性和方法
        this.enemyTank(x,y,direct);
        this.color = color;
        this.isLive = true;
        this.timer = null;
        this.speed = 1;
        this.count = 0;
        this.direct = direct;
        this.bulletIsLive = true;
        this.run = function(){
            switch(this.direct){
                case 0:
                    if(this.y>0){
                    this.y--;
                }
                break;
                case 1:
                    if(this.x+30<500){
                    this.x += this.speed;
                }
                break;
                case 2:
                    if(this.y+30<300){
                    this.y += this.speed;
                }
                break;
                case 3:
                    if(this.x>0){
                    this.x -= this.speed;
                }
                break;
            }
            
            if(this.count>=30){
                this.direct = Math.round(Math.random()*3);
                this.count=0;
            }
            this.count++;
            //在坦克走的过程中,判断一下,这个坦克的子弹是否活着
            if(this.bulletIsLive == false && this.isLive){
                //子弹已死,给他补充一颗
                switch(this.direct){
                    case 0:
                        enemyBullets.push(new Bullet(this.x+9,this.y,this.direct,this,'enemy'));
                    break;
                    case 1:
                        enemyBullets.push(new Bullet(this.x+30,this.y+9,this.direct,this,'enemy'));
                    break;
                    case 2:
                        enemyBullets.push(new Bullet(this.x+9,this.y+30,this.direct,this,'enemy'));
                    break;
                    case 3:
                        enemyBullets.push(new Bullet(this.x,this.y+9,this.direct,this,'enemy'));
                    break;
                }
                enemyBullets[enemyBullets.length-1].timer = window.setInterval("enemyBullets["+(enemyBullets.length-1)+"].run()",50);
                    this.bulletIsLive = true;
            }
        }
    }
    //绘制坦克
        function drawTank(hero){
        switch(hero.direct){
            case 0:
            case 2:
            //alert(ctx);
                ctx.fillStyle = hero.color[0];
                ctx.fillRect(hero.x,hero.y,5,30);
                ctx.fillRect(hero.x+15,hero.y,5,30);
                ctx.fillRect(hero.x+6,hero.y+5,8,20);
                //需要注意,画圆的时候需要重新开启路径
                ctx.fillStyle = hero.color[1];
                ctx.beginPath();
                ctx.arc(hero.x+10,hero.y+15,3,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();
                //画出炮筒(直线)
                ctx.strokeStyle = hero.color[1];
                ctx.lineWidth = 2;
                ctx.moveTo(hero.x+10,hero.y+15);
                if(hero.direct==0){
                    ctx.lineTo(hero.x+10,hero.y);
                }else if(hero.direct==2){
                    ctx.lineTo(hero.x+10,hero.y+30);
                }
                ctx.stroke();
            break;
            case 1:
            case 3:
                ctx.fillStyle = hero.color[0];
                ctx.fillRect(hero.x,hero.y,30,5);
                ctx.fillRect(hero.x,hero.y+15,30,5);
                ctx.fillRect(hero.x+5,hero.y+6,20,8);
                //需要注意,画圆的时候需要重新开启路径
                ctx.fillStyle = hero.color[1];
                ctx.beginPath();
                ctx.arc(hero.x+15,hero.y+10,3,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();
                //画出炮筒(直线)
                ctx.strokeStyle = hero.color[1];
                ctx.lineWidth = 2;
                ctx.moveTo(hero.x+15,hero.y+10);
                if(hero.direct ==1){
                    ctx.lineTo(hero.x+30,hero.y+10);
                }else if(hero.direct ==3){
                    ctx.lineTo(hero.x,hero.y+10);
                }
                ctx.stroke();
            break;
        }
    }

    //定义一个子弹类
    function Bullet(x,y,direct,tank,type){
        this.x = x;
        this.y = y;
        this.speed = 3;
        this.direct = direct;
        this.timer = null;
        this.isLive = true;
        this.tank = tank;
        this.type = type;
        this.run = function(){
            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').innerText = "x轴:"+this.x+"y轴:"+this.y;
            if(this.x <0 || this.x>=500 ||this.y<0 || this.y>300 ||this.isLive==false){
                this.isLive = false;
                //this.tank.bulletIsLive = false;
                if(this.type=='enemy'){
                    this.tank.bulletIsLive = false;
                }
                window.clearInterval(this.timer);
            }
        }
    }
    function drawHeroBullet(bullets){
        for(var i=0;i             var heroBullet = bullets[i];
            if(heroBullet.isLive){
                ctx.fillStyle = '#FEF26E';
                ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
            }
        }
    }
    //画出敌人坦克的子弹
    function drawEnemyBullet(enemyBullets){
        for(var i=0;i             var enemyBullet = enemyBullets[i];
            if(enemyBullet.isLive){
                ctx.fillRect(enemyBullet.x,enemyBullet.y,2,2);
            }
        }
    }
    function isHitEnemyTank(heroBullets,enemyTanks){
        for(var i=0;i             for(var j=0;j                 //判断一下自己的子弹和敌人的坦克坐标
                if(enemyTanks[j].isLive){
                    switch(enemyTanks[j].direct){
                    case 0:
                    case 2:
                        if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+20&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+30){
                            //标记敌人的坦克和我们的子弹已经死掉了
                            heroBullets[i].isLive = false;
                            enemyTanks[j].isLive = false;
                            var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
                            bombs.push(bomb);

                    }
                    break;
                    case 1:
                    case 3:
                        if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+30&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+20){
                            //标记敌人的坦克和我们的子弹已经死掉了
                            heroBullets[i].isLive = false;
                            enemyTanks[j].isLive = false;
                            var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
                            bombs.push(bomb);
                    }
                    break;
                }
                }
                
            }
        }
    }

    //定义炸弹类
    function Bomb(x,y){
        this.x = x;
        this.y = y;
    }

    //判断敌人的子弹是否击中自己的坦克
    function isHitHeroTank(enemyBullets,heroTank){
        for(var i=0;i             if(enemyBullets[i].isLive && heroTank.isLive){
                switch(heroTank.direct){
                case 0:
                case 2:
                    if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+20 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +30){
                    heroTank.isLive = false;
                    enemyBullets[i].isLive = false;
                }
                break;
                case 1:
                case 3:
                    if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+30 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +20){
                    heroTank.isLive = false;
                    enemyBullets[i].isLive = false;
                }
                break;
            }
            }
        }
    }

比较完善的用HTML5做的坦克大战代码_第1张图片

你可能感兴趣的:(HTML5)