html代码：

 <!DOCTYPE html>

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

 <head>

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

     <title>坦克大战</title>

     <script src="tank.js"></script>

 </head>

 <body onkeydown="moveTank(hero)">

     <canvas id="canvas" width="" height="" style="border:1px solid red; display:block; margin: 50px auto; background-color:black;"></canvas>

     <script type="text/javascript">

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

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

         var hero = new Tank(, , , );

         //创建hero对象

         var hero = new Tank(, , , );

         function moveTank(tank) {

             //上下左右移动坦克

             switch (event.keyCode) {

                 case ://左

                     tank.direct = ;

                     tank.moveLeft();

                     break;

                 case ://右

                     tank.direct = ;

                     tank.moveRight();

                     break;

                 case ://上

                     tank.direct = ;

                     tank.moveUp();

                     break;

                 case ://下

                     tank.direct = ;

                     tank.moveDown();

                     break;

                 default:

             }

             drawTank(hero);

         }

         drawTank(hero);

     </script>

 </body>

 </html>

JavaScript代码：

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;

    }

}

function drawTank(tank) {

    //画坦克

    switch (tank.direct) {

        case :

        case :

            //向上，向下

            //清屏

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

            //画坦克

            //画轮子和身体

            context.beginPath();

            context.fillStyle = "red";

            context.fillRect(tank.x, tank.y, , );//左轮

            context.fillRect(tank.x + , tank.y + , , );//身体

            context.fillRect(tank.x + , tank.y, , );//右轮

            context.fill();

            context.closePath();

            //画脑袋

            context.beginPath();

            context.fillStyle = "blue";

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

            context.fill();

            context.closePath();

            //画炮筒

            context.beginPath();

            context.strokeStyle = "yellow";

            context.lineWidth = ;

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

            if (tank.direct == ) {

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

            } else if (tank.direct == ) {

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

            }

            context.stroke();

            context.fill();

            context.closePath();

            break;

        case :

        case :

            //向左，向右

            //清屏

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

            //画坦克

            //画轮子和身体

            context.beginPath();

            context.fillStyle = "red";

            context.fillRect(tank.x, tank.y, , );//左轮

            context.fillRect(tank.x + , tank.y + , , );//身体

            context.fillRect(tank.x, tank.y + , , );//右轮

            context.fill();

            context.closePath();

            //画脑袋

            context.beginPath();

            context.fillStyle = "blue";

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

            context.fill();

            context.closePath();

            //画炮筒

            context.beginPath();

            context.strokeStyle = "yellow";

            context.lineWidth = ;

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

            if (tank.direct == ) {

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

            } else if (tank.direct == ) {

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

            }

            context.stroke();

            context.fill();

            context.closePath();

            break;

        default:

    }

}

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. Weblogic常见故障之二：XAER_NOTA XAException问题的解决

    在weblogic执行XA操作的时候,我们会碰到如下的错误,后来发现是JDBC配置的问题.主要报错:java.sql.SQLException: XA error: XAER_NOTA : The X ...

  2. PHP之is_a()函数执行代码之总结

    今天看到云舒在群里贴的漏洞公告,原始的文章在 http://www.byte.nl/blog/2011/09/23/security-bug-in-is_a-function-in-php-5-3-7 ...

  3. 阻止jQuery事件冒泡

    Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头 ...

  4. OpenCV 4.1 编译和配置

    OpenCV 4.0 版本,历时3年半,终于在2018年圣诞节前发布了,该版本增加的新功能如下: 1) 更新代码支持 c++11 特性,需要兼容 c++11 语法的编译器 2)增加 dnn 中的模块功 ...

  5. MYSQL存储过程及事件

    关于mysql下的存储过程以及事件的创建 以下这个存储过程主要实现的功能就是查询表里面半年前的数据,假设有就存到文件.然后将数据删除. CREATE DEFINER = `root`@`localho ...

  6. Android中Native和H5交互

    1.概述 时至今日,H5的跨平台性越发凸显优势,一套代码适配android.ios,既能减少开发成本,又便于更新与维护.但是native的性能体验也确实更佳,尤其体现在复杂界面和频繁变化的界面上.事实 ...

  7. CSS 盒状模型简介

    框的构成以及相关 CSS 特性( property ) 结构 为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型1为每个元素生成四个嵌套的矩形框, 分别称作 content box.pad ...

  8. 在linux下的使用复制命令cp，不让出现“overwrite”（文件覆盖）提示的方法。（转）

    在linux下的使用复制命令cp,不让出现“overwrite”(文件覆盖)提示的方法. 一般我们在使用cp命令时加上-f选项,希望不让出现“overwrite”的提示(文件覆盖的提示).如:# cp ...

  9. Linux内核部件分析 原子性操作atomic_t

    在任何处理器平台下,都会有一些原子性操作,供操作系统使用,我们这里只讲x86下面的.在单处理器情况下,每条指令的执行都是原子性的,但在多处理器情况下,只有那些单独的读操作或写操作才是原子性的.为了弥补 ...

  10. vfork & fork

    转载 http://coolshell.cn/articles/12103.html 在知乎上,有个人问了这样的一个问题——为什么vfork的子进程里用return,整个程序会挂掉,而且exit()不 ...