坦克大战一完成坦克上下左右移动的功能

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. </head>  
  6.  
  7. <body  onkeydown="getCommand()">
  8. <h1>html5-经典的坦克大战</h1>
  9. <canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black">
  10. </canvas>
  11. <script type="text/javascript">
  12.     //定义一个hero类
  13.     //x、y表示初始坐标，direct表示方向
  14.     function  Hero(x,y,direct){
  15.         this.x=x;
  16.         this.y=y;
  17.         this.direct=direct;
  18.         this.speed=5;  
  19.  
  20.         this.moveUp=function(){
  21.             this.y-=this.speed;
  22.             this.direct=0;
  23.         }
  24.         this.moveDown=function(){
  25.             this.y+=this.speed;
  26.             this.direct=2;
  27.         }
  28.         this.moveRight=function(){
  29.             this.x+=this.speed;
  30.             this.direct=1;
  31.         }
  32.         this.moveLeft=function(){
  33.             this.x-=this.speed;
  34.             this.direct=3;
  35.         }
  36.     }  
  37.  
  38.     //准备工作
  39.     //得到画布
  40.     var  canvas1=document.getElementById("tankeMap");
  41.     //得到上下文引用对象，你可以理解成画笔
  42.     var cxt=canvas1.getContext("2d");  
  43.  
  44.     //定义一个坦克
  45.     //数字0表示向上 数字1表示右 数字2表示下 数字3表示左
  46.     var  hero=new Hero(130,30,0);  
  47.  
  48.     //把创建坦克的方法封装为一个对象
  49.     //该函数可以画自己的坦克，也可以画敌人的坦克
  50.     //tanke就是一个对象
  51.     function  drawTanke(tanke){
  52.         //坦克的方向
  53.         switch(tanke.direct){
  54.             case 0:
  55.             case 2:
  56.             {//上
  57.                 //画出自己的坦克设置颜色
  58.                 cxt.fillStyle="#00A6BD";
  59.                 cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮
  60.                 cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮
  61.                 cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体  
  62.  
  63.                 //画中间的圆形的炮筒体
  64.                 cxt.fillStyle="#00A6BD";
  65.                 cxt.beginPath();
  66.                 cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false);
  67.                 cxt.closePath();
  68.                 cxt.fill();  
  69.  
  70.                 //画出炮筒
  71.                 cxt.strokeStyle="#00A6BD";
  72.                 //cxt.fillStyle="#FFD972";
  73.                 cxt.lineWidth=1.9;
  74.                 cxt.beginPath();
  75.                 cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置
  76.                 if(tanke.direct==0){
  77.                     cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置
  78.                 }else if(tanke.direct==2){
  79.                     cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置
  80.                 }
  81.                 cxt.closePath();
  82.                 cxt.stroke();
  83.             }
  84.             break;
  85.             case 1:
  86.             case 3:
  87.             {//右
  88.                 //画出自己的坦克设置颜色
  89.                 cxt.fillStyle="#00A6BD";
  90.                 cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮
  91.                 cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮
  92.                 cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体  
  93.  
  94.                 //画中间的圆形的炮筒体
  95.                 cxt.fillStyle="#00A6BD";
  96.                 cxt.beginPath();
  97.                 cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false);
  98.                 cxt.closePath();
  99.                 cxt.fill();  
  100.  
  101.                 //画出炮筒
  102.                 cxt.strokeStyle="#00A6BD";
  103.                 //cxt.fillStyle="#FFD972";
  104.                 cxt.lineWidth=1.9;
  105.                 cxt.beginPath();
  106.                 cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置
  107.                 if(tanke.direct==1){//右
  108.                     cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置
  109.                 }else if(tanke.direct==3){//左
  110.                     cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置
  111.                 }  
  112.  
  113.                 cxt.closePath();
  114.                 cxt.stroke();
  115.             }
  116.             break;
  117.         }
  118.     }  
  119.  
  120.     drawTanke(hero);  
  121.  
  122.     function getCommand(){
  123.         var code=event.keyCode;
  124.         cxt.clearRect(0,0,500,500);
  125.         switch(code){
  126.             case 87:
  127.                 hero.moveUp();
  128.                 break;
  129.             case 68:
  130.                 hero.moveRight();
  131.                 break;
  132.             case 83:
  133.                 hero.moveDown();
  134.                 break;
  135.             case 65:
  136.                 hero.moveLeft();
  137.                 break;
  138.         }
  139.         cxt.clearRect(0,0,500,500);  
  140.  
  141.         drawTanke(hero);
  142.     }  
  143.  
  144. </script>
  145. </body>
  146. </html>

