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

html代码：

<!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);  

    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;

            }  

            var timer=window.setInterval("heroBullet.run()",50);

            heroBullet.timer=timer;

        }

    }  

    //定义一个hero类

    //x、y表示初始坐标，direct表示方向

    function  EnemyTanke(x,y,direct,color){

        this.tanke=TanK;

        this.tanke(x,y,direct,color);

    }  

    //画自己的子弹

    function  drawHeroBullet(){

        if(heroBullet!=null&&heroBullet.isLive){

            cxt.fillStyle="#FEF26E";

            cxt.fillRect(heroBullet.x,heroBullet.y,2,2);

        }

    }  

    //把创建坦克的方法封装为一个对象

    //该函数可以画自己的坦克，也可以画敌人的坦克

    //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；

HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能（二）的更多相关文章

  1. Java坦克大战（三）

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

  2. JAVA课程设计（坦克大战）

    2019-01-16 坦克大战游戏背景: 1. 需求分析 1.1环境要求 操作系统:Windows 7(SP1)以上 JAVA虚拟机:JDK1.8以上 开发环境:Eclipse(4.5以上) 1.2角 ...

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

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

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

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

  5. HTML5坦克大战1

    在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...

  6. HTML5坦克大战

    在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...

  7. html5制作坦克大战

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

  8. [置顶] 小强的HTML5移动开发之路（9）——坦克大战游戏3

    上一篇我们创建了敌人的坦克和自己的坦克,接下来就应该让坦克发子弹了,我们下面来看一下如何让我们的坦克发出子弹. 前面我们用面向对象的思想对Tank进行了封装,又利用对象冒充实现了我们的坦克和敌人的坦克 ...

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

    来自:http://blog.csdn.net/cai_xingyun/article/details/48629015 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接 ...

随机推荐

  1. Android 之Buletooth

    一:概要: Android提供了Buletooth的API ,通过API 我们可以进行如下的一些操作: 1.扫描其他的蓝牙设备 2.查询能配对的蓝牙设备 3.建立RFCOMM 通道 4.连接其他的蓝牙 ...

  2. 树莓派搭建 Hexo 博客（二）

    Hexo 一个开源的博客框架,本文记录了一下在树莓派上搭建 Hexo 博客的过程. 上一篇介绍了 Hexo 的配置,现在网站已经能在本地访问了,也能通过 hexo generate 命令生成静态界面 ...

  3. OpenCV尺寸调整

    #include<cv.h> #include<highgui.h> int main(int argc, char** argv) { IplImage* img = cvL ...

  4. Java中break和continue的区别

    continue,继续下一个循环的运算, break,跳出循环

  5. Spring 集成Quartz

    在使用jdk的timer时发现无法在指定的日期进行执行任务.这便引入一个优秀的开源任务调度框架“quartz”.这里使用的是quartz-1.8.6版本.Quart的官网:http://www.qua ...

  6. arc073 F many moves(dp + 线段树)

    设dp[i][y]表示一个点在x[i],另一个点在y时最小要走的步数 那么有以下转移 对于y != x[i-1]的状态,可以证明,他们直接加|x[i] - x[i-1]|即可(如果有其他方案,不符合对 ...

  7. 2018宁夏邀请赛K Vertex Covers

    题目链接:https://nanti.jisuanke.com/t/28411 题意: 给出n(n<=36)个点的一个图.求点覆盖集数. 题解: 将n个点折半为L和R两部分.对于R内部的边,枚举 ...

  8. [学习笔记]扩展LUCAS定理

    可以先做这个题[SDOI2010]古代猪文 此算法和LUCAS定理没有半毛钱关系. [模板]扩展卢卡斯 不保证P是质数. $C_n^m=\frac{n!}{m!(n-m)!}$ 麻烦的是分母. 如果互 ...

  9. 用原生JavaScript做个简单的回到顶部

    很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在 ...

  10. Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition) C （用map 超时）

    C. Bear and Colors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...