H5坦克大战之【建造敌人的坦克】
接着上一篇（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坦克大战之【建造敌人的坦克】的更多相关文章
- Java坦克大战 (五) 之产生敌方坦克和爆炸效果
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- HTML5坦克大战（1）绘制坦克
坦克尺寸如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- HTML5坦克大战（2）绘制坦克复习
html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- H5坦克大战之【玩家控制坦克移动2】
周一没有看圣诞大战,这几天比较忙也没有看赛后的报道,今天就先不扯NBA,随便扯扯自己.昨天在电脑里找东西的时候翻到以前兼职健身教练时的照片,思绪一下子回到学生时代,脑子久久换不过来.现在深深觉得健身和 ...
- H5坦克大战之【玩家控制坦克移动】
自从威少砍下45+11+11的大号三双之后,网上出现了各种各样的神级段子,有一条是这样的: 威少:Hey,哥们,最近过得咋样! 浓眉:对方开启了好友验证,请先添加对方为好友 威少:...... JRS ...
- H5坦克大战之【画出坦克】
今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...
- 【 java版坦克大战--绘图技术】 绘制坦克
通过上一节,我们学会的用java绘图.那现在就用java绘制自己坦克. 首先通过分析坦克由这几部分组成.如图 各个部件的长宽如图.15,10为圆心. /** * 坦克游戏的1.0版 * 1.画出坦克 ...
- cocos2d-x游戏开发系列教程-坦克大战游戏之虚拟手柄控制坦克移动
上篇显示了控制手柄,但是还不能用来控制坦克, 这篇将会讲手柄和坦克的移动结合起来. 1.先在CityScene场景中实现场景的虚函数virtual void onEnter(); onEnter在进入 ...
- H5 canvas建造敌人坦克
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html),这一篇建造敌人的坦克. 思路是,基于可扩展性和性能等方面的考虑,用构造函数改造 ...
随机推荐
- Socket聊天程序——初始设计
写在前面: 可能是临近期末了,各种课程设计接踵而来,最近在csdn上看到2个一样问答(问题A,问题B),那就是编写一个基于socket的聊天程序,正好最近刚用socket做了一些事,出于兴趣,自己抽了 ...
- Linux CentOS 配置Tomcat环境
一.下载Tomcat 下载Tomcat方式也有两种,可以参考我的前一篇博文Linux CentOS配置JDK环境,这边就不再赘述. 二.在Linux处理Tomcat包 1.创建tomcat文件夹 mk ...
- 构建通用的 React 和 Node 应用
这是一篇非常优秀的 React 教程,这篇文章对 React 组件.React Router 以及 Node 做了很好的梳理.我是 9 月份读的该文章,当时跟着教程做了一遍,收获很大.但是由于时间原因 ...
- 苹果强制使用HTTPS传输了怎么办？——关于HTTPS，APP开发者必须知道的事
WeTest 导读 2017年1月1日起,苹果公司将强制使用HTTPS协议传输.本文通过对HTTPS基础原理和通信过程内容的讲解,介绍APP开发者在这个背景下的应对办法. 几周前,我们在<htt ...
- PHP与API讲解（一）
了解API: 在使用与创建自己的API之前我们需要先了解什么是API! API代表应用程序编程接口,而接口指的是一个特定的服务.一个应用程序或者其他程序的公共模块. 理解SOA(面向服务的架构):SO ...
- Angular源码分析之$compile
@(Angular) $compile,在Angular中即"编译"服务,它涉及到Angular应用的"编译"和"链接"两个阶段,根据从DO ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- [EasyUI美化换肤]更换EasyUi图标
前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是响应式..本身EasyUI就不是响应式. ...
- ASP.NET MVC关于Ajax以及Jquery的无限级联动
---恢复内容开始--- 第一次发表博文,发表博文的目的是巩固自己的技术,也能够共享给大家.写的不好的地方,希望大家多给给意见.老司机勿喷 数据结构() NewsTypeId 新闻ID, NewsTy ...
- Configure a VLAN on top of a team with NetworkManager (nmcli) in RHEL7
SOLUTION VERIFIED September 13 2016 KB1248793 Environment Red Hat Enterprise Linux 7 NetworkManager ...