-
1。创建基本对象，实现坦克的简单运动。
1.1如何在地图上画一个画布
考虑到浏览器兼容性问题，我们使用DOM操作实现游戏对象的渲染和刷新，如何存储地图我们应该把map保存在一个二维数组中，js中没有二维数组，但是可以通过在一维数组中使用存储数组来实现。
1.2代码实现
我们将设计13×13的画布上的二维阵列，在长度和宽度对应的地图的每个元素40px，可以把地图作为一种细胞40px * 40p X尺寸的形式，那么我们整个画布大小是520px * 520px；
在进入代码之前，先给您一个对象图。
1.2.1创建顶级对象
HTML代码：
复制代码代码如下所示：
坦克战
在window.onload =函数（）{
调用游戏对象加载
加载=新GameLoader（）；
装入器。开始（）；
}
tankobject.js文件：
复制代码代码如下所示：
顶部对象
（tankobject =功能）{
this.xposition = 0； / /对象在地图上（13×13）在X的位置
this.yposition = 0；
this.ui = null； / / DOM元素
}
更改静态方法
tankobject.prototype.updateui =功能（battlfiled）{ }
这是 / /位置参数：1 * 40 * 40,6
tankobject.prototype.setposition =功能（leftposition，topposition）{
在四位 / / math.round地图五家
this.xposition = math.round（leftposition / 40）；
this.yposition = math.round（topposition / 40）；
在窗体上设置
如果（this.ui！= null this.ui.style！= NULL）{
this.ui.style.left = leftposition +PX；
this.ui.style.top = topposition +PX；
}
}
在这里，我们使用x，y坐标来表示物体在地图上的位置，然后把每个物体放到一个二维数组中，然后通过x和y坐标得到相应的物体。
然后，CSS中的左边和顶部用来控制我们的对象在窗体中的位置。
1.2.2产生共同的目标
我们还需要创建一个通用对象来编写我们经常使用的一些方法。
Common.js：
复制代码代码如下所示：
坦克的运动方向四。
无功enumdirection = { {
向上：0
右：1
向下：2
左：3
}；
对象/对象/对象的一般方法
Var UtilityClass = { {
/ /创建DOM元素的父节点，您可以指定ID，类名
CreateE：功能（类型、ID、名称、父节点）{
var j = document.createelement（型）；
如果j.id = ID（ID）{ }；
如果j.classname =类名（类名）{ }；
返回parentnode.appendchild（J）；
}，删除元素
RemoveE：功能（obj，parentNode）{
parentnode.removechild（obj）；
}，
getfunctionname：功能（背景，argumentcallee）{
对于（上下文中的var i）{
如果（上下文{我} = = argumentcallee）{ return我}；
}
返回；
}， / /绑定事件，恢复功能，这对传入的对象
bindfunction：功能（obj，func）{
返回函数（）{
Func.apply（obj参数）；
}；
}
}；
1.2.3创建移动对象
mover.js
复制代码代码如下所示：
移动对象，从顶级对象继承
（驱动器=函数）{
这个方向enumdirection了=；
这个，速度= 1；
}
mover.prototype =新tankobject（）；
（mover.prototype.move =功能）{
如果（此锁定）{
返回；停止或仍处于步骤中，操作无效。
}
根据坦克的方向设置背景图片。
this.ui.style.backgroundposition =0+这个方向* 40 +PX；
如果方向是上下的，VP是顶的；如果方向在左边，瓦迩是- 1。
var
（val = VAR（this.direction = enumdirection。上）| |（this.direction = = enumdirection。左）：1 - 1）；
this.lock = true； / * * /锁
当前对象保存到这个
var =；
移动对象记录的起始位置
无功startmovep = parseInt（这个UI。风格{副}）；
var = this.xposition XP，YP = this.yposition；
无功submove = setInterval（）函数（）{
/ /移动，每移动5px
这个UI。风格{ VP } = parseInt（这个UI。风格{副}）+ 5 *瓦尔+PX；
每当一个细胞/移动40px
如果（Math.abs（（parseInt（这个UI。风格{副}）- startmovep））{ > = 40）
ClearInterval（submove）；
this.lock = false； / * * /步骤解锁，允许再次
移动对象的表/记录中的位置
this.xposition = math.round（this.ui.offsetleft / 40）；
this.yposition = math.round（this.ui.offsettop / 40）；
}
}，80 -这个，速度* 10）；
}
这里的移动对象继承了我们的顶级对象，在这里，这表示调用移动方法的对象。
移动的物体移动根据方向和目标速度的函数，而每一次5px移动的40px单细胞。下列对象也将扩大，增加碰撞检测等功能。
1.2.4创建池对象
tank.js文件：
复制代码代码如下所示：
坦克对象从移动体继承
坦克=函数（）{ }
tank.prototype =新发（）；
创建游戏坦克，从坦克对象继承
（selftank =功能）{
this.ui = utilityclass.createe（div
this.movingstate = false；
这个，速度= 4；
}
selftank.prototype =新的坦克（）；
坦克的位置
（selftank.prototype.updateui =功能）{
this.ui.classname =油罐；
顶部对象方法，设置坦克的位置
this.setposition（this.xposition×40，this.yposition×40）；
}
现在只有玩家坦克被创造出来，我们也会在后面加上敌人坦克。
1.2.5创建游戏加载对象（核心）
复制代码代码如下所示：
游戏中包含的核心对象
（gameloader =功能）{
this.mapcontainer = document.getelementbyid（divmap / /店）；游戏地图的div
这个_selftank = null； / /游戏玩家的坦克
这个_gamelistener = null； / /游戏循环定时器的ID
}
gameloader.prototype = { {
开始：（函数）{
初始化游戏玩家坦克
VaR本身=新selftank（）；
selft.xposition = 4；
selft.yposition = 12；
SelfT.UpdateUI（）；
这_selftank =自我；
添加关键事件
var呢= utilityclass.bindfunction（这、这。时）；
window.onkeydown document.body.onkeydown呢= =；
呢= utilityclass.bindfunction（这、这。onkeyup）；
window.onkeyup document.body.onkeyup呢= =；
游戏循环
呢= utilityclass.bindfunction（这，这，跑）；
长时间监视器控制键
这个_gamelistener = setInterval（呢，20）；
}
按下键盘/游戏玩家坦克开始移动。
满意答案：功能（e）{
（开关（window.event | | e）{。KeyCode）
案例37：
这个_selftank.direction = enumdirection。左；
这_selftank.movingstate =真；
中断；左/左
案例38：
这_selftank.direction = enumdirection起来。；
这_selftank.movingstate =真；
中断；打开/打开/打开
案例39：
这个_selftank.direction = enumdirection吧；
这_selftank.movingstate =真；
中断；
案例40：
这_selftank.direction = enumdirection下来。；
这_selftank.movingstate =真；
中断
}
}
按钮/停止移动
OnKeyUp：功能（e）{
（开关（window.event | | e）{。KeyCode）
案例37：
案例38：
案例39：
案例40：
这_selftank.movingstate = false；
打破；
}
}
*游戏循环操作功能，心脏的游戏，轮毂。
运行：函数（）{
如果（这。_selftank。movingstate）{
这_selftank.move（）；
}
}
}；
游戏加载对象代码看起来太多了，事实上，它做了两件事。
1，创建播放器坦克对象。
2，添加按钮监视事件，当玩家按下移动键并调用坦克移动方法移动坦克。
总结：我们的坦克可以通过按键自由移动。接下来我们需要改进地图和碰撞检测。