HTML-坦克大战-完成子弹连发功能(三)
如题，完成子弹连发功能，上一篇博客遗留的问题，不能够连发，且一直按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！
HTML-坦克大战-完成子弹连发功能(三)的更多相关文章
- HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能（二）
上一篇博客只画出了,一个坦克,并让其可以上下左右移动,这篇博客将画出敌人的坦克,并让自己的坦克可以发子弹,但是还不是尽善尽美,还有一些问题,将会在下篇博客说明: html代码: <!DOCTYP ...
- Java坦克大战 (四) 之子弹的产生
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- Java坦克大战 (三) 之可完全控制坦克朝八个方向运动
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- Java__线程---基础知识全面实战---坦克大战系列为例
今天想将自己去年自己编写的坦克大战的代码与大家分享一下,主要面向学习过java但对java运用并不是很熟悉的同学,该编程代码基本上涉及了java基础知识的各个方面,大家可以通过练习该程序对自己的jav ...
- Java坦克大战 (六) 之增加可玩性
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- Java坦克大战 (五) 之产生敌方坦克和爆炸效果
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- Java坦克大战 (二) 之画一个能动的圆圈代表坦克
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- Java坦克大战（三）
关于这个坦克大战的项目是在学习Java基础的时候,拿来练习的最近看到这些代码,感觉很亲切,就把他们都复制下来,编辑成博客.回首看去,Java基础的学习确实应该建立在找项目练习上,这样才能将学到的基础知 ...
- 《杜增强讲Unity之Tanks坦克大战》6-发射子弹
6 发射子弹 本节完成发射子弹的功能,最终代码如下: image 首先,发射子弹得确定发射的位置和方向,还有发射的初始速度.具体的发射速度和按下发射按键的时间长短有关,这个关于子弹的蓄力我们在第九 ...
随机推荐
- sed-awk命令详解
第2章 ***********sed***********. 1目 录 2.1 -------sed命令小结及小结图---- 1 2.2 -------第几行---------- 2 2.3 - ...
- gitbook生成的_book文件本地打开后链接失效问题
Gitbook 生成本地 html 的问题 在本地用 gitbook-cli根据 Summary 生成目录 然后在每个 md 文件里书写内容 然后用 gitbook serve .生成本地 html ...
- Week2 Teamework from Z.XML 软件分析与用户需求调查（五）从对比中看见必应助手发展空间
本文将主要探讨软件功能前景(浮动头像界面,升级式角色),找出与bing助手相类似功能的资深软件,分析这些软件的发展趋势和用户体验,从历史的角度来评测bing助手的某些功能的前景. 1.浮动头像界面-曲 ...
- SpringBoot 中使用shiro注解使之生效
在shiroConfig配置类中增加如下代码: /** * 开启Shiro的注解(如@RequiresRoles,@RequiresPermissions),需借助SpringAOP扫描使用Shiro ...
- android多点触控自由对图片缩放
在系统的相册中,观看相片就可以用多个手指进行缩放. 要实现这个功能,只需要这几步: 1.新建项目,在项目中新建一个ZoomImage.java public class ZoomImageView e ...
- java线程（5）——线程池（上）
引入: 在之前的例子中,我们需要使用线程时就直接去创建一个线程,这样既不浪费资源又十分方便.但如果我们需要创建多个并发的线程,而且短时间执行就结束了,如果还用之前的方式,就会大大降低效率和性能了. 因 ...
- js把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
最近在做项目的时候,需要把后台返回的时间转换成几秒前.几分钟前.几小时前.几天前等的格式:后台返回的时间格式为:2015-07-30 09:36:10,需要根据当前的时间与返回的时间进行对比,最后显示 ...
- can be found for element 'tx:annotation-driven'
错误描述: ERROR [ContainerBackgroundProcessor[StandardEngine[Catalina]]] (ContextLoader.java:308) - Cont ...
- Configuring Dojo with dojoConfig - The Dojo Toolkit
转载自Dojo官网 Configuring Dojo with dojoConfig The dojoConfig object (formerly djConfig) allows you to s ...
- request.getParameterMap() 获取表单提交的键值对 并且 也能获取动态表单的key
Map<String,String[]> map = request.getParameterMap();Set<String> keys = map.keySet(); 获取 ...