接着上一篇（http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html），这一篇建造敌人的坦克。
　　思路是，基于可扩展性和性能等方面的考虑，用构造函数改造之前的部分代码，再在这个基础上，实例化出来不同的坦克。
 
　　1.一开始的两个步骤不变
//封装一个获取绘图环境的函数

function getCxt(){

    var myCanvas = document.getElementById('floor'),

       myContext = myCanvas.getContext('2d');

    return myContext;

}

//为了防止重复地获取节点影响性能，我们将获取到的绘图环境（也就是画笔对象）存起来

var oCxt = getCxt();
　　2.接下来对画坦克的函数进行适当改写，因为函数里重复代码过多，同时，增加两个颜色的参数，方便后面画出不同的坦克：
//封装一个画坦克的函数，传两个参数x,y,分别代表左上角的横纵坐标

//再增加一个参数dir来表示方向 上下左右分别传"u" "d" "l" "r"

//再增加两个参数color1与color2，用来表示坦克身上的两种颜色，方便造出不同的坦克

function drawTank(x,y,dir,color1,color2){

    switch(dir){

        case "u":

        case "d":

            oCxt.fillStyle = color1;

            oCxt.fillRect(x,y,20,65);

            oCxt.fillRect(x+70,y,20,65);

            oCxt.fillRect(x+23,y+10,44,50);

            oCxt.fillStyle = color2;

            oCxt.beginPath();

            oCxt.arc(x+45,y+35,16,0,2*Math.PI,false);

            oCxt.closePath();

            oCxt.fill();

            oCxt.strokeStyle = color2;

            oCxt.lineWidth = "8.0";

            oCxt.moveTo(x+45,y+35);

            if(dir == "u"){

                oCxt.lineTo(x+45,y-25);

            }else if(dir == "d"){

                oCxt.lineTo(x+45,y+95);

            }

            oCxt.stroke();

            break;

        case "l":

        case "r":

            oCxt.fillStyle = color1;

            oCxt.fillRect(x,y,65,20);

            oCxt.fillRect(x,y+70,65,20);

            oCxt.fillRect(x+10,y+23,50,44);

            oCxt.fillStyle = color2;

            oCxt.beginPath();

            oCxt.arc(x+35,y+45,16,0,2*Math.PI,false);

            oCxt.closePath();

            oCxt.fill();

            oCxt.strokeStyle = color2;

            oCxt.lineWidth = "8.0";

            oCxt.moveTo(x+35,y+45);

            if(dir == "l"){

                oCxt.lineTo(x-25,y+45);

            }else if(dir == "r"){

                oCxt.lineTo(x+95,y+45);

            }

            oCxt.stroke();

    }

}
　　3.又考虑到函数传参过多，使用函数的话比较麻烦，所以对函数进行进一步的封装，干脆传一个对象进去，就成了下面这样：
function drawTank(tankName){

    switch(tankName.dir){

        case "u":

        case "d":

            oCxt.fillStyle = tankName.color1;

            oCxt.fillRect(tankName.x,tankName.y,20,65);

            oCxt.fillRect(tankName.x+70,tankName.y,20,65);

            oCxt.fillRect(tankName.x+23,tankName.y+10,44,50);

            oCxt.fillStyle = tankName.color2;

            oCxt.beginPath();

            oCxt.arc(tankName.x+45,tankName.y+35,16,0,2*Math.PI,false);

            oCxt.closePath();

            oCxt.fill();

            oCxt.strokeStyle = tankName.color2;

            oCxt.lineWidth = "8.0";

            oCxt.moveTo(tankName.x+45,tankName.y+35);

            if(tankName.dir == "u"){

                oCxt.lineTo(tankName.x+45,tankName.y-25);

            }else if(tankName.dir == "d"){

                oCxt.lineTo(tankName.x+45,tankName.y+95);

            }

            oCxt.stroke();

            break;

        case "l":

        case "r":

            oCxt.fillStyle = tankName.color1;

            oCxt.fillRect(tankName.x,tankName.y,65,20);

            oCxt.fillRect(tankName.x,tankName.y+70,65,20);

            oCxt.fillRect(tankName.x+10,tankName.y+23,50,44);

            oCxt.fillStyle = tankName.color2;

            oCxt.beginPath();

            oCxt.arc(tankName.x+35,tankName.y+45,16,0,2*Math.PI,false);

            oCxt.closePath();

            oCxt.fill();

            oCxt.strokeStyle = tankName.color2;

            oCxt.lineWidth = "8.0";

            oCxt.moveTo(tankName.x+35,tankName.y+45);

            if(tankName.dir == "l"){

                oCxt.lineTo(tankName.x-25,tankName.y+45);

            }else if(tankName.dir == "r"){

                oCxt.lineTo(tankName.x+95,tankName.y+45);

            }

            oCxt.stroke();

    }

}
　　4.接下来不再专门创建一个myTank对象来存储相关的属性和方法，而是采用构造函数的方法，写好构造函数之后，创建对象的时候new出来并传参即可，如下：
//使用构造函数来创建对象

