HTML5之坦克大战游戏开发

1.在使用arc方法进行画圆时,在IE9+，FF，Safari，Chrome等已经支持HTML5标准的浏览器中进行渲染时，采用逆时针方向画时，也就是说

arc(x, y, radius, startAngle, endAngle, counterclockwise) 中 counterclockwise值为true时，渲染存在问题。

解决方法：采用顺时针，即counterclockwise值为false

补充说明：在360安全浏览器中两种方法都可以。

2.移动坦克

 <!Doctype html>

 <html>

 <head>

    <meta charset='utf-8'/>

 </head>

 <body onkeydown="moveTank()">

     <canvas id='canvas' width='500px' height='500px' style='background-color:black'></canvas>

     <script type="text/javascript">

         //获取画布

         var canvas_1 = document.getElementById("canvas");

        //获取上下文

        var cxt = canvas_1.getContext("2d");

        //坦克构造函数

        function Tank(x,y,direct)

        {

            this.x = x;

            this.y = y;

            this.speed = 1;

            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;

            }

        }

        var tank = new Tank(10,10,0);

        drawTank(tank);

        //画坦克

        function drawTank(tank)

        {

             //设置画笔颜色

            cxt.fillStyle="#DED284";

            //画坦克左边轮子

            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="#FFD972";

            cxt.arc(tank.x+10,tank.y+15,4,0,360,false);

            cxt.fill();

            //画坦克炮筒

            cxt.strokeStyle="#FFD972";

            cxt.lineWidth = 2;

            cxt.beginPath();

            cxt.moveTo(tank.x+10,tank.y+15);

            cxt.lineTo(tank.x+10,tank.y);

            cxt.closePath();

            cxt.stroke();

        }

       //移动坦克

       function moveTank()

       {

           var code = event.keyCode;

           switch(code)

           {

               case 87: tank.moveUp();break;

               case 68: tank.moveRight();break;

               case 83: tank.moveDown();break;

               case 65: tank.moveLeft();break;

           }

           //清除画布内容

           cxt.clearRect(0,0,500,500);

           drawTank(tank);

       }

     </script>

 </body>

 </html>

3.根据按键的方向来画坦克(运用OOP思想)

注：先插播一段上、下、左、右按键的js代码

             //获取canvas dom对象

             var can = document.getElementById("move");

             //获取画笔对象

             var cxt = can.getContext("2d");

             var ballX = 30;

             var ballY = 30;

             drawBall();

             //画圆

             function drawBall()

             {

                 cxt.beginPath();

                 cxt.fillStyle = "red";

                 cxt.arc(ballX,ballY,10,0,360,false);

                 cxt.closePath();

                 cxt.fill();

             }

             function moveBall()

             {

                 var code = event.keyCode;

                 switch(code)

                 {

                     case 87: ballY--;break;

                     case 83: ballY++;break;

                     case 65: ballX--;break;

                     case 68: ballX++;break;

                 }

                 //每次重画之前要清除画布

                 cxt.clearRect(0,0,400,300);

                 drawBall();

             }

在drawTank方法中通过语法switch case 来根据按键方向画tank.关键是要找准参考点

  function drawTank(tank)

  {

      switch(tank.direct)

     {

            //向上

             case 0:

            //向下

             case 2:

                //添加画tank代码

                //cxt

             break;

            //向右

             case 1:

            //向左

             case 3:

             break;

     }

 }

第一阶段学习汇报，哈哈，my tank moves freely

 <!Doctype html>

 <html>

 <head>

    <meta charset='utf-8'/>

    <script type="text/javascript" src="tank.js"></script>

    <script type="text/javascript" src="move.js"></script>

 </head>

 <body onkeydown="moveTank()" onload="initTank()">

     <canvas id='canvas' width='500px' height='500px' style='background-color:black'></canvas>

 </body>

 </html>

 //坦克构造函数

 function Tank(x,y,direct)

 {

     this.x = x;

     this.y = y;

     this.speed = 1;

     this.direct = direct;

     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;

     }

 }

   var tank;

   var canvas_1;

   var cxt;

  function initTank()

  {

      //获取画布

      canvas_1 = document.getElementById("canvas");

      //获取上下文

      cxt = canvas_1.getContext("2d");

      tank = new Tank(10,10,0);

      drawTank(tank);

  }

  //画坦克

 function drawTank(tank)

 {

     switch(tank.direct)

     {

         //向上和向下

         case 0:

         case 2:

             //设置画笔颜色

             cxt.fillStyle="#DED284";

             //画坦克左边轮子

             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="#FFD972";

             cxt.arc(tank.x+10,tank.y+15,4,0,360,false);

             cxt.fill();

             //画坦克炮筒

             cxt.strokeStyle="#FFD972";

             cxt.lineWidth = 2;

             cxt.beginPath();

             cxt.moveTo(tank.x+10,tank.y+15);

             //上和下主要就是tank的炮筒的方向的改变

             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.closePath();

             cxt.stroke();

             break;

             //向左和向右

             case 1:

             case 3:

                 cxt.fillStyle="#DED284";

                 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="#FFD972";

                 cxt.arc(tank.x+15,tank.y+10,4,0,360,false);

                 cxt.fill();

                 cxt.strokeStyle="#FFD972";

                 cxt.lineWidth = 2;

                 cxt.beginPath();

                 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.closePath();

                 cxt.stroke();

                 break;

            }

        }

 //移动坦克

 function moveTank()

 {

     var code = event.keyCode;

     switch(code)

     {

         case 87: tank.moveUp();break;

         case 68: tank.moveRight();break;

         case 83: tank.moveDown();break;

         case 65: tank.moveLeft();break;

     }

     //清除画布内容

     cxt.clearRect(0,0,500,500);

     drawTank(tank);

 }

巴特西

HTML5之坦克大战游戏开发

最新文章

热门文章