HTML5 经典小游戏之坦克

粉色坦克为敌人的坦克,橘色坦克为我方坦克

画布上的点点是子弹,目前还没有实现发子弹消灭敌方坦克并消失

明天会更新并且完善

坦克的组成是由三个矩形中间矩形上面是一个圆形,圆形上是一个直线

 

根据不同的方向生成不同的子弹:

(1)根据方向----生成不同的子弹对象

(2)再根据子弹坦克炮筒方向,画出子弹

 

废话不多说 上源码

tankGame2.html

 

<!DOCTYPE html>
< html>
< head>
< meta charset='utf-8'/>
< script src='tankGame2.js'></script>
< /head>
< body onkeydown="changeDirect()">
< canvas id='tankMap' width='500px' height='300px' style='border:1px solid #cccfff'>
你的浏览器不支持canvas标签</canvas>
< /body>
< script>
    //开始画出我们的tanke
    var canvas = document.getElementById('tankMap');
    //相当于获得画笔
    var ctx = canvas.getContext('2d');
    //自定义的标准:
    // 0-->向上  1-->向右  2-->向下  3--> 向左
    var hero = new Hero(40,40,3,0,heroColor);
    drawTank(hero);
    //定义一个数组,画出敌人的坦克,画一个向数组添加一个
    var enemyTanks = new Array();
    //定义一个子弹的数组
    var heroBullets = new Array();
    //根据方向生成的具体的某个子弹对象
    var heroBullet = null;

    for(var i=0;i<3;i++){
        var enemyTank = new EnemyTank((i+1)*50,0,3,2,enemyColor);
         enemyTanks[i] = enemyTank;
         drawTank(enemyTanks[i]);
    }
    //刷新作战区,显示战场上最新的元素()
    function flashMap(){
        ctx.clearRect(0,0,500,300);
        drawTank(hero);
        //画出英雄坦克的子弹
        drawHeroBullet();
        for(var i=0;i<3;i++){
            drawTank(enemyTanks[i]);
        }
    }

    function changeDirect(){
        //触发事件后,传递参数 event
        var keycode = event.keyCode;
        switch(keycode){
            case 38:
            hero.moveUp();
            break;
            case 39:
            hero.moveRight();
            break;
            case 40:
            hero.moveBottom();
            break;
            case 37:
            hero.moveLeft();
            break;
            case 32:
            hero.shotEnemy();
            break;
            
        }
        flashMap();
    }
< /script>
< /html>

 

tankGame.js

    //先给坦克定义颜色
    var enemyColor = new Array('gray','pink');
    var heroColor = new Array('blue','orange');
    
    
    function Tank(x,y,speed,direct,color){
        this.x = x;
        this.y = y;
        this.speed = speed;
        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,speed,direct,color){
        this.hero = Tank;
        this.color = color;
        this.hero(x,y,speed,direct);
        this.shotEnemy = function(){
            //drawHeroBullet(hero);
            //heroBullet = new HeroBullet();
            switch(this.direct){
                case 0:
                //实例化一个子弹对象
                heroBullet = new HeroBullet(this.x+10,this.y,this.speed);
                break;
                case 1:
                heroBullet = new HeroBullet(this.x+30,this.y+9,this.speed);
                break;
                case 2:
                heroBullet = new HeroBullet(this.x+9,this.y+30,this.speed);
                break;
                case 3:
                heroBullet = new HeroBullet(this.x,this.y+9,this.speed);
                break;
            }
             heroBullets.push(heroBullet);
        }
    }

    //定义 敌人的坦克
    function EnemyTank(x,y,speed,direct,color){
        this.enemyTank = Tank;
        this.color = color;
        this.enemyTank(x,y,speed,direct);
    }

    function HeroBullet(x,y,speed,direct){
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.direct = direct;
        
    }
    
    function drawHeroBullet(){
        for(var j=0;j<heroBullets.length;j++){
            ctx.fillStyle = 'blue';
            var heroBullet = heroBullets[j];
            ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
        }
    }
    
    //把生成坦克的代码封装到一个函数中
    function drawTank(hero){
        switch(hero.direct){
            case 0:
            case 2:
            ctx.fillStyle = hero.color[1];
            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[0];
            ctx.beginPath();
            ctx.arc(hero.x+10,hero.y+15,3,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
            //画出炮筒(直线)
            ctx.strokeStyle = hero.color[0];
            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[1];
            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[0];
            ctx.beginPath();
            ctx.arc(hero.x+15,hero.y+10,3,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
            //画出炮筒(直线)
            ctx.strokeStyle = hero.color[0];
            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();
        }
    }
 

For more complete information about compiler optimizations, see our Optimization Notice.