接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame2.html),这篇主要修复两个bug,第一,玩家按下方向键时,坦克的炮筒应该指向相应的方向,并向该方向移动,第二,坦克不能开出边界,上一节的代码坦克是可以开出边界的,这样显然是不行的。
 
  1. 修复第一个bug
  我们的思路是,给造坦克的函数里再传一个方向的参数,我们让"u", "d", "l", "r"分别表示上下左右,封装这样一个可以传方向的函数之后,我们在用户按下不同的键时传不同的参数进去,由于整个地板每隔100毫秒会刷新一次,那么这个函数就能以肉眼分辨不出来的速度,在用户按下键的一瞬间相应地生产出不同方向的坦克了。

  如下:
//封装一个画坦克的函数,传两个参数x,y,分别代表左上角的横纵坐标
//再增加一个参数dir来表示方向 上下左右分别传"u" "d" "l" "r"
function drawTank(x,y,dir){
var cxt = getCxt();
switch(dir){
case "u": //此时造一个向上的坦克
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,20,65);
cxt.fillRect(x+70,y,20,65);
cxt.fillRect(x+23,y+10,44,50);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+45,y+35,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+45,y+35);
cxt.lineTo(x+45,y-25);
cxt.stroke();
break;
case "d": //此时造向下的坦克
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,20,65);
cxt.fillRect(x+70,y,20,65);
cxt.fillRect(x+23,y+10,44,50);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+45,y+35,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+45,y+35);
cxt.lineTo(x+45,y+95); //和向上造相比,只有炮筒需要改变
cxt.stroke();
break;
case "l": //此时造向左的坦克
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,65,20); //和向上造坦克相比,画第一个矩形时长宽互换即可
cxt.fillRect(x,y+70,65,20); //向左的坦克,注意坐标之间的转换即可,以下类似不再一一解释
cxt.fillRect(x+10,y+23,50,44);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+35,y+45,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+35,y+45);
cxt.lineTo(x-25,y+45);
cxt.stroke();
break;
case "r":
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,65,20); //和造向左的坦克类似,只要改动炮筒即可向右
cxt.fillRect(x,y+70,65,20);
cxt.fillRect(x+10,y+23,50,44);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+35,y+45,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+35,y+45);
cxt.lineTo(x+95,y+45);
cxt.stroke();
}
}
  和之前不同的是,我们增加了一个switch语句,用来判断传进来的方向,然后将不同的画坦克的动作放进不同的case分支里。看起来代码量很大,但其实都是从向上画的代码改过来的,难度不大,具体一些的说明都写在了注释里。
  接下来我们给myTank这个对象增加一个属性direction,用来确定坦克的方向,初始的时候我们让它等于"u",画一个向上的坦克。
  相应地,造坦克的时候多传一个参数进去就可以了:
drawTank(myTank.x,myTank.y,myTank.direction);
  再接着我们要做的就是在玩家按下不同的键时响应的改变方向就可以了:
window.onkeydown = function(eve){
switch(eve.keyCode){
case 38:
case 87:
myTank.y -= myTank.step; //Y坐标减小向上移动
myTank.direction = "u"; //改变成向上的方向
break;
case 40:
case 83:
myTank.y += myTank.step; //Y坐标增加向下移动
myTank.direction = "d"; //改变为向下的方向
break;
case 37:
case 65:
myTank.x -= myTank.step; //X坐标减小向左移动
myTank.direction = "l"; //改变为向左的方向
break;
case 39:
case 68:
myTank.x += myTank.step; //X坐标增加向右移动
myTank.direction = "r"; //改变为向右的方向
}
};
  不过,我们最好再做进一步的封装,首先给myTank对象增加一些方法:
myTank.turnUp = function(){
myTank.y -= myTank.step;
myTank.direction = "u";
};
myTank.turnDown = function(){
myTank.y += myTank.step;
myTank.direction = "d";
};
myTank.turnLeft = function(){
myTank.x -= myTank.step;
myTank.direction = "l";
};
myTank.turnRight = function(){
myTank.x += myTank.step;
myTank.direction = "r";
};
  再根据玩家的操作进行相应地调用:
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();
}
};
  给myTank对象添加的属性和方法多了之后这样看着很烦,可读性也比较差,我们有必要对它进行改动:
