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. Python 统一动态创建多个model对应的modelForm类（type()函数）

    一.ModelForm的用法 ModelForm对用户提交的数据有验证功能,但比Form要简单的多 from django.forms import ModelForm # 导入ModelFormcl ...

  2. Python爬链接

    # -*- coding: utf-8 -*- """ Created on Wed Jan 11 17:21:54 2017 @author: PE-Monitor & ...

  3. 主席树 STL+二分【p3939】数颜色

    Description 小 C 的兔子不是雪白的,而是五彩缤纷的.每只兔子都有一种颜色,不同的兔子可能有 相同的颜色.小 C 把她标号从 \(1\) 到 \(n\) 的 \(n\) 只兔子排成长长的一 ...

  4. JMeter之分布式部署

    转自:http://www.cnblogs.com/yangxia-test/p/4016277.html Jmeter 是Java 应用,对于CPU和内存的消耗比较大,因此,当需要模拟数以千计的并发 ...

  5. java.lang.ClassCastException: com.sun.proxy.$Proxy13 cannot be cast to sm.dao.UserDao

    在Spring中添加事物管理以后出现的问题 源代码 ApplicationContext applicationContext = new ClassPathXmlApplicationContext ...

  6. 【最近公共祖先】【线段树】URAL - 2109 - Tourism on Mars

    Few people know, but a long time ago a developed state existed on Mars. It consisted of n cities, nu ...

  7. hadoop map（分片）数量确定

    之前学习hadoop的时候,一直希望可以调试hadoop源码,可是一直没找到有效的方法,今天在调试矩阵乘法的时候发现了调试的方法,所以在这里记录下来. 1)事情的起因是想在一个Job里设置map的数量 ...

  8. [OpenJudge8471][划分DP]切割回文

    切割回文 总时间限制: 1000ms 内存限制: 65536kB [描述] 阿福最近对回文串产生了非常浓厚的兴趣. 如果一个字符串从左往右看和从右往左看完全相同的话,那么就认为这个串是一个回文串.例如 ...

  9. Mybatis添加&&删除&&更新

    mapper <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC & ...

  10. 键盘事件OnKeyListener

    1.效果图:就是在文本框中输入A,则显示A,输入B,则显示B.... (1)activity_main.xml <?xml version="1.0" encoding=&q ...