function Tank(x,y,dir,color1,color2){

    this.x = x;

    this.y = y;

    this.dir = dir;

    this.step = 3,

    this.color1 = color1;

    this.color2 = color2;

    this.turnUp = function(){

        if((this.y-25) >= 0){

            this.y -= this.step;

            this.dir = "u";

        }

    };

    this.turnDown = function(){

        if((this.y+90) <= 500){

            this.y += this.step;

            this.dir = "d";

        }

    };

    this.turnLeft = function(){

        if((this.x-25) >= 0){

            this.x -= this.step;

            this.dir = "l";

        }

    };

    this.turnRight = function(){

        if((this.x+90) <= 800){

            this.x += this.step;

            this.dir = "r";

        }

    };

}

//创建我的坦克时new出来并传参

var myTank = new Tank(350,400,"u","#542174","#FCB827");
　　5.接下来创建敌人的坦克，我的想法是，敌人的坦克是多个，如果一个一个地new出来会比较麻烦，而且可扩展性比较差，因为如果要增加几个或者减少几个的话就要大面积地改动代码，所以可以做成一个数组，这里先做三个：
//创建敌人的坦克,有多个所以做成数组，再将数组每一项new出来并传参即可

//这里以骑士队的主色建造坦克

var enemyTank = new Array();

for(var i=0; i<3; i++){

    enemyTank[i] = new Tank(240*(i+0.45),60,"d","#EBB227","#780910");

}
　　前两个参数x和y也是一点点试出来的，将坦克调整到合适的位置即可。
　　其实接下来也可以不用先画一个坦克出来，因为间歇调用的间隔时间是100ms，很短，几乎看不出来，所以可以只在更新战场的函数里画坦克，外面就不用了：
//封装一个更新战场的函数

function updateFloor(){

    oCxt.clearRect(0,0,800,500);            //更新之前先清除画布

    drawTank(myTank);

    for(var i=0; i<enemyTank.length; i++){

        drawTank(enemyTank[i]);        //循环一下把每一个敌人造出来

    }

}

//设置一个间歇调用的函数，每隔100ms更新一下战场

setInterval(function(){

    updateFloor();

},100);
　　6.响应玩家的操作指令一步也没有变化：
//响应玩家的操作指令

window.onkeydown = function(eve){

    switch(eve.keyCode){

        case 38:

        case 87:

            myTank.turnUp();

            break;

        case 40:

        case 83:

            myTank.turnDown();

            break;

        case 37:

        case 65:

            myTank.turnLeft();

            break;

        case 39:

        case 68:

            myTank.turnRight();

    }

};
　　到这一步就已经可以建造出敌人的坦克（并自由控制自己的坦克）了，运行之后结果如下：

　　7.最终代码：
//封装一个获取绘图环境的函数

function getCxt(){

    var myCanvas = document.getElementById('floor'),

       myContext = myCanvas.getContext('2d');

    return myContext;

}

//为了防止重复地获取节点影响性能，我们将获取到的绘图环境（也就是画笔对象）存起来

var oCxt = getCxt();

//封装一个画坦克的函数，传两个参数x,y,分别代表左上角的横纵坐标

//再增加一个参数dir来表示方向 上下左右分别传"u" "d" "l" "r"

//再增加两个参数color1与color2，用来表示坦克身上的两种颜色，方便造出不同的坦克

//对函数进一步封装，尽量让使用变得简单