var myTank = {
x : 350,
y : 400,
step : 3,
direction : "u",
turnUp : function(){
myTank.y -= myTank.step;
myTank.direction = "u";
},
turnDown : function(){
myTank.y += myTank.step;
myTank.direction = "d";
},
turnLeft : function(){
myTank.x -= myTank.step;
myTank.direction = "l";
},
turnRight : function(){
myTank.x += myTank.step;
myTank.direction = "r";
}
};
  嗯,这样看着舒服多了。
 
  2.解决第二个bug
  我们的思路是,重新封装一下turnUp turnDown turnLeft turnRight这几个方法,给里面加上判断条件,如果判断为将要出界,那么不再执行改变坐标的代码,这样,坦克就只能在可视区内运动了。具体判断方法如下:
  坦克如果将要开出上面的边界,那么开出去之前它一定是向上的,此时(myTank.x, myTank.y)点是坦克左边履带左上角的点,我们暂且将这个点称为原点,再回头看一下向上画坦克时的代码:cxt.arc(x+45,y+35,16,0,2*Math.PI,false); 可知圆盖中心点(也就是炮筒的起点)和原点之间的纵向距离为35,又易知炮筒的总长度为60(cxt.moveTo(x+45,y+35); cxt.lineTo(x+45,y-25);),那么显然炮筒的起点与原点的纵向距离就是25,所以我们就可以这样判断,坦克的y坐标减去25大于等于0的时候我们再让坦克向上动起来,转化成代码就是:
var myTank = {
turnUp : function(){
if((myTank.y-25) >= 0){
myTank.y -= myTank.step;
myTank.direction = "u";
}
}
};
  这时候,坦克就不会再超出上面的边界了。
  坦克向下移动的时候,我们把坦克履带的长度考虑进去就可以了,如下:
var myTank = {
turnDown : function(){
if((myTank.y+90) <= 500){
myTank.y += myTank.step;
myTank.direction = "d";
}
}
};
  同理坦克向左和向右移动时如下:
var myTank = {
turnLeft : function(){
if((myTank.x-25) >= 0){
myTank.x -= myTank.step;
myTank.direction = "l";
}
},
turnRight : function(){
if((myTank.x+90) <= 800){
myTank.x += myTank.step;
myTank.direction = "r";
}
}
};
  3. 补充说明
  上一节的代码其实存在一定的问题,就是每一次更新战场的时候都会去getCxt()一下,清理了战场之后后面又会drawTank(), drawTank()里面又有getCxt(),这样就会重复不断地获取同一个节点,而且更新战场的函数每100毫秒执行一次,虽然不会影响功能,但是会影响到游戏的性能,我们可以定义一个变量专门用来存放获取到的绘图环境,后面需要的时候直接用就好了。
 
  4. 最终代码
