html5学习--实现坦克可以连续发射子弹

js代码：

//定义颜色的全局变量
var heroColors = new Array("#BA9658", "#FEF26E");
var enemyColors = new Array("#00A2B5", "#00FEFE");
//其他的坦克，这里的拓展性还可以


//子弹类
function Bullet(x, y, direct) {
    this.x = x;
    this.y = y;
    this.speed = 1;
    this.direct = direct;
    this.timer = null;
    this.live = true;
    this.run = function run() {
        //先判断子弹是否已经到边界
        if (this.x <= 0 || this.x >= 400 || this.y <= 0 || this.y >= 300) {
            //子弹停止
            window.clearInterval(this.timer);
            this.live = 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("tankMap").innerText = "子弹x=" + this.x + "子弹=y" + this.y;
    }
}


function Tank(x, y, direct, color) {
    this.x = x;
    this.y = y;
    this.speed = 8;
    this.direct = direct;
    this.color = color;
    //up
    this.moveUp = function () {
        if (2 != this.direct) {
            if (this.y - this.speed < 0)
                this.y = 0;
            else
                this.y -= this.speed;
        }
        this.direct = 0;
    }
    //right
    this.moveRight = function () {
        if (3 != this.direct) {
            if (this.x + this.speed > 400 - 30)
                this.x = 400 - 30;
            else
                this.x += this.speed;
        }
        this.direct = 1;
    }
    //down
    this.moveDown = function () {
        if (0 != this.direct) {
            if (this.y + this.speed >= 300 - 30)
                this.y = 300 - 30;
            else
                this.y += this.speed;
        }
        this.direct = 2;
    }
    //left
    this.moveLeft = function () {
        if (1 != this.direct) {
            if (this.x - this.speed < 0)
                this.x = 0;
            else
                this.x -= this.speed;
        }
        this.direct = 3;
    }
}


//画出自己的子弹，你也尅一把该函数封装到HeroTank类中
function drawHeroBullet() {
    //要画出所有子弹
    for (var i = 0; i < heroBullets.length; i++) {
        var heroBullet = heroBullets[i];
        if (null != heroBullet && true == heroBullet.live) {
            cxt.fillStyle = "#FEF26E";
            cxt.fillRect(heroBullet.x, heroBullet.y, 2, 2);
        }
    }
}


//把绘制坦克封装成一个函数，将来可以作为成员函数
function drawTank(tank) {
    switch (tank.direct) {
        case 0:
        case 2:
            //画出自己的坦克，使用前面的绘图技术
            //设置颜色
            cxt.fillStyle = tank.color[0];
            //使用先死--》后活(初学者最好使用这个方法)
            //先画出矩形
            cxt.fillRect(tank.x, tank.y, 5, 30);
            //画出右边的矩形（这时请大家思路-》一定要定义一个参照点）
            cxt.fillRect(tank.x + 15, tank.y, 5, 30);
            //画出中间矩形
            cxt.fillRect(tank.x + 6, tank.y + 5, 8, 20);
            //画出中间的盖子
            cxt.beginPath();
            cxt.fillStyle = tank.color[1];
            cxt.arc(tank.x + 10, tank.y + 15, 4, -30, 360, true);
            cxt.closePath();
            cxt.fill();
            //画出炮筒
            cxt.strokeStyle = tank.color[1];
            cxt.lineWidth = 1.5;
            cxt.moveTo(tank.x + 10, tank.y + 15);
            if (0 == tank.direct)
                cxt.lineTo(tank.x + 10, tank.y);
            else if (2 == tank.direct)
                cxt.lineTo(tank.x + 10, tank.y + 30);
            cxt.stroke();
            break
        case 1:
        case 3:
            //画出自己的坦克，使用前面的绘图技术
            //设置颜色
            cxt.fillStyle = "#BA9658";
            //使用先死--》后活(初学者最好使用这个方法)
            //先画出矩形
            cxt.fillRect(tank.x, tank.y, 30, 5);
            //画出右边的矩形（这时请大家思路-》一定要定义一个参照点）
            cxt.fillRect(tank.x, tank.y + 15, 30, 5);
            //画出中间矩形
            cxt.fillRect(tank.x + 5, tank.y + 6, 20, 8);
            //画出中间的盖子
            cxt.beginPath();
            cxt.fillStyle = "#FEF26E";
            cxt.arc(tank.x + 15, tank.y + 10, 4, -30, 360, true);
            cxt.closePath();
            cxt.fill();
            //画出炮筒
            cxt.strokeStyle = "#FEF26E";
            cxt.lineWidth = 1.5;
            cxt.moveTo(tank.x + 15, tank.y + 10);
            if (1 == tank.direct)
                cxt.lineTo(tank.x + 30, tank.y + 10);
            else if (3 == tank.direct)
                cxt.lineTo(tank.x, tank.y + 10);
            cxt.stroke();
            break
    }
}


//定义一个hero类
//x:横坐标 y:纵坐标
function HeroTank(x, y, direct, color) {
    //下面两句话的作用是：通过对象冒充达到继承的效果
    this.tank = Tank;
    this.tank(x, y, direct, color);


    //增加一个函数射击敌人坦克
    this.shotEnemy = function () {
        //创建子弹,子弹的位置应该和坦克的方向有关，并且与坦克的方向是一致的
        //this.x就是当前hero的横坐标
        switch (this.direct) {
            case 0:
                //alert("0");
                heroBullet = new Bullet(this.x + 9, this.y, this.direct);
                break;
            case 1:
                //alert("1");
                heroBullet = new Bullet(this.x + 30, this.y + 9, this.direct);
                break;
            case 2:
                //alert("2");
                heroBullet = new Bullet(this.x + 9, this.y + 30, this.direct);
                break;
            case 3:
                //alert("3");
                heroBullet = new Bullet(this.x, this.y + 9, this.direct);
                break
        }
        //把这个子弹放入到数组中-->push函数
        heroBullets.push(heroBullet);
        //调用我们的子弹run
        //这里有一个技术难度比较大：如果按下面的方法，则所有的子弹共享一个定时器
        //var timer = window.setInterval("heroBullet.run()", 50);
        //heroBullet.timer = timer;
        //按这个方法，所有的子弹都有独立的定时器
        var timer = window.setInterval("heroBullets[" + (heroBullets.length - 1) + "].run()", 50);
        heroBullets[heroBullets.length - 1].timer = timer;
        
    }
}
//定义一个敌人的坦克
function EnemyTank(x, y, direct, color) {
    this.tank = Tank;
    this.tank(x, y, direct, color);
}

html代码：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8"/>
<title></title>
</head>
<body οnkeydοwn="getCommand()">
    <h1>html5-经典的坦克大战</h1>
    <canvas id ="tankMap" width="400px" height="300px"
        style="background-color:black">
    </canvas>
    <!--把tankGams.js引入到本页面-->
    <script type="text/javascript" src="..\\js\\tankGame3.js"></script>
    <script type="text/javascript">
        var canvas1 = document.getElementById("tankMap");
        var cxt = canvas1.getContext("2d");
        //我的坦克hero
        var hero = new HeroTank(40, 40, 0, heroColors);
        //定义个子弹数组
        var heroBullets = new Array();
        //定义敌人的坦克（敌人的坦克有多少？思路：是单个单个的定义，还是放在数组中）
        var enemyTanks = new Array();
        //先死后活，定义3个，后面我们打敌人坦克的数量，做出变量
        for (var i = 0; i < 3; i++)
        {
            //创建一个坦克
            var enemyTank = new EnemyTank((i + 1) * 50, 0, 2, enemyColors);
            //把坦克放进数组中
            enemyTanks[i] = enemyTank;
        }
        //打开页面先刷新一次
        flashTankMap();
        //专门写一个函数，用于定时刷新我们的作战区,把要在作战区出现的元素(自己的坦克、
        //敌人的坦克、子弹、炸弹，障碍物)
        function flashTankMap() {
            cxt.clearRect(0, 0, 400, 300);
            //我的坦克
            drawTank(hero);
            //画出自己的子弹
            //子弹飞效果是怎么出现的：首先我们应该每隔一定时间就去刷新作战区，如果在书信的时候，子弹坐标
            //变换了，给人的感觉就是子弹在飞
            drawHeroBullet();
            //敌人所有的坦克
            for (var i = 0; i < 3; i++) {
                drawTank(enemyTanks[i]);
            }
        }


        //这是一个接收用户按键的函数
        function getCommand() {
            var code = event.keyCode;
            switch (code) {
                case 87://up
                    hero.moveUp();
                    break;
                case 68://right
                    hero.moveRight();
                    break;
                case 83://down
                    hero.moveDown();
                    break;
                case 65://left
                    hero.moveLeft();
                    break;
                case 74://Bullet
                    hero.shotEnemy();
                    break;
            }
            //出发这个函数flashTankMap();
            flashTankMap();
            //重新绘制所有的敌人的坦克，你可以在这里写代码（）
            
        }
        //每隔100毫秒去刷新一次作战区
        window.setInterval("flashTankMap()", 100);
    </script>
</body>
</html>