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之坦克大战游戏开发的更多相关文章

  1. 小强的HTML5移动开发之路（7）——坦克大战游戏1

    来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...

  2. 小强的HTML5移动开发之路（8）——坦克大战游戏2

    来自:http://blog.csdn.net/cai_xingyun/article/details/48629015 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接 ...

  3. 《HTML5经典坦克大战》游戏（代码）

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

  4. 基于HTML5坦克大战游戏简化版

    之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...

  5. cocos2d-x游戏开发系列教程-坦克大战游戏启动界面的编写

    用前面介绍的方法,创建一个cocos2d-x项目,可以看到新项目内容如下图:

  6. 3D坦克大战游戏源码

    3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...

  7. 3D坦克大战游戏iOS源码

    3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...

  8. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（下）

    在飞机大战游戏开发中遇到的问题和解决方法: 1.在添加菜单时,我要添加一个有背景的菜单,需要在菜单pMenu中添加一个图片精灵,结果编译过了但是运行出错,如下图: 查了很多资料,调试了很长时间,整个人 ...

  9. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）

    接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...

随机推荐

  1. 识别浏览器的JavaScript引擎的方法

    答案来自StackOverflow,打开这个网页http://jsbin.com/opuvas即可,这个网页也是答题者自己写的. 二维码是这个网址.网页内有统计访问量,作者想知道对多少人有用,建议尊重 ...

  2. HDU 1020.Encoding-字符压缩

    Encoding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  3. 大数据技术之_16_Scala学习_06_面向对象编程-高级+隐式转换和隐式值

    第八章 面向对象编程-高级8.1 静态属性和静态方法8.1.1 静态属性-提出问题8.1.2 基本介绍8.1.3 伴生对象的快速入门8.1.4 伴生对象的小结8.1.5 最佳实践-使用伴生对象解决小孩 ...

  4. 8、Flask实战第8天：add_url_rule和app.route原理

    之前我们使用@app.route这个装饰器来把视图函数和url绑定 @app.route('/') def hell_world(): return 'hello world' 而且我们可以通过url ...

  5. NULL always return false

    Any comparison with null is false - = and <>, >, <, and so on. You cannot use null in an ...

  6. POJ 3293 Rectilinear polygon（几何基础）

    [题目链接] http://poj.org/problem?id=3293 [题目大意] 给出一些点,每个点只能向外引出一条平行X轴,和Y轴的边, 问能否构成一个闭多边形,如果能,返回多边形的总边长, ...

  7. 【二分答案】bzoj1639 [Usaco2007 Mar]Monthly Expense 月度开支

    #include<cstdio> using namespace std; #define N 100001 int n,m,a[N]; bool check(int x) { int n ...

  8. 【线段树】bzoj3747 [POI2015]Kinoman

    题解:http://www.cnblogs.com/zyfzyf/p/4105184.html 一.下传标记写法 #include<cstdio> #include<algorith ...

  9. Python中内置的日志模块logging用法详解

    logging模块简介 Python的logging模块提供了通用的日志系统,可以方便第三方模块或者是应用使用.这个模块提供不同的日志级别,并可以采用不同的方式记录日志,比如文件,HTTP GET/P ...

  10. 微服务之SpringCloud实战（二）：SpringCloud Eureka服务治理

    服务治理 SpringCloud Eureka是SpringCloud Netflix微服务套件的一部分,它基于Netflix Eureka做了二次封装,主要完成微服务的服务治理功能,SpringCl ...