Html5之坦克大战(001)

html文件

View Code 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body onkeydown="getCommand()">
        <h1>alin tank game</h1>
        <!--坦克大战的战场-->
        <canvas id="tankmap" width="400px" height="300px" style="background:black">
        </canvas>
        <!--把tankgame2.js引入到本页面-->
        <script type="text/javascript" src="tankgame3.js"></script>
        <script type="text/javascript">
            
            //1.得到画布
            var canvas1 = document.getElementById("tankmap");
            //2.得到绘图上下文
            var cxt = canvas1.getContext("2d");
            
            //坦克相关的变量
            //var heroX = 90;
            //var heroY = 90;
            //坦克方向规定 向上0 向右1 向下2 向左3
            //定义英雄坦克对象
            var hero = new Hero(60,60,0,heroColor);
            
            
            //定义敌人的坦克对象
            var enemyTanks = new Array();
            for(var i = 0; i < 3; i++)
            {
                var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);
                enemyTanks[i] = enemyTank;
                
            }
            
            //打开页面时候要先刷新坦克作战区域
            flashTankMap();
            
            //定时刷新坦克作战区域
            //每隔一段时间刷新坦克作战区的元素(英雄坦克，敌人坦克，子弹，草坪等)
            function flashTankMap()
            {
                //清屏
                cxt.clearRect(0,0,400,300);
                //画出英雄坦克
                drawTank(hero);
                //画出敌人坦克
                for(var i = 0; i < 3; i++)
                {
                    drawTank(enemyTanks[i]);
                }                
            }
            
            //接收用户按键命令的函数
            function getCommand()
            {        
                //alert("you press button");
                //如何知道玩家按下的是哪个键呢
                //当按下键后，event对象就会传递给事件处理函数
                var code = event.keyCode;
                //alert("code = " + code);
                switch(code)
                {
                    case 87:
                        //hero.y -= hero.speed;
                        hero.moveUp();
                        break;
                    case 68:
                        //hero.x += hero.speed;
                        hero.moveRight();
                        break;
                    case 83:
                        //hero.y += hero.speed;
                        hero.moveDown();
                        break;
                    case 65:
                        //hero.x -= hero.speed;
                        hero.moveLeft();
                        break;
                }
                
                //刷新坦克作战区域，重新绘制作战区元素
                flashTankMap();        
            }
        </script>
    </body>
</html>

javascript文件

View Code 
//定义包含有两个颜色的数组
//英雄坦克颜色
var heroColor = new Array("#ba9658","fef26e");
//敌人坦克颜色
var enemyColor = new Array("#00a2b5","#00fefe");
//坦克公共类
function Tank(x,y,direct,color)
{
    this.x = x;
    this.y = y;
    this.speed = 1;
    this.direct = direct;
    //坦克体和坦克盖子的颜色
    this.color = color;
                
    //向上移动
    this.moveUp = function()
    {
        this.y -= this.speed;
        this.direct = 0;
    }
    //向右移动
    this.moveRight = function()
    {
        this.x += this.speed;
        this.direct = 1;
    }
    //向下移动
    this.moveDown = function()
    {
        this.y += this.speed;
        this.direct = 2;
    }
    //向左移动
    this.moveLeft = function()
    {
        this.x -= this.speed;
        this.direct = 3;
    }
}

//定义英雄坦克类，x横坐标，y纵坐标，direct方向
function Hero(x,y,direct,color)
{
    //通过对象冒充的方式来继承坦克类
    this.tank = Tank;
    this.tank(x,y,direct,color);            
}            

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

//把绘制坦克封装成一个函数，将来可以作为成员函数
//将来这个函数可以画自己的坦克，也可以画敌人的坦克
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.fillStyle = tank.color[1];
            cxt.arc(tank.x+10,tank.y+15,4,0,360,true);
            cxt.fill();
            //画出坦克炮筒
            //设置线条颜色
            cxt.strokeStyle = tank.color[1];
            cxt.lineWidth = 2;
            cxt.beginPath();
            cxt.moveTo(tank.x+10,tank.y+15);
            if(tank.direct == 0)
            {
                //向上
                cxt.lineTo(tank.x+10,tank.y);
            }
            else if(tank.direct == 2)
            {
                //向下
                cxt.lineTo(tank.x+10,tank.y + 30);
            }
            cxt.closePath();
            cxt.stroke();
            break;
        }
        //方向向右和向左
        case 1:
        case 3:
        {
            //使用绘图技术画出坦克
            //设置颜色
            cxt.fillStyle = tank.color[0];
            //画出坦克左边的矩形
            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.fillStyle = tank.color[1];
            cxt.arc(tank.x+15,tank.y+10,4,0,360,true);
            cxt.fill();
            //画出坦克炮筒
            //设置线条颜色
            cxt.strokeStyle = tank.color[1];
            cxt.lineWidth = 2;
            cxt.beginPath();
            cxt.moveTo(tank.x+15,tank.y+10);
            if(tank.direct == 1)
            {
                //向右
                cxt.lineTo(tank.x+30,tank.y+10);
            }
            else if(tank.direct == 3)
            {
                //向左
                cxt.lineTo(tank.x,tank.y + 10);
            }
            cxt.closePath();
            cxt.stroke();
            break;
        }    
    }
}
posted @ 2012-10-06 09:38  雪中飞雁  阅读(126)  评论(0)    收藏  举报