坦克尺寸如下：

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <title>坦克大战</title>
  6.  </head>
  7.  <body onkeydown="tankMove()">
  8.      <canvas id="canvas" width="" height="" style="border:1px solid red; display:block; margin:50px auto;">浏览器不支持</canvas>
  9.      <script type="text/javascript">
  10.          var canvas = document.getElementById("canvas");
  11.          var context = canvas.getContext("2d");
  12.          //构造方法，创建一个坦克类
  13.          function Tank(x, y, direct, speed) {
  14.              this.x = x;
  15.              this.y = y;
  16.              this.direct = direct;
  17.              this.speed = speed;
  18.              this.moveUp = function () {
  19.                  this.y -= this.speed;
  20.              }
  21.              this.moveDown = function () {
  22.                  this.y += this.speed;
  23.              }
  24.              this.moveLeft = function () {
  25.                  this.x -= this.speed;
  26.              }
  27.              this.moveRight = function () {
  28.                  this.x += this.speed;
  29.              }
  30.          }
  31.          var hero = new Tank(, , , );
  32.          function drawTank(tank) {
  33.              switch (tank.direct) {
  34.                  case :
  35.                  case :
  36.                      //向左，向右
  37.                      //清空画布
  38.                      context.clearRect(, , canvas.width, canvas.height);
  39.                      //开始画坦克
  40.                      //上轮
  41.                      context.fillStyle = "red";
  42.                      context.fillRect(hero.x, hero.y, , );
  43.                      context.fill();
  44.                      //下轮
  45.                      context.fillRect(hero.x, hero.y + , , );
  46.                      context.fill();
  47.                      //中间
  48.                      context.fillStyle = "green";
  49.                      context.fillRect(hero.x + , hero.y + , , );
  50.                      context.fill();
  51.                      //盖子
  52.                      context.beginPath()//加个开始，不然炮筒会粘连
  53.                      context.fillStyle = "blue";
  54.                      context.arc(hero.x + , hero.y + , , ,  * Math.PI);
  55.                      context.fill();
  56.                      context.closePath();
  57.                      //炮筒
  58.                      context.beginPath();
  59.                      context.strokeStyle = "black";
  60.                      context.lineWidth = "0.5";
  61.                      context.moveTo(hero.x + , hero.y + );
  62.                      if (tank.direct == ) {
  63.                          context.lineTo(hero.x, hero.y + );
  64.                      } else if (tank.direct == ) {
  65.                          context.lineTo(hero.x + , hero.y + );
  66.                      }
  67.                      context.stroke();
  68.                      context.closePath();
  69.                      break;
  70.                  case :
  71.                  case :
  72.                      //向上，向下
  73.                      //清空画布
  74.                      context.clearRect(, , canvas.width, canvas.height);
  75.                      //开始画坦克
  76.                      //左轮
  77.                      context.fillStyle = "red";
  78.                      context.fillRect(hero.x, hero.y, , );
  79.                      context.fill();
  80.                      //右轮
  81.                      context.fillRect(hero.x + , hero.y, , );
  82.                      context.fill();
  83.                      //中间
  84.                      context.fillStyle = "green";
  85.                      context.fillRect(hero.x + , hero.y + , , );
  86.                      context.fill();
  87.                      //盖子
  88.                      context.beginPath()//加个开始，不然炮筒会粘连
  89.                      context.fillStyle = "blue";
  90.                      context.arc(hero.x + , hero.y + , , ,  * Math.PI);
  91.                      context.fill();
  92.                      //炮筒
  93.                      context.beginPath();
  94.                      context.strokeStyle = "black";
  95.                      context.lineWidth = "0.5";
  96.                      context.moveTo(hero.x + , hero.y + );
  97.                      if (tank.direct == ) {
  98.                          context.lineTo(hero.x + , hero.y);
  99.                      } else if (tank.direct == ) {
  100.                          context.lineTo(hero.x + , hero.y + );
  101.                      }
  102.                      context.stroke();
  103.                      break;
  104.                  default:
  105.  
  106.              }
  107.  
  108.          }
  109.          function tankMove() {
  110.              switch (event.keyCode) {
  111.                  case ://左A
  112.                      hero.direct = ;
  113.                      hero.moveLeft();
  114.                      break;//不要忘记break！
  115.                  case ://右D
  116.                      hero.direct = ;
  117.                      hero.moveRight();
  118.                      break;
  119.                  case ://上W
  120.                      hero.direct = ;
  121.                      hero.moveUp();
  122.                      break;
  123.                  case ://下S
  124.                      hero.direct = ;
  125.                      hero.moveDown();
  126.                      break;
  127.                      //68 87 83
  128.                  default:
  129.              }
  130.              drawTank(hero);
  131.              //alert(event.keyCode);
  132.          }
  133.          drawTank(hero);
  134.      </script>
  135.  </body>
  136.  </html>

