H5 canvas建造敌人坦克
接着上一篇（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 canvas建造敌人坦克的更多相关文章
- 使用H5 canvas画一个坦克
具体步骤如下: 1. 首先做出绘图区,作为坦克的战场 <canvas id="floor" width="800px" height=&quo ...
- H5坦克大战之【建造敌人的坦克】
公司这几天在准备新版本的上线,今天才忙里偷闲来写这篇博客.接着上一篇的"H5坦克大战之[玩家控制坦克移动2]"(http://www.cnblogs.com/zhouhuan/ ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- H5 canvas控制坦克移动2
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame2.html),这篇主要修复两个bug,第一,玩家按下方向键时,坦克的炮筒应该指向相应的方向,并向 ...
- H5 canvas控制坦克移动
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame.html),这一篇研究一下怎么响应玩家的操作让坦克进行相应的移动. 1. 了解keydown ...
- HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能（二）
上一篇博客只画出了,一个坦克,并让其可以上下左右移动,这篇博客将画出敌人的坦克,并让自己的坦克可以发子弹,但是还不是尽善尽美,还有一些问题,将会在下篇博客说明: html代码: <!DOCTYP ...
- H5 canvas填充文字自动换行
canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...
随机推荐
- MUI窗口管理
参考:窗口管理 http://dev.dcloud.net.cn/mui/window/ 页面初始化:在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,m ...
- AIX系统崩溃后oracle数据库的恢复方法
首先要确保数据库实例的完整性,包括控制文件,日志文件,表空间(系统表空间.用户表空间等). 新建同名数据库实例(表空间.用户等不需要). Sql>shutdown immediate关闭数据库 ...
- 310实验室(七)OptimizationTemplateLibrary
利用泛型编程思想,C++模板. 首先定义变量或者重新typedef variables: 模板中的变量:_TRandom.double _TReal._TProblem::TDecision _TD ...
- 如何通过命令在Ubuntu中安装PyCharm
对于Ubuntu 16.10和Ubuntu 17.04,通过Ctrl + Alt + T打开终端,或通过从应用启动器搜索“terminal”,打开后,执行以下步骤: 安装: 1.通过命令添加PPA存储 ...
- 【转载】细说 Form (表单)
Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助我们简化开发工作,做了很完 ...
- windows 系统无法启动windows event log 服务
windows 系统无法启动windows event log 服务 关键词:无法启动系统事件日志 尝试解决步骤 [1]权限:把如图中logsfile文件等都给local service [2]把C: ...
- oracle基于3种方法的大数据量插入更新
过程插入更新的3种方法: a.逐条检查插入或更新,同时执行插入或更新 b.逐条merge into(逐条是为了记录过程日志与错误信息) c.基于关联数组的检查插入.更新,通过forall批量sql执行 ...
- docker——三剑客之Docker Machine
Docker Machine是Docker官方三剑客项目之一,负责使用Docker的第一步,在多种平台上快速安装Docker环境.它支持多种平台,让用户在很短时间内搭建一套Docker主机集群. Ma ...
- 全自动照片美化软件Photolemur mac特别版
今天小编为大家带来的是世界上首个支持全自动照片美化的软件Photolemur mac特别版.Photolemur中文特别版采用了全新的人工智能AI系统,它能够全自动智能的对您的照片进行曝光.亮度.降噪 ...
- Could not load file or assembly 'Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, ...
使用oracle数据库一个多月依赖这问题一直都得不到解决,最近任务不是很忙了,所以决定把这问题解决掉.写一篇文章做记录. 以上错误主要是net程序oracle数据库使用了Microsoft Enter ...