HTML坦克大战学习02---坦克动起来

浏览数：22 / 时间：2015年06月09日

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>
<body onkeydown="getCommand()">
    <canvas id="tankMap" width="400px" height="300px" style="background-color: black"></canvas>
    <script type="text/javascript">

        //得到画布
        var canvas1 = document.getElementById("tankMap");
        //取得画布画笔对象
        var cxt = canvas1.getContext("2d");
        //定义一个Hero类
        //x表示横坐标，主表示纵坐标
        function Hero(x, y, direct, speed) {
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.direct = direct;

            //向上
            this.moveUp = function () {
                this.y -= this.speed;
            }
            //向右
            this.moveRight = function () {
                this.x += this.speed;
            }
            //向下
            this.moveDown = function () {
                this.y += this.speed;
            }
            //向左移
            this.moveLeft = function () {
                this.x -= this.speed;
            }

        }
        //我的坦克 w表示向上,d表示向右 s表示向下 a表示向左

        var hero = new Hero(140, 140, 0, 10);
        //先画出坦克
        darwTank(hero);

        //绘制坦克对象
        function darwTank(hero) {
            //画出坦克
            cxt.fillStyle = "#DED284";
            //画出左面
            cxt.fillRect(hero.x, hero.y, 5, 30);
            //画出右边
            cxt.fillRect(hero.x + 15, hero.y, 5, 30);
            //中间矩形
            cxt.fillRect(hero.x + 6, hero.y + 5, 8, 20);
            //画出坦克的盖子
            cxt.fillStyle = "#FFD972";
            cxt.arc(hero.x + 10, hero.y + 15, 4, 0, 360, true);
            cxt.fill();
            //车出炮线
            cxt.strokeStyle = "#FFD972";
            cxt.lineWidth = 1.5;
            cxt.beginPath();

            cxt.moveTo(hero.x + 10, hero.y + 15);
            cxt.lineTo(hero.x + 10, hero.y);
            cxt.closePath();
            cxt.stroke();
        }


        //接收键盘命令
        function getCommand() {

            var code = event.keyCode;
            //alert(code);
            switch (code) {
                case 87:
                    hero.moveUp();
                    break;
                case 68:
                    hero.moveRight();
                    break;
                case 83:
                    hero.moveDown();
                    break;
                case 65:
                    hero.moveLeft();
                    break;
            }
            cxt.clearRect(0, 0, 400, 300);
            darwTank(hero);
        }
    </script>
</body>
</html>