function drawTank(tankName){

    switch(tankName.dir){

        case "u":

        case "d":

            oCxt.fillStyle = tankName.color1;

            oCxt.fillRect(tankName.x,tankName.y,20,65);

            oCxt.fillRect(tankName.x+70,tankName.y,20,65);

            oCxt.fillRect(tankName.x+23,tankName.y+10,44,50);

            oCxt.fillStyle = tankName.color2;

            oCxt.beginPath();

            oCxt.arc(tankName.x+45,tankName.y+35,16,0,2*Math.PI,false);

            oCxt.closePath();

            oCxt.fill();

            oCxt.strokeStyle = tankName.color2;

            oCxt.lineWidth = "8.0";

            oCxt.moveTo(tankName.x+45,tankName.y+35);

            if(tankName.dir == "u"){

                oCxt.lineTo(tankName.x+45,tankName.y-25);

            }else if(tankName.dir == "d"){

                oCxt.lineTo(tankName.x+45,tankName.y+95);

            }

            oCxt.stroke();

            break;

        case "l":

        case "r":

            oCxt.fillStyle = tankName.color1;

            oCxt.fillRect(tankName.x,tankName.y,65,20);

            oCxt.fillRect(tankName.x,tankName.y+70,65,20);

            oCxt.fillRect(tankName.x+10,tankName.y+23,50,44);

            oCxt.fillStyle = tankName.color2;

            oCxt.beginPath();

            oCxt.arc(tankName.x+35,tankName.y+45,16,0,2*Math.PI,false);

            oCxt.closePath();

            oCxt.fill();

            oCxt.strokeStyle = tankName.color2;

            oCxt.lineWidth = "8.0";

            oCxt.moveTo(tankName.x+35,tankName.y+45);

            if(tankName.dir == "l"){

                oCxt.lineTo(tankName.x-25,tankName.y+45);

            }else if(tankName.dir == "r"){

                oCxt.lineTo(tankName.x+95,tankName.y+45);

            }

            oCxt.stroke();

    }

}

//使用构造函数来创建对象

function Tank(x,y,dir,color1,color2){

    this.x = x;

    this.y = y;

    this.dir = dir;

    this.step = 3,

    this.color1 = color1;

    this.color2 = color2;

    this.turnUp = function(){

        if((this.y-25) >= 0){

            this.y -= this.step;

            this.dir = "u";

        }

    };

    this.turnDown = function(){

        if((this.y+90) <= 500){

            this.y += this.step;

            this.dir = "d";

        }

    };

    this.turnLeft = function(){

        if((this.x-25) >= 0){

            this.x -= this.step;

            this.dir = "l";

        }

    };

    this.turnRight = function(){

        if((this.x+90) <= 800){

            this.x += this.step;

            this.dir = "r";

        }

    };

}

//实例化我的坦克时new出来并传参

var myTank = new Tank(350,400,"u","#542174","#FCB827");

//实例化敌人的坦克,有多个所以做成数组，再将数组每一项new出来并传参即可

//这里以骑士队的主色画坦克

var enemyTank = new Array();

for(var i=0; i<3; i++){

    enemyTank[i] = new Tank(240*(i+0.45),60,"d","#EBB227","#780910");

}

//封装一个更新战场的函数

function updateFloor(){

    oCxt.clearRect(0,0,800,500);            //更新之前先清除画布

    drawTank(myTank);

    for(var i=0; i<enemyTank.length; i++){

        drawTank(enemyTank[i]);                //循环一下把每一个敌人造出来

    }

}

//设置一个间歇调用的函数，每隔100ms更新一下战场

setInterval(function(){

    updateFloor();

},100);

//响应玩家的操作指令

window.onkeydown = function(eve){

    switch(eve.keyCode){

        case 38:

        case 87:

            myTank.turnUp();

            break;

        case 40:

        case 83:

            myTank.turnDown();

            break;

        case 37:

        case 65:

            myTank.turnLeft();

            break;

        case 39:

        case 68:

            myTank.turnRight();

    }

};
 

