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. Codeforces 538 C. Tourist's Notes

    C. Tourist's Notes   time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  2. RabbitMQ (一) 简介和基本概念

    原文:https://blog.csdn.net/vbirdbest/article/details/78577043 一.简介 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序 ...

  3. 【kmp算法】uva11475 Extend to Palindrome

    就把每个串倒过来,和原串匹配,看最后能匹配多少就行. #include<cstring> #include<algorithm> #include<cstdio> ...

  4. 【带修莫队】bzoj2120 数颜色

    块大小为n2/3. 把询问和修改分开. 每次两个询问之间的修改进行暴力转移,如果修改在上一次询问的区间里,就会对当前状态形成影响. 好慢. #include<cstdio> #includ ...

  5. 【进制转换】codevs 1474 十进制转m进制

    #include<cstdio> using namespace std; ],en; int main() { scanf("%d%d",&n,&m) ...

  6. 1.7（学习笔记）过滤器(Fliter)

    一.过滤器(Fliter)简介 过滤器是位于客户端与服务器之间的滤网,在访问资源时会经过一系列的过滤器, 满足条件则放行,不满足条件的将其拦截. 过滤器可以看做是一个特殊的Servlet,设置了过滤器 ...

  7. Exercise01_01

    public class print{ public static void main(String[] args){ System.out.println("Welcome to Java ...

  8. 微服务之SpringCloud实战（五）：SpringCloud Eureka详解

    Eureka详解 在第三节高可用中,实际已经讲解了服务的注册,只不过注册的是Eureka本身,原理相同,通过这几篇文章我相信大家对Eureka有了一定的了解,三个核心角色:服务注册中心.服务提供者和服 ...

  9. Bean的装配方式

    (一) 知识点:Spring容器支持多种形式的Bean的装配方式,比如基于XML的装配,基于注解的装配和自动装配(最常用的就是基于注解的装配) Spring提供了两种基于xml的装配方式:设值注入(S ...

  10. Debian安装VirtualBox增强工具

    切换到root用户: apt-get install build-essential 或者 apt-get install gcc make apt-get install dkms apt-get ...