1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.  
  6. </head>
  7. <body onkeydown="getCommand()">
  8.     <canvas id="tankMap" width="400px" height="300px" style="background-color: black"></canvas>
  9.     <script type="text/javascript">
  10.  
  11.         //得到画布
  12.         var canvas1 = document.getElementById("tankMap");
  13.         //取得画布画笔对象
  14.         var cxt = canvas1.getContext("2d");
  15.         //定义一个Hero类
  16.         //x表示横坐标，主表示纵坐标
  17.         function Hero(x, y, direct, speed) {
  18.             this.x = x;
  19.             this.y = y;
  20.             this.speed = speed;
  21.             this.direct = direct;
  22.  
  23.             //向上
  24.             this.moveUp = function () {
  25.                 this.y -= this.speed;
  26.             }
  27.             //向右
  28.             this.moveRight = function () {
  29.                 this.x += this.speed;
  30.             }
  31.             //向下
  32.             this.moveDown = function () {
  33.                 this.y += this.speed;
  34.             }
  35.             //向左移
  36.             this.moveLeft = function () {
  37.                 this.x -= this.speed;
  38.             }
  39.  
  40.         }
  41.         //我的坦克 w表示向上,d表示向右 s表示向下 a表示向左
  42.  
  43.         var hero = new Hero(, , , );
  44.         //先画出坦克
  45.         darwTank(hero);
  46.  
  47.         //绘制坦克对象
  48.         function darwTank(hero) {
  49.             //画出坦克
  50.             cxt.fillStyle = "#DED284";
  51.             //画出左面
  52.             cxt.fillRect(hero.x, hero.y, , );
  53.             //画出右边
  54.             cxt.fillRect(hero.x + , hero.y, , );
  55.             //中间矩形
  56.             cxt.fillRect(hero.x + , hero.y + , , );
  57.             //画出坦克的盖子
  58.             cxt.fillStyle = "#FFD972";
  59.             cxt.arc(hero.x + , hero.y + , , , , true);
  60.             cxt.fill();
  61.             //车出炮线
  62.             cxt.strokeStyle = "#FFD972";
  63.             cxt.lineWidth = 1.5;
  64.             cxt.beginPath();
  65.  
  66.             cxt.moveTo(hero.x + , hero.y + );
  67.             cxt.lineTo(hero.x + , hero.y);
  68.             cxt.closePath();
  69.             cxt.stroke();
  70.         }
  71.  
  72.         //接收键盘命令
  73.         function getCommand() {
  74.  
  75.             var code = event.keyCode;
  76.             //alert(code);
  77.             switch (code) {
  78.                 case :
  79.                     hero.moveUp();
  80.                     break;
  81.                 case :
  82.                     hero.moveRight();
  83.                     break;
  84.                 case :
  85.                     hero.moveDown();
  86.                     break;
  87.                 case :
  88.                     hero.moveLeft();
  89.                     break;
  90.             }
  91.             cxt.clearRect(, , , );
  92.             darwTank(hero);
  93.         }
  94.     </script>
  95. </body>
  96. </html>

  1.  

HTML坦克大战学习02---坦克动起来的更多相关文章

  1. 坦克大战学习笔记-TankWar

    最近学习了马士兵老师直播的单机版坦克大战,模仿的做了一个,整理一下思路记录下来,项目git地址:https://github.com/zhuchangli/TankWar/tree/master 视频 ...

  2. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  3. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测下

    上篇我们完成了地图的信息获取和碰撞检测,这篇我们整合到程序中. 在这之前我们改造一下Tank类,使它更加模块化,共容易理解: 1.改造后的Tank类声明如下: class Tank : public ...

  4. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示

    1.先定义坦克的一些属性 class Tank : public CCSprite { public : Tank(); ~Tank(); static Tank* createTankWithTan ...

  5. HTML坦克大战学习01

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. C# 坦克大战学习总结

    1.学会用Resource管理资源 添加资源 在properties下的Resource.resx添加资源 使用资源 工程名.Properties.Resource.资源名 实际本质,是一个流. 2. ...

  7. Java坦克大战 (七) 之图片版

    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...

  8. HTML5-坦克大战一完成坦克上下左右移动的功能（一）

    坦克大战一完成坦克上下左右移动的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. 阶段学习总结-坦克大战（2D）案例

    这是前几天学习的案例,这两天学习了NGUI和UGUI,被UI搞得很烦躁,但是今天还是将前几天学习的坦克大战总结以下.这个游戏是小时候的经典红白机游戏的复刻,见截图: 一.游戏物体 游戏中包含地图元素( ...

随机推荐

  1. jmeter --- 基于InfluxDB&Grafana的JMeter实时性能测试数据的监控和展示

    转自:https://blog.csdn.net/RickyOne_RR/article/details/50637839 本文主要讲述如何利用JMeter监听器Backend Listener,配合 ...

  2. Error_GL_KeyflexfieldDefinitionFactory.getStructureNumber无法找到应用产品

    2014-07-12 BaoXinjian

  3. LevelDB场景分析1--整体结构分析

    基本用法 数据结构 class DBImpl : public DB { private:     struct CompactionState;     struct Writer;// Infor ...

  4. map以自定义类型当Key

    关于map的定义: template < class Key, class T, class Compare = less<Key>, class Allocator = alloc ...

  5. server2012 配置SSL证书

    导入SSL证书: 开始 -〉运行 -〉MMC,启动控制台程序 -> 选择菜单“文件 -〉添加/删除管理单元”->列表中选择“证书”->点击“添加”-> 选择“计算机帐户” -& ...

  6. ps换衣服

    1.抠衣服->给衣服新建图层(ctrl+j)->给图层去色,让衣服边黑白色.2.剪贴蒙版(上图:大花布,下形:衣服).作用:大花布替换成衣服3.大花布图层->叠加图层样式或其它图层样 ...

  7. 大数问题：求n的阶乘

    题目:求100! 这看起来是一个非常简答的问题,递归解之毫无压力 int func(int n){ if(n <= 1) return 1; else return n*func(n-1); } ...

  8. RhinoMock顺序调用

    MockRepository mocks = new MockRepository(); ISongBird maleBird = (ISongBird)mocks.StrictMock(typeof ...

  9. 基于FPGA的异步FIFO设计

    今天要介绍的异步FIFO,可以有不同的读写时钟,即不同的时钟域.由于异步FIFO没有外部地址端口,因此内部采用读写指针并顺序读写,即先写进FIFO的数据先读取(简称先进先出).这里的读写指针是异步的, ...

  10. ny14 会场安排问题

    会场安排问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工 ...