H5坦克大战之【建造敌人的坦克】的更多相关文章

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

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

  2. HTML5坦克大战（1）绘制坦克

    坦克尺寸如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

  3. HTML5坦克大战（2）绘制坦克复习

    html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

  4. H5坦克大战之【玩家控制坦克移动2】

    周一没有看圣诞大战,这几天比较忙也没有看赛后的报道,今天就先不扯NBA,随便扯扯自己.昨天在电脑里找东西的时候翻到以前兼职健身教练时的照片,思绪一下子回到学生时代,脑子久久换不过来.现在深深觉得健身和 ...

  5. H5坦克大战之【玩家控制坦克移动】

    自从威少砍下45+11+11的大号三双之后,网上出现了各种各样的神级段子,有一条是这样的: 威少:Hey,哥们,最近过得咋样! 浓眉:对方开启了好友验证,请先添加对方为好友 威少:...... JRS ...

  6. H5坦克大战之【画出坦克】

    今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...

  7. 【 java版坦克大战--绘图技术】 绘制坦克

    通过上一节,我们学会的用java绘图.那现在就用java绘制自己坦克. 首先通过分析坦克由这几部分组成.如图 各个部件的长宽如图.15,10为圆心. /** * 坦克游戏的1.0版 * 1.画出坦克 ...

  8. cocos2d-x游戏开发系列教程-坦克大战游戏之虚拟手柄控制坦克移动

    上篇显示了控制手柄,但是还不能用来控制坦克, 这篇将会讲手柄和坦克的移动结合起来. 1.先在CityScene场景中实现场景的虚函数virtual void onEnter(); onEnter在进入 ...

  9. H5 canvas建造敌人坦克

      接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html),这一篇建造敌人的坦克. 思路是,基于可扩展性和性能等方面的考虑,用构造函数改造 ...

随机推荐

  1. Pivot 和 Unpivot

    在TSQL中,使用Pivot和Unpivot运算符将一个关系表转换成另外一个关系表,两个命令实现的操作是“相反”的,但是,pivot之后,不能通过unpivot将数据还原.这两个运算符的操作数比较复杂 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（64）-补充WebApi与Unity注入-配置文件

    系列目录 上一篇演示了WebApi利用Unity注入 很多人问我如何用配置文件来配置注入,本节演示如何利用配置文件来注入,道理是一样的,跳转到上一节下载源码一起来动手! 1.打开源码定位到文件Depe ...

  4. SignalR SelfHost实时消息,集成到web中，实现服务器消息推送

    先前用过两次SignalR,但是中途有段时间没弄了,今天重新弄,发现已经忘得差不多了,做个笔记! 首先创建一个控制台项目Nuget添加引用联机搜索:Microsoft.AspNet.SignalR.S ...

  5. 问题记录：EntityFramework 一对一关系映射

    EntityFramework 一对一关系映射有很多种,比如主键作为关联,配置比较简单,示例代码: public class Teacher { public int Id { get; set; } ...

  6. C#反序列化XML异常：在 XML文档(0, 0)中有一个错误“缺少根元素”

    Q: 在反序列化 Xml 字符串为 Xml 对象时,抛出如下异常. 即在 XML文档(0, 0)中有一个错误:缺少根元素. A: 首先看下代码: StringBuilder sb = new Stri ...

  7. eclipse — 导入android项目后识别成java项目的问题及解决

    最近在eclipse导入android项目的时候遇到了奇葩问题,再此记录 遇到的问题就是:将完好的android项目导入到eclipse的时候,原本这是一个很容易的事情,但是导入成功后发现,,,靠ec ...

  8. Android 算法 关于递归和二分法的小算法

     // 1. 实现一个函数,在一个有序整型数组中二分查找出指定的值,找到则返回该值的位置,找不到返回 -1. package demo; public class Mytest { public st ...

  9. Linux虚拟化学习笔记<一>

    关于虚拟化,原理的东西是非常复杂的,要想完全理解,没有足够的耐心是不不能完全学透这部分内容的.那下面我主要以资源汇总的形式把一些资料罗列出来,帮助大家快速理解虚拟化,快速使用和配置. 为什么要虚拟化: ...

  10. PowerShell 数组以及XML操作

    PowerShell基础 PowerShell数组操作 将字符串拆分成数据的操作 cls #原始字符串 $str = "abc,def,ghi,mon" #数据定义 #$StrAr ...