如题，完成子弹连发功能，上一篇博客遗留的问题，不能够连发，且一直按J键则第一颗子弹会消失；那是因为定义的子弹变量只是一个变量，现在定义成一个数组；在之前的代码上修改如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>  <body  onkeydown="getCommand()">
<h1>html5-经典的坦克大战</h1>
<canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black">
</canvas>
<span id="aa">数据</span>
<script type="text/javascript" src="tankeGame.js"></script>
<script type="text/javascript">  //准备工作  //得到画布  var  canvas1=document.getElementById("tankeMap");  //得到上下文引用对象，你可以理解成画笔  var cxt=canvas1.getContext("2d");  //定义一个坦克  //数字0表示向上 数字1表示右 数字2表示下 数字3表示左  var  hero=new Hero(130,130,0,tankeColor);  <span style="color:#ff0000;">var  heroBullets=new Array();//定义子弹数组</span>  //var  heroBullet=null;  //定义一个敌人的坦克数组对象   var enemyTankes=new Array();  //生成3个敌方坦克  for(var i=0;i<3;i++){  //创建敌人的坦克对象  var enemyTanke=new EnemyTanke((i+1)*50,30,2,enemyColor);  enemyTankes[i]=enemyTanke;  }  //刚进来先刷新画布，并初始化元素
    flashMap();  //刷新画布的函数  function flashMap(){  //清除画布的元素，刷新
        cxt.clearRect(0,0,500,500);  //画自己的坦克
        drawTanke(hero);  //画自己的子弹
        drawHeroBullet();  //画敌人的坦克  for(var i=0;i<3;i++){  drawTanke(enemyTankes[i]);  }  }  //获取键盘的命令的处理的函数  function getCommand(){  var code=event.keyCode;  cxt.clearRect(0,0,500,500);  switch(code){  case 87://w键
                hero.moveUp();  break;  case 68://d键
                hero.moveRight();  break;  case 83://s键
                hero.moveDown();   break;  case 65://a键
                hero.moveLeft();  break;  case 74://j键
                hero.shotEnemy();  break;      }  flashMap();//调用上下左右的同时刷新画布
    }  //每隔100毫秒刷新画布
    window.setInterval("flashMap()",100);  </script>
</body>
</html>

tankeGame.js

var tankeColor=new Array("#BA9658","#FEF26E");
var enemyColor=new Array("#00A2B5","#00FEFE");  //坦克的父类  function TanK(x,y,direct,color){  this.x=x;  this.y=y;  this.direct=direct;     this.speed=5;  this.color=color;  this.moveUp=function(){  this.y-=this.speed;  this.direct=0;  }  this.moveDown=function(){  this.y+=this.speed;  this.direct=2;  }  this.moveRight=function(){  this.x+=this.speed;  this.direct=1;  }  this.moveLeft=function(){  this.x-=this.speed;  this.direct=3;  }  }  //子弹类  function  Bullet(x,y,direct,speed){  this.x=x;  this.y=y;  this.direct=direct;  this.speed=speed;  this.timer=null;  this.isLive=true;  this.run=function run(){  if(this.x<=0||this.x>=500||this.y<=0||this.y>=500){  window.clearInterval(this.timer);  this.isLive=false;  }else{  switch(this.direct){  case 0:  this.y-=this.speed;  break;  case 1:  this.x+=this.speed;  break;  case 2:  this.y+=this.speed;  break;  case 3:  this.x-=this.speed;  break;  }  }  document.getElementById("aa").innerHTML="子弹的x="+this.x+"y="+this.y;  }  }  //定义一个hero类  //x、y表示初始坐标，direct表示方向  function  Hero(x,y,direct,color){  this.tanke=TanK;  this.tanke(x,y,direct,color);  this.shotEnemy=function(){  switch(this.direct){  case 0://上  heroBullet=new Bullet(this.x+9,this.y,this.direct,1);     break;  case 1://右  heroBullet=new Bullet(this.x+36,this.y+9,this.direct,1);      break;  case 2://下  heroBullet=new Bullet(this.x+9,this.y+36,this.direct,1);      break;  case 3://左  heroBullet=new Bullet(this.x-6,this.y+9,this.direct,1);   break;  }  <span style="color:#ff0000;">//将子弹放入到子弹数组中
            heroBullets.push(heroBullet);  //每隔50毫秒运行每个子弹的run方法  var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);  heroBullets[heroBullets.length-1].timer=timer;</span>
        }  }  //定义一个hero类  //x、y表示初始坐标，direct表示方向  function  EnemyTanke(x,y,direct,color){  this.tanke=TanK;  this.tanke(x,y,direct,color);  }  var heroBullet=null;//定义子弹变量  //画自己的子弹  function  drawHeroBullet(){  <span style="color:#ff0000;">for(var i=0;i<heroBullets.length;i++){  heroBullet=heroBullets[i];  if(heroBullet!=null&&heroBullet.isLive){  cxt.fillStyle="#FEF26E";  cxt.fillRect(heroBullet.x,heroBullet.y,2,2);      }     }</span>
    }  //把创建坦克的方法封装为一个对象  //该函数可以画自己的坦克，也可以画敌人的坦克  //tanke就是一个对象   function  drawTanke(tanke){  //坦克的方向  switch(tanke.direct){  case 0:  case 2:  {//上  //画出自己的坦克设置颜色  cxt.fillStyle=tanke.color[0];  cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮  cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮  cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体  //画中间的圆形的炮筒体  cxt.fillStyle=tanke.color[1];  cxt.beginPath();  cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false);  cxt.closePath();  cxt.fill();  //画出炮筒  cxt.strokeStyle=tanke.color[1];  //cxt.fillStyle="#FFD972";  cxt.lineWidth=1.9;  cxt.beginPath();  cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置    if(tanke.direct==0){  cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置   }else if(tanke.direct==2){  cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置
                }  cxt.closePath();      cxt.stroke();  }  break;  case 1:  case 3:  {//右  //画出自己的坦克设置颜色  cxt.fillStyle=tanke.color[0];  cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮  cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮  cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体  //画中间的圆形的炮筒体  cxt.fillStyle=tanke.color[1];  cxt.beginPath();  cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false);  cxt.closePath();  cxt.fill();  //画出炮筒  cxt.strokeStyle=tanke.color[1];  //cxt.fillStyle="#FFD972";  cxt.lineWidth=1.9;  cxt.beginPath();  cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置    if(tanke.direct==1){//右  cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置   }else if(tanke.direct==3){//左  cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置
                }  cxt.closePath();      cxt.stroke();  }  break;  }  }