//封装一个获取绘图环境的函数
function getCxt(){
var myCanvas = document.getElementById('floor'),
myContext = myCanvas.getContext('2d');
return myContext;
}
//为了防止重复地获取节点影响性能,我们将获取到的绘图环境(也就是画笔对象)存起来
var oCxt = getCxt(); //封装一个画坦克的函数,传两个参数x,y,分别代表左上角的横纵坐标
//再增加一个参数dir来表示方向 上下左右分别传"u" "d" "l" "r"
function drawTank(x,y,dir){
switch(dir){
case "u": //此时造一个向上的坦克
oCxt.fillStyle = "#542174";
oCxt.fillRect(x,y,20,65);
oCxt.fillRect(x+70,y,20,65);
oCxt.fillRect(x+23,y+10,44,50);
oCxt.fillStyle = "#FCB827";
oCxt.beginPath();
oCxt.arc(x+45,y+35,16,0,2*Math.PI,false);
oCxt.closePath();
oCxt.fill();
oCxt.strokeStyle = "#FCB827";
oCxt.lineWidth = "8.0";
oCxt.moveTo(x+45,y+35);
oCxt.lineTo(x+45,y-25);
oCxt.stroke();
break;
case "d": //此时造向下的坦克
oCxt.fillStyle = "#542174";
oCxt.fillRect(x,y,20,65);
oCxt.fillRect(x+70,y,20,65);
oCxt.fillRect(x+23,y+10,44,50);
oCxt.fillStyle = "#FCB827";
oCxt.beginPath();
oCxt.arc(x+45,y+35,16,0,2*Math.PI,false);
oCxt.closePath();
oCxt.fill();
oCxt.strokeStyle = "#FCB827";
oCxt.lineWidth = "8.0";
oCxt.moveTo(x+45,y+35);
oCxt.lineTo(x+45,y+95); //和向上造相比,只有炮筒需要改变
oCxt.stroke();
break;
case "l": //此时造向左的坦克
oCxt.fillStyle = "#542174";
oCxt.fillRect(x,y,65,20); //和向上造坦克相比,画第一个矩形时长宽互换即可
oCxt.fillRect(x,y+70,65,20); //向左的坦克,注意坐标之间的转换即可,以下类似不再一一解释
oCxt.fillRect(x+10,y+23,50,44);
oCxt.fillStyle = "#FCB827";
oCxt.beginPath();
oCxt.arc(x+35,y+45,16,0,2*Math.PI,false);
oCxt.closePath();
oCxt.fill();
oCxt.strokeStyle = "#FCB827";
oCxt.lineWidth = "8.0";
oCxt.moveTo(x+35,y+45);
oCxt.lineTo(x-25,y+45);
oCxt.stroke();
break;
case "r":
oCxt.fillStyle = "#542174";
oCxt.fillRect(x,y,65,20); //和造向左的坦克类似,只要改动炮筒即可向右
oCxt.fillRect(x,y+70,65,20);
oCxt.fillRect(x+10,y+23,50,44);
oCxt.fillStyle = "#FCB827";
oCxt.beginPath();
oCxt.arc(x+35,y+45,16,0,2*Math.PI,false);
oCxt.closePath();
oCxt.fill();
oCxt.strokeStyle = "#FCB827";
oCxt.lineWidth = "8.0";
oCxt.moveTo(x+35,y+45);
oCxt.lineTo(x+95,y+45);
oCxt.stroke();
}
} //初始化一个对象myTank,用来存储一些属性和方法
var myTank = {
x : 350,
y : 400,
step : 3,
direction : "u",
turnUp : function(){
if((myTank.y-25) >= 0){ //加判断条件防止开出边界
myTank.y -= myTank.step;
myTank.direction = "u";
}
},
turnDown : function(){
if((myTank.y+90) <= 500){
myTank.y += myTank.step;
myTank.direction = "d";
}
},
turnLeft : function(){
if((myTank.x-25) >= 0){
myTank.x -= myTank.step;
myTank.direction = "l";
}
},
turnRight : function(){
if((myTank.x+90) <= 800){
myTank.x += myTank.step;
myTank.direction = "r";
}
}
}; //先画一个坦克出来
drawTank(myTank.x,myTank.y,myTank.direction); //一开始先造一个向上的出来 //封装一个更新战场的函数
function updateFloor(){
oCxt.clearRect(0,0,800,500); //更新之前先清除画布
drawTank(myTank.x,myTank.y,myTank.direction); //清除完之后重新造坦克,坦克要移动就必须实时地根据坐标重新来造
} //设置一个间歇调用的函数,每隔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坦克大战之【玩家控制坦克移动2】的更多相关文章

  1. 《杜增强讲Unity之Tanks坦克大战》3-添加坦克

    3 添加坦克 3.1 本节效果预览   3.2 另存新场景 首先打开上次的场景s1,另存为s2,放到同一个文件夹下面.   3.3 添加坦克模型 在Model文件夹下面找到Tank模型   将Tank ...

  2. cocos2d-x游戏开发系列教程-坦克大战游戏之所有坦克之间的碰撞检测

    上篇我们完成了简单的AI编写,但是各个坦克移动时之间是可以重合的, 这节课我们来完成坦克之间的碰撞检测,还是在上篇的EnemyAI中完成. 1.我先现在坦克类Tank中添加两个成员变量: CC_SYN ...

  3. cocos2d-x游戏开发系列教程-坦克大战游戏之敌方坦克AI的编写

    在上篇我们完成了子弹和地图碰撞的检测,在这篇我们将完成敌方坦克AI的编写. 具体思路是屏幕中保持有四个敌方坦克,然后坦克随机方向运动,并且子弹消失后1秒发射一次 1.我们新建一个敌方坦克的AI类来控制 ...

  4. 【 java版坦克大战--事件处理】 让坦克动起来--事件处理的准备

    要能够控制坦克运动,必须用到事件处理的知识. 事件处理的一个demo. /** * 事件处理机制:委派事件模型.指当事件发生的时候,产生事件的对象(事件源),会把此 * "消息"传 ...

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

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

  6. 《杜增强讲Unity之Tanks坦克大战》11-游戏流程控制

    11 游戏流程控制 使用协程来控制游戏流程 11.1 添加MessageText 首先添加一个Text来显示文字   image 设置GameMgr   image 11.2 游戏整体流程 下面Gam ...

  7. 《杜增强讲Unity之Tanks坦克大战》10-相机控制

    10 相机控制 本节主要学习如何控制相机自动调整位置和焦距,使两个坦克一直同时在视野内.   image 在Hierarchy点击右键   image 点击 Create Empty,生成空对象,改名 ...

  8. html5制作坦克大战

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

  9. 阶段学习总结-坦克大战(2D)案例

    这是前几天学习的案例,这两天学习了NGUI和UGUI,被UI搞得很烦躁,但是今天还是将前几天学习的坦克大战总结以下.这个游戏是小时候的经典红白机游戏的复刻,见截图: 一.游戏物体 游戏中包含地图元素( ...

随机推荐

  1. shell注释

    sh里没有多行注释,只能每一行加一个#号.只能像这样: #-------------------------------------------- # 这是一个自动打ipa的脚本,基于webfrogs ...

  2. 通过Jexus 部署 dotnetcore版本MusicStore 示例程序

    ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mono等)上使用MVC 和Entity Framework的示例程序,本文将展示 ...

  3. Android中手机录屏并转换GIF的两种方式

    之前在博文中为了更好的给大家演示APP的实现效果,本人了解学习了几种给手机录屏的方法,今天就给大家介绍两种我个人用的比较舒服的两种方法: (1)配置adb环境后,使用cmd命令将手机界面操作演示存为视 ...

  4. 07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器

    LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/d ...

  5. JavaScript 开发规范

    本篇主要介绍JS的命名规范.注释规范以及框架开发的一些问题. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框 ...

  6. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  7. Android性能优化之巧用软引用与弱引用优化内存使用

    前言: 从事Android开发的同学都知道移动设备的内存使用是非常敏感的话题,今天我们来看下如何使用软引用与弱引用来优化内存使用.下面来理解几个概念. 1.StrongReference(强引用) 强 ...

  8. 关于font-family

    在设置页面字体的时候,你会发现在 font-family 属性中会设置好多个字体,想看懂它们都是什么字体吗?不好意思,我不是搞设计的,我也不知道.那么,现在写的东西,只是对于一个前端人员来说,要了解的 ...

  9. Android之三种网络请求解析数据(最佳案例)

    AsyncTask解析数据 AsyncTask主要用来更新UI线程,比较耗时的操作可以在AsyncTask中使用. AsyncTask是个抽象类,使用时需要继承这个类,然后调用execute()方法. ...

  10. 海鑫智圣:物联网漫谈之MQTT协议

    什么是MQTT协议 MQTT(消息队列遥测传输协议)是IBM在1999年专门针对物联网等应用场景来制订的轻量级双向消息传输协议,它主要是为了解决物联网上使用到的设备的互相通信的问题,以及这些设备与后端 ...