坦克尺寸如下：

 <!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. java中int取值范围是怎么计算的？

    首先jdk中定义int占4个字节 ===> 32位(后面全部的计算都是以此为根据的) 32位就是jvm仅仅给分配32个格子的空间,用以存放数据. 总所周知计算机中用0和1存放数据. 那么,32个 ...

  2. 怎样在Ubuntu手机应用中得到全部的环境变量值

    我们在先前的例程中已经通过一些方法得到我们应用的一些环境变量值.这些值有的很实用.比方我们能够得到我们应用所仅仅能訪问的文件夹.在今天的例程中,我们来展示一种方法能够得到应用全部的环境变量.在我们的实 ...

  3. DevExpress TreeList使用教程之绑定多级树

    DevExpress TreeList使用教程之绑定多级树   概述:TreeList控件可以同时显示树结构和其他数据列,即在一个列上建立父子关系展开或收缩,同时还可以显示其他列的内容.在TreeLi ...

  4. Python cx_Oracle问题处理

    今天第一次使用Python连接Oracle数据库(多么可怕,三年码农没用Python手动连过Oracle) 首先: pip install cx_Oracle 好,安装完成,测试代码如下: from ...

  5. Web.xml 错误或异常页面配置

         <error-page>          <error-code>404</error-code>          <location>/ ...

  6. python gevent使用例子

    python gevent使用例子 from gevent.pool import Pool POOL_SIZE = 100 def process(func, param1_list, param2 ...

  7. 2019pycharm破解大法

    通过激活码激活Pycharm 1 先找到你的hosts文件: Windows电脑:c:\windows\system32\drivers\etc Linux/Mac电脑:/etc 2 编辑hosts文 ...

  8. 基于Vue的数字输入框组件开发

    1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...

  9. Loadrunner socket协议lrs_receive函数接收到返回数据包 仍然等待服务器返回--解决

    前段时间在使用loadrunner socket协议发送数据包到到服务器,使用lrs_receive接收服务器应答数据包,已经接收到数据包,但LR仍然在等待服务器端返回,而且日志打印显示每次接收返回都 ...

  10. CentOS 安装jdk1.7 32位

    CentOS 安装jdk1.7 32位 1.下载jdk-7u21-linux-i586.rpm ? 1 wget http://uni-smr.ac.ru/archive/dev/java/bulk/ ...