也可以将hero的定义，和画坦克的函数抽取出来放到一个文件里面让HTML界面的逻辑更加清晰，如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. </head>  
  6.  
  7. <body  onkeydown="getCommand()">
  8. <h1>html5-经典的坦克大战</h1>
  9. <canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black">
  10. </canvas>
  11. <script type="text/javascript" src="tankeGame.js"></script>
  12. <script type="text/javascript">
  13.     //准备工作
  14.     //得到画布
  15.     var  canvas1=document.getElementById("tankeMap");
  16.     //得到上下文引用对象，你可以理解成画笔
  17.     var cxt=canvas1.getContext("2d");  
  18.  
  19.     //定义一个坦克
  20.     //数字0表示向上 数字1表示右 数字2表示下 数字3表示左
  21.     var  hero=new Hero(130,30,0);  
  22.  
  23.     drawTanke(hero);  
  24.  
  25.     function getCommand(){
  26.         var code=event.keyCode;
  27.         cxt.clearRect(0,0,500,500);
  28.         switch(code){
  29.             case 87:
  30.                 hero.moveUp();
  31.                 break;
  32.             case 68:
  33.                 hero.moveRight();
  34.                 break;
  35.             case 83:
  36.                 hero.moveDown();
  37.                 break;
  38.             case 65:
  39.                 hero.moveLeft();
  40.                 break;
  41.         }
  42.         cxt.clearRect(0,0,500,500);  
  43.  
  44.         drawTanke(hero);
  45.     }  
  46.  
  47. </script>
  48. </body>
  49. </html>

HTML5-坦克大战一完成坦克上下左右移动的功能（一）的更多相关文章

  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. Java坦克大战 (七) 之图片版

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

  5. HTML5坦克大战（韩顺平版本）

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

  6. html5制作坦克大战

    全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...

  7. 《HTML5经典坦克大战》游戏（代码）

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

  8. 小强的HTML5移动开发之路（7）——坦克大战游戏1

    来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...

  9. 基于HTML5坦克大战游戏简化版

    之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...

随机推荐

  1. 核方法（Kernel Methods）

    核方法(Kernel Methods) 支持向量机(SVM)是机器学习中一个常见的算法,通过最大间隔的思想去求解一个优化问题,得到一个分类超平面.对于非线性问题,则是通过引入核函数,对特征进行映射(通 ...

  2. Week8 Teamework from Z.XML-Z.XML游戏功能说明

    我们小组的游戏终于新鲜出炉了,好开心~ 快来看看有什么功能吧. 游戏目标::=打倒最多的敌人,获得积分,放松心情,获取快乐. 游戏菜单::= 关于+设置+帮助+积分榜+开始游戏吧 (截图还在路上..) ...

  3. ubutu下source命令问题（复制）

    最近一段时间在使用Bash on Ubuntu on Windows做shell脚本调试时发现在脚本中使用source时会报错,上网查了下才了解到原来是在Ubuntu中使用的并不是bash,而是使用 ...

  4. A1

    It’s surprising what you can find at the end of your garden. Wild flowers... and even smaller yet, i ...

  5. TLS协议分析

    TLS协议分析 本文目标: 学习鉴赏TLS协议的设计,透彻理解原理和重点细节 跟进一下密码学应用领域的历史和进展 整理现代加密通信协议设计的一般思路 本文有门槛,读者需要对现代密码学有清晰而系统的理解 ...

  6. Graphic的一些基本概念

    做了张很丑陋的图,估计还不准确...先凑合看吧~

  7. idea 控制台中文乱码

    idea 控制台中文乱码,网上找了好多基本都是说在tomcat配置文件里面添加-Dfile.encoding=UTF-8 添加后依然乱码, 需要在idea64.exe.vmoptions文件中添加-D ...

  8. API文档打开显示'已取消到该网页的导航'的解决方法

    从网上下载的API,点击目录右边显示框显示“已取消到该网页的导航”.出现这样的问题并不是文档本身的问题,而是文档属性设置的问题. 这时候只要右键文件选择“属性”-在打开的界面中点击“解除锁定”-点击” ...

  9. [Leetcode] 20. Valid Parentheses（Stack）

    括号匹配问题,使用栈的特点,匹配则出栈,否则入栈,最后栈为空则全部匹配.代码如下: class Solution { public: bool isValid(string s) { stack< ...

  10. makefile使用笔记（一）入门

    By francis_hao    Mar 2,2017 makefile makefile一个很简单的例子如下,该实例完成在执行make时,将main.c编译成可执行文件main的功能. 各项的含义 ...