坦克尺寸如下：

 <!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. python学习:常见问题

    问题1:SyntaxError: Non-ASCII character '\xe5' in file E:\PythonDev\testmodule.py on line 21, but no en ...

  2. Indirect Buffers

    间接cmd 用在 gpu建立的cmd 不需要cpu参与 用indirect cpu gpu就不会互相等待了 直接gpu建立了 gpu用 之前的cmd是cpu建立 填入数据 gpu拿来执行的 在meta ...

  3. 开发 nodejs REST 个人感想

    本来想拿 nodejs 做个 ip 查询小应用的,做的时候想着把基础弄好再做应用,没想到做着做着就变成 spring 了 可能太多数人觉得不知道怎么用,以后我会写详细点使用教程 个人感觉自己做出来的东 ...

  4. 省市区县三级联动JAVA+MySQL+JQuery

    场景介绍: 由于项目要求,需要做一个进件(新增)功能,而该功能里要用到车品牌.车系.车型的联动查询,也就是经典的三级联动. 大体思路如下: 进入页面,会把所有的车品牌(第一级)在后台查询出来,放到缓存 ...

  5. Centos 7 通过yum的方式安装配置Artifactory 5.10

    制品仓库系统有很多,例如:Artifactory,Nexus,Archiva, 其中Artifactory拥有很多强大的企业级特性和人性化的用户接口,很多大型的公司都在使用它. 背景:因客户需求,需要 ...

  6. ant-design表单处理和常用方法及自定义验证

    首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator  库. ...

  7. LR11.50 通过Mobile Application 录制手机操作

    LR11.50 通过Mobile Application 录制手机操作 步骤就是 1:新建LR脚本.协议选择Mobile Application - HTTP/HTML 2:在record里选择第三个 ...

  8. 基于Python-Flask实现的网站例子

    概述 使用Flask写的体育网站 包括(注册 论坛 文章评论 组建战队 后台管理)等功能 示例地址文中有写 萌新 请多指教 详细 代码下载:http://www.demodashi.com/demo/ ...

  9. （十）Unity5.0新特性------新UI系统实战

    原文 Unity New GUI Tutorial – Part 1 Unity New GUI Tutorial- Part 2 Unity New GUI Tutorial – Part 3 大家 ...

  10. j2ee高并发时使用全局变量需要注意的问题

    原文:https://blog.csdn.net/jston_learn/article/details/21617311 开发中,全局变量的使用很频繁,但对于多线程的访问,使用全局变量需要注意的地方 ...