坦克尺寸如下：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>坦克大战</title>

 </head>

 <body onkeydown="tankMove()">

     <canvas id="canvas" width="" height="" style="border:1px solid red; display:block; margin:50px auto;">浏览器不支持</canvas>

     <script type="text/javascript">

         var canvas = document.getElementById("canvas");

         var context = canvas.getContext("2d");

         //构造方法，创建一个坦克类

         function Tank(x, y, direct, speed) {

             this.x = x;

             this.y = y;

             this.direct = direct;

             this.speed = speed;

             this.moveUp = function () {

                 this.y -= this.speed;

             }

             this.moveDown = function () {

                 this.y += this.speed;

             }

             this.moveLeft = function () {

                 this.x -= this.speed;

             }

             this.moveRight = function () {

                 this.x += this.speed;

             }

         }

         var hero = new Tank(, , , );

         function drawTank(tank) {

             switch (tank.direct) {

                 case :

                 case :

                     //向左，向右

                     //清空画布

                     context.clearRect(, , canvas.width, canvas.height);

                     //开始画坦克

                     //上轮

                     context.fillStyle = "red";

                     context.fillRect(hero.x, hero.y, , );

                     context.fill();

                     //下轮

                     context.fillRect(hero.x, hero.y + , , );

                     context.fill();

                     //中间

                     context.fillStyle = "green";

                     context.fillRect(hero.x + , hero.y + , , );

                     context.fill();

                     //盖子

                     context.beginPath()//加个开始，不然炮筒会粘连

                     context.fillStyle = "blue";

                     context.arc(hero.x + , hero.y + , , ,  * Math.PI);

                     context.fill();

                     context.closePath();

                     //炮筒

                     context.beginPath();

                     context.strokeStyle = "black";

                     context.lineWidth = "0.5";

                     context.moveTo(hero.x + , hero.y + );

                     if (tank.direct == ) {

                         context.lineTo(hero.x, hero.y + );

                     } else if (tank.direct == ) {

                         context.lineTo(hero.x + , hero.y + );

                     }

                     context.stroke();

                     context.closePath();

                     break;

                 case :

                 case :

                     //向上，向下

                     //清空画布

                     context.clearRect(, , canvas.width, canvas.height);

                     //开始画坦克

                     //左轮

                     context.fillStyle = "red";

                     context.fillRect(hero.x, hero.y, , );

                     context.fill();

                     //右轮

                     context.fillRect(hero.x + , hero.y, , );

                     context.fill();

                     //中间

                     context.fillStyle = "green";

                     context.fillRect(hero.x + , hero.y + , , );

                     context.fill();

                     //盖子

                     context.beginPath()//加个开始，不然炮筒会粘连

                     context.fillStyle = "blue";

                     context.arc(hero.x + , hero.y + , , ,  * Math.PI);

                     context.fill();

                     //炮筒

                     context.beginPath();

                     context.strokeStyle = "black";

                     context.lineWidth = "0.5";

                     context.moveTo(hero.x + , hero.y + );

                     if (tank.direct == ) {

                         context.lineTo(hero.x + , hero.y);

                     } else if (tank.direct == ) {

                         context.lineTo(hero.x + , hero.y + );

                     }

                     context.stroke();

                     break;

                 default:

             }

         }

         function tankMove() {

             switch (event.keyCode) {

                 case ://左A

                     hero.direct = ;

                     hero.moveLeft();

                     break;//不要忘记break！

                 case ://右D

                     hero.direct = ;

                     hero.moveRight();

                     break;

                 case ://上W

                     hero.direct = ;

                     hero.moveUp();

                     break;

                 case ://下S

                     hero.direct = ;

                     hero.moveDown();

                     break;

                     //68 87 83

                 default:

             }

             drawTank(hero);

             //alert(event.keyCode);

         }

         drawTank(hero);

     </script>

 </body>

 </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. Android4.4系统源码百度网盘下载

    众所周知.Android如今非常火,肯定也有非常多android开发人员像我一样想研究android系统的源码.可是假设依照Google官方站点http://source.android.com/so ...

  2. 高性能WEB开发：Javascript自身执行效率

    Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变 ...

  3. 在做了 BasePage 时： 只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时，才能使用会话状态。还请确保在应用程序配置的 / / 节中包括

    摘自: http://lichengguizy.blog.163.com/blog/static/11771858620122342749552/ 只有在配置文件或 Page 指令中将 enableS ...

  4. hdu 4893Wow! Such Sequence!

    多校第三场 7题..线段树A的 #include <cstdio> #include <cstring> #include <iostream> #include ...

  5. 有趣的Java之调皮的浮点数

    **当你在写一个电商网站的时候,你可能会给你的商品标价1.99,10.9这样的价格来吸引顾客.我应该用浮点数float/double来储存它们,当我的顾客购买商品的时候,从他们的账户里扣费,使用整型是 ...

  6. Short与Integer互转

    int 是4字节, short 是2字节的, 如果将int(Integer)转成short(Short), 那么必须强制转换,否则会报编译异常. 但是, 当int(Integer)是一个final时, ...

  7. vue - webpack.dev.conf.js for CopyWebpackPlugin

    描述:将单个文件或整个目录复制到构建目录 官网地址:https://www.npmjs.com/package/copy-webpack-plugin // 复制到自定义静态源 new CopyWeb ...

  8. jQuery切换事件

    有html页面内容如下: <body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1" ...

  9. Python 二维码解码

    二维码解析 Python中关于二维码解析的现成模块有很多,比较著名的就是Zbar以及ZXing.然而很不幸的是,官方的版本都是支持到python2.x,下面是在python2.x的例子: import ...

  10. JMeter3.0配置

    解压apache-jmeter-3.0.zip文件至c盘,本文解压至C:\jmeter3目录下. 桌面上选择“我的电脑”(右键),高级, 环境变量, 在“系统变量”--->“新建”, 在变量名中 ...