如题，完成子弹连发功能，上一篇博客遗留的问题，不能够连发，且一直按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-坦克大战-完成子弹连发功能(三)的更多相关文章

  1. HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能（二）

    上一篇博客只画出了,一个坦克,并让其可以上下左右移动,这篇博客将画出敌人的坦克,并让自己的坦克可以发子弹,但是还不是尽善尽美,还有一些问题,将会在下篇博客说明: html代码: <!DOCTYP ...

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

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

  3. Java坦克大战 (三) 之可完全控制坦克朝八个方向运动

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

  4. Java__线程---基础知识全面实战---坦克大战系列为例

    今天想将自己去年自己编写的坦克大战的代码与大家分享一下,主要面向学习过java但对java运用并不是很熟悉的同学,该编程代码基本上涉及了java基础知识的各个方面,大家可以通过练习该程序对自己的jav ...

  5. Java坦克大战 (六) 之增加可玩性

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

  6. Java坦克大战 (五) 之产生敌方坦克和爆炸效果

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

  7. Java坦克大战 (二) 之画一个能动的圆圈代表坦克

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

  8. Java坦克大战（三）

    关于这个坦克大战的项目是在学习Java基础的时候,拿来练习的最近看到这些代码,感觉很亲切,就把他们都复制下来,编辑成博客.回首看去,Java基础的学习确实应该建立在找项目练习上,这样才能将学到的基础知 ...

  9. 《杜增强讲Unity之Tanks坦克大战》6-发射子弹

    6 发射子弹 本节完成发射子弹的功能,最终代码如下:   image 首先,发射子弹得确定发射的位置和方向,还有发射的初始速度.具体的发射速度和按下发射按键的时间长短有关,这个关于子弹的蓄力我们在第九 ...

随机推荐

  1. 问题 B: Prime Number

    题目描述 Output the k-th prime number. 输入 k≤10000 输出 The k-th prime number. 样例输入 10 50 样例输出 29 229 #incl ...

  2. Truffle基础篇-Truffle做什么的?怎么安装？

    Truffle基础篇-Truffle做什么的?怎么安装? truffle资料汇总 http://truffle.tryblockchain.org/truffle3.0-integrate-nodej ...

  3. 预研报告——MyBatis持久层的demo

    一.预研任务介绍和预研目标 任务介绍: 与 Hibernate 相比, MyBatis 是一个半自动化的持久层框架,以轻量级.效率高.原生代而好评如潮.虽然有在分享会上大致讲解,但是还是重新梳理成文字 ...

  4. 在Android Studio中创建（或添加）第一个Hello World应用程序

    下面我们将使用Android Studio创建第一个简单的Hello World应用程序. 1.打开Android Studio,加载画面如下图所示:   2.选择”Start a new Andro ...

  5. 关于debian配置的问题汇总

    debian的apache多域名配置: https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-ho ...

  6. PHPExcel 导出包含图片excel

    <?php // 这里用的PHPExcel版本号为1.8.0 // 下载地址https://github.com/PHPOffice/PHPExcel 下载ZIP压缩包 // 下载后将Class ...

  7. php静态文件缓存示例

    //开始缓冲区 ob_start(); $cache_file = "./cache/4.3-static.html"; $cache_time = 1; //设置缓存更新时间 i ...

  8. [洛谷P1887]乘积最大3

    题目大意:请你找出$m$个和为$n$的正整数,他们的乘积要尽可能的大.输出字典序最小的方案 题解:对于一些数,若它们的和相同,那么越接近它们的乘积越大. 卡点:无 C++ Code: #include ...

  9. [洛谷P1120]小木棍 ［数据加强版］

    题目大意:有一些同样长的木棍,被切割成几段(长$\leqslant$50).给出每段小木棍的长度,找出原始木棍的最小可能长度. 题解:dfs C++ Code: #include<cstdio& ...

  10. vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图，折线图)

    一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...