HTML5坦克大战（1）绘制坦克的更多相关文章

  1. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  2. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测下

    上篇我们完成了地图的信息获取和碰撞检测,这篇我们整合到程序中. 在这之前我们改造一下Tank类,使它更加模块化,共容易理解: 1.改造后的Tank类声明如下: class Tank : public ...

  3. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示

    1.先定义坦克的一些属性 class Tank : public CCSprite { public : Tank(); ~Tank(); static Tank* createTankWithTan ...

  4. HTML坦克大战学习02---坦克动起来

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. Java坦克大战 (七) 之图片版

    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...

  6. HTML5-坦克大战一完成坦克上下左右移动的功能（一）

    坦克大战一完成坦克上下左右移动的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. HTML5坦克大战（2）绘制坦克复习

    html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

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

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

  9. HTML5坦克大战（韩顺平版本）

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

随机推荐

  1. Tile based Rendering 二 tbr and tbdr 优化建议tiled based deferred rendering

    http://www.seas.upenn.edu/~pcozzi/OpenGLInsights/OpenGLInsights-TileBasedArchitectures.pdf tbr 和tbdr ...

  2. humanoid ik unity 配件 animation的问题

    遇到这样一个问题 想给角色设置ik 以实现代码控制的 更为自然的 角色动作 比如角色头跟随点击转动 身体也有相应扭转 https://docs.unity3d.com/Manual/InverseKi ...

  3. [置顶] (奇迹冬瓜)坦克大战[MFC框架]

    经过二次整合 重新放出MFC框架下的坦克大战 采用小窗口 多线程 双缓冲 动画帧化 碰撞检测 接口封装 混音 事件延迟等 力求做到代码与美工的双向化 开场动画 界面一 界面二 游戏界面 结束动画 零积 ...

  4. 使用kubeadm部署Kubernetes v1.13.3

    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: 1. 安装要求 在开始之前,部署Kubernetes集群 ...

  5. [HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components

    HTMLTemplates are part of the web components specification. In this lesson we will learn what are HT ...

  6. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-为什么无法打开官方范例的项目，打开tszip文件时提示尝试越过结尾怎么办

    打开新的解决方案,找到tszip文件   提示错误Advanced Setting时越过结尾   到这里一般VS会卡死   但是我们已经可以得到解压出来的文件夹,其中包含PLC的完整项目文件夹,可以新 ...

  7. kindeditor 图片上传插件

    富文本编辑器,kindeditor是比较好用的一款.需要的功能都有,文档.demo也详细.有什么功能去官网看一眼就好. 官网:http://kindeditor.net/ 一些好用的如图片上传,kin ...

  8. wamp server php环境绑定域名

    思路: 用花生壳做动态域名解析 用wamp server 在本机上做一个 php web server; 这样就可以让一台内网电脑做一个测试用的服务器: 一:wamp server php环境绑定域名 ...

  9. 【DB2】If 'db2' is not a typo you can run the following command to lookup the package that contains the binary: command-not-found db2 bash: db2: command not found

    数据库安装以后,db2报错如下: If 'db2' is not a typo you can run the following command to lookup the package that ...

  10. Spring MVC坑汇总+Stackoverflow巧解答

    1.http://stackoverflow.com/questions/25598406/spring-annotaion-autowired-inside-methods Q: Autowire ...