end！

转载于:https://www.cnblogs.com/YLQBL/p/8426632.html

HTML-坦克大战-完成子弹连发功能(三)相关推荐

  1. java怎么连发子弹_HTML-坦克大战-完成子弹连发功能(三)

    var tankeColor=new Array("#BA9658","#FEF26E");var enemyColor=new Array("#00 ...

  2. java怎么连发子弹_【Java_项目篇1】--JAVA实现坦克大战游戏--子弹连发+爆炸效果（四）...

    前期相关文章 [Java_项目篇<1>]–JAVA实现坦克大战游戏–画出坦克(一) [Java_项目篇<1>]–JAVA实现坦克大战游戏–坦克移动+添加敌方坦克(二) [Jav ...

  3. Java坦克大战 (四) 之子弹的产生

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

  4. java炮弹_Java坦克大战 (四) 之子弹的产生

    在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学完J2SE的小伙伴们一点启示! 坦克大战V0.4实现功能: 1.写一个Missile类,产生一个可运动的子 ...

  5. 坦克大战python_Python语言学了没用？那只能说你是真的没有精通了Python语言

    [文末有福利] Python的热度一直高居不下,运维,自动化测试,后端开发,机器学习...Python的用武之地真的太多了! "人生苦短,我用Python",对于普通职场人士来说, ...

  6. [ java ] 坦克大战 5.0 ~ 最终完整版

    坦克大战5.0 新增功能内容:(加入IO流内容) 防止敌坦克间重叠 击杀数显示 保存上局游戏进度–>两种开局方式 加入开局音乐 修复记录文件丢失后的异常 5.0版本为最终版 提示:爆炸图片需自行 ...

  7. JAVA坦克大战改进（二）

    坦克大战预期目标 完成功能二和功能三,即 (二)增加关卡,不同关卡的地图难度.敌方坦克数量及玩家生命值都有改变 (三)增加玩家坦克的生命值,如被击中三次才会失败,退出游戏 改进思路: 不同关卡即地图( ...

  8. C++实现坦克大战（超详细）（文末附源码！！！）

    一.成果展示 二.开发环境及工具 C++开发,使用工具为vs2019的community版本,坦克大战需要借助EasyX库来完成坦克大战的图形绘制. 三.游戏规则设定 (1)玩家移动及发射炮弹: 单人 ...

  9. java坦克加快速度_Java坦克大战 (六) 之增加可玩性

    在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学完J2SE的小伙伴们一点启示! 坦克大战V0.6实现功能: 1.超级炮弹 2.我方坦克有生命值 3.图像化 ...

最新文章

  1. 反弹端口 HTTP代理 HTTP隧道技术
  2. 如何委婉的表达你的心思？
  3. Eclipse 部分快捷键
  4. 图解linux下top命令的使用
  5. C语言学习之求S=a+aa+aaa+... +aa.....aa之值,其中a是一个数字,n表示a的位数.
  6. Python用过的小知识备忘录
  7. http协议报文体_HTTP报文基本概念学习
  8. 计算机用户被锁定如何解除,win10账户被锁定了怎么解除
  9. Java学习路线(完整详细版)
  10. RocketMQ使用mmap - TODO
  11. jooq生成records_Java 14 Records类
  12. 【智能司法】可解释的Rationale增强罪名预测系统
  13. ubuntu 10.04下vmware tools安装和一些应用
  14. HtmlHelper类在View中替代了纯HTML代码
  15. Vue后台管理系统模板推荐
  16. xbee模块和单片机_XBee® ZigBee 模块使用方法
  17. 微信公众号接口开发--回复消息
  18. 【JAVA今法修真】 第七章 洞天风云起，索引混乱平
  19. 门面模式、调停者模式、责任链模式
  20. 《呼吸法门精要》南师所讲。读后感

热门文章

  1. SpringData集成Elasticsearch
  2. 人脸识别 传统Haar与CNN比较
  3. 手机用python画太阳花的代码_利用python绘制太阳花（蓝桥杯试题）
  4. 使用AndroidStudio与RN 运行ract-native run-android遇到的那些坑
  5. 【云原生】DevOps（二）：Build工具|Operate工具|Integrate工具 介绍及使用方法
  6. Fast R-CNN 简单梳理
  7. 每日一笑 | 不忘初心，最爱扫雷~
  8. 2022最新Java高级程序员架构师面试题及答案
  9. fanuc机器人试题_FANUC机器人报警综合汇总
  10. ios开发证书CSR文件、CER文件、P12文件，mobileprovition许可文件的用途