html代码：

  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.      <script src="tank.js"></script>
  7.  </head>
  8.  <body onkeydown="moveTank(hero)">
  9.      <canvas id="canvas" width="" height="" style="border:1px solid red; display:block; margin: 50px auto; background-color:black;"></canvas>
  10.  
  11.      <script type="text/javascript">
  12.  
  13.          var canvas = document.getElementById("canvas");
  14.          var context = canvas.getContext("2d");
  15.          var hero = new Tank(, , , );
  16.  
  17.          //创建hero对象
  18.          var hero = new Tank(, , , );
  19.  
  20.          function moveTank(tank) {
  21.              //上下左右移动坦克
  22.              switch (event.keyCode) {
  23.                  case ://左
  24.                      tank.direct = ;
  25.                      tank.moveLeft();
  26.                      break;
  27.                  case ://右
  28.                      tank.direct = ;
  29.                      tank.moveRight();
  30.                      break;
  31.                  case ://上
  32.                      tank.direct = ;
  33.                      tank.moveUp();
  34.                      break;
  35.                  case ://下
  36.                      tank.direct = ;
  37.                      tank.moveDown();
  38.                      break;
  39.                  default:
  40.              }
  41.              drawTank(hero);
  42.          }
  43.  
  44.          drawTank(hero);
  45.      </script>
  46.  </body>
  47.  </html>

JavaScript代码：

  1. function Tank(x, y, direct, speed) {
  2.     //创建坦克类，横纵坐标，方向，速度
  3.     this.x = x;
  4.     this.y = y;
  5.     this.direct = direct;
  6.     this.speed = speed;
  7.     this.moveUp = function () {
  8.         this.y -= this.speed;
  9.     }
  10.     this.moveDown = function () {
  11.         this.y += this.speed;
  12.     }
  13.     this.moveLeft = function () {
  14.         this.x -= this.speed;
  15.     }
  16.     this.moveRight = function () {
  17.         this.x += this.speed;
  18.     }
  19. }
  20. function drawTank(tank) {
  21.     //画坦克
  22.     switch (tank.direct) {
  23.         case :
  24.         case :
  25.             //向上，向下
  26.             //清屏
  27.             context.clearRect(, , canvas.width, canvas.height);
  28.             //画坦克
  29.             //画轮子和身体
  30.             context.beginPath();
  31.             context.fillStyle = "red";
  32.             context.fillRect(tank.x, tank.y, , );//左轮
  33.             context.fillRect(tank.x + , tank.y + , , );//身体
  34.             context.fillRect(tank.x + , tank.y, , );//右轮
  35.             context.fill();
  36.             context.closePath();
  37.             //画脑袋
  38.             context.beginPath();
  39.             context.fillStyle = "blue";
  40.             context.arc(tank.x + , tank.y + , , ,  * Math.PI);
  41.             context.fill();
  42.             context.closePath();
  43.             //画炮筒
  44.             context.beginPath();
  45.             context.strokeStyle = "yellow";
  46.             context.lineWidth = ;
  47.             context.moveTo(tank.x + , tank.y + );
  48.             if (tank.direct == ) {
  49.                 context.lineTo(tank.x + , tank.y);
  50.             } else if (tank.direct == ) {
  51.                 context.lineTo(tank.x + , tank.y + );
  52.             }
  53.             context.stroke();
  54.             context.fill();
  55.             context.closePath();
  56.             break;
  57.         case :
  58.         case :
  59.             //向左，向右
  60.             //清屏
  61.             context.clearRect(, , canvas.width, canvas.height);
  62.             //画坦克
  63.             //画轮子和身体
  64.             context.beginPath();
  65.             context.fillStyle = "red";
  66.             context.fillRect(tank.x, tank.y, , );//左轮
  67.             context.fillRect(tank.x + , tank.y + , , );//身体
  68.             context.fillRect(tank.x, tank.y + , , );//右轮
  69.             context.fill();
  70.             context.closePath();
  71.             //画脑袋
  72.             context.beginPath();
  73.             context.fillStyle = "blue";
  74.             context.arc(tank.x + , tank.y + , , ,  * Math.PI);
  75.             context.fill();
  76.             context.closePath();
  77.             //画炮筒
  78.             context.beginPath();
  79.             context.strokeStyle = "yellow";
  80.             context.lineWidth = ;
  81.             context.moveTo(tank.x + , tank.y + );
  82.             if (tank.direct == ) {
  83.                 context.lineTo(tank.x + , tank.y + );
  84.             } else if (tank.direct == ) {
  85.                 context.lineTo(tank.x, tank.y + );
  86.             }
  87.             context.stroke();
  88.             context.fill();
  89.             context.closePath();
  90.             break;
  91.         default:
  92.     }
  93. }

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

  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坦克大战（1）绘制坦克

    坦克尺寸如下: <!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. 理解PHP的变量，值与引用的关系

    --- title: 理解PHP的变量,值与引用的关系 createdDate: 2015-03-11 category: php --- PHP的变量与C++中的变量是两种截然不容的概念.如果没有理 ...

  2. arithmetic-slices

    https://leetcode.com/problems/arithmetic-slices/ public class Solution { public int numberOfArithmet ...

  3. FPGA作为从机与STM32进行SPI协议通信---Verilog实现

    一．SPI协议简要介绍 SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口.SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用 ...

  4. 安装64位office时提示已安装32位的office

    运行 regedit,进入到HKEY_CLASSES_ROOT\Installer\Products下,删除0000510开头的项,没有00005我把00002....的删了也可以

  5. HTTP状态码及说明

  6. scala类型系统 type关键字

    和c里的type有点像. scala里的类型,除了在定义class,trait,object时会产生类型,还可以通过type关键字来声明类型. type相当于声明一个类型别名: scala> t ...

  7. zabbix_LAMP源码安装

    Zabbix源码包安装 Cenos5.3 Basic server 安装顺序 Libxml2 Libmcrypt Zlib Libpng Jpeg:需要创建目录jpeg /bin /lib /incl ...

  8. html中锚点的应用【本页面跳转】

    设置锚点 <a name="top"></a> 同页跳转 <a href="#top">返回顶部</a> 不同页 ...

  9. PHP上传文件功代码练习（单文件）

    前端: <html> <head><title>upload file</title> <meta http-equiv="Conten ...

  10. Android File类 根据官方文档理解

    File有四个构造函数        public File(File dir,String name)             参数为File和String,File制定构造的新的File对象的路径 ...