坦克战javascript制作全记录(1)

PS:这个坦克战是我自己在网上下载了一个源代码后改写的。本身没有什么太难的。这个案例使用js作为面向对象的教程。

1.创建基本对象以实现坦克的简单移动

1.1如何在地图中绘制画布？

考虑到浏览器的兼容性，我们通过操作dom来绘制和刷新游戏对象。我们如何存储地图？我们应该把地图保存在二维数组中。js中没有二维数组，但是可以通过将数组存储在一维数组中来实现。

1.2代码实现

我们把画布设计成一个13 * 13的二维数组，地图中每个元素对应的长度和宽度都是40px。整个地图可以看作是一个由40px*40p x大小的单元格组成的表格，所以我们整个画布的大小是520px * 520px在编码之前，给每个人一个对象关系图：

创建一个顶级对象

Html代码：

复制代码如下：doctype html public '-//W3C//dtd html 4.0 transitional//en ' html head title tank battle/title link rel=样式表href=' CSS/main . CSS '/脚本src=' http : js/common . js '/脚本脚本src='http:js/Tankobject . js '/脚本src=' http : js/Mover . js '/脚本src=' http : js/tank装载机。begin()；}/脚本/床头！-map容器-div id=' div map '/div div id=' debug info '/div/body/html

TankObject.js文件：复制代码如下：//顶层对象tankObject=function(){ this。x position=0；//对象在地图中的x位置(13*13)是这样的。ypposition=0；这个。UI=空；//DOM element }//更改UI静态方法tankubject . prototype . updateui=function(wart field){ }//设置位置，参数如下：1*40，6 * 40坦克对象。原型。set position=function(左侧位置，顶部位置){//四舍五入。x位置=Math.round(左位置/40)；这个。ypposition=math . round(topPosition/40)；//设置表单上的位置if (this。UI！=null this。UI.style！=null) { this。ui . style . left=left position ' px '；这个。ui . style . top=TopPosition ' px '；}}这里我们使用x和y坐标来表示对象在地图上的位置。之后，我们将地图中的每个对象都放入一个二维数组中，然后我们可以通过x和y坐标得到对应的对象。然后在css中使用左和上来控制我们的对象在表单中的位置。(可移动物体：坦克、子弹)

1.2.2创建公共对象

我们还需要创建一个公共对象来编写一些常见的方法。Common.js:复制的代码代码如下：//坦克运动的四个方向var enum direction={up:' 0 '，right:' 1 '，down3360' 2 '，left : ' 3 ' }；//universal method object var UtilityClass={//在parentNode中创建dom元素，并指定id、classname createe:function(类型、id、classname、parent node){ var j=document . create element(类型)；if(id){ j . id=id }；if(class name){ j . class name=class name }；返回parent node . appendchild(J)；}，//移除元素remove : function(obj，parentnode) {parentnode。remove child(obj)；}，GetFunctionName:函数(上下文，argumentCailer){ for(上下文中的var I){ if(上下文[I]==argumentCailer){ return I }；}返回“”；}，//绑定事件，返回func方法，这是传入的objbind函数：function (obj，func){ return function(){ func . apply(obj，arguments)；};}};

1.2.3创建移动对象

Mover.js复制代码代码如下：//移动对象，继承自顶层对象Mover=function () { this .方向=枚举方向。向上；这个。速度=1;} Mover。prototype=new TankObject()；搬运工。原型。move=function(){ if(this。lock){ return；/* 停用或者尚在步进中，操作无效*/} //根据方向设置坦克的背景图片这个用户界面。风格。背景位置=' 0 '-这。方向* 40 ' px//如果方向是上和下副总裁就是顶部；如果方向是上和左瓦尔就是-1 var vp=['top '，' left'][((this .方向==EnumDirection .向上)||(这个。方向==EnumDirection .向下))?0 : 1];var val=(这。方向==EnumDirection .向上)||(这个。方向==EnumDirection .左))?-1 : 1;this.lock=true/*加锁*///把当前对象保存到这个变量=这个；//记录对象移动起始位置var startmoveP=parseInt(这用户界面。风格[VP])；var xp=这个x .位置，yp=这个yppositionvar subMove=setInterval(function(){//开始移动，每次移动5px这个。风格=解析用户界面。style[VP])5 * val ' px '；//每次移动一个单元格40px if(数学。ABS((parsent)(这个.ui。style[VP])-startmoveP()=40){ clearInterval(subMove)；This.lock=false/*解锁，允许再次步进*///记录对象移动后在表格中的位置这个。位置=数学。圆（这用户界面。offset left/40)；这个。位置=数学。圆（这用户界面。offset top/40)；} },80 -这个。速度* 10);} 这里的移动对象继承自我们的顶级对象，这里这就代表调用移动方法的对象移动对象的功能根据对象的方向和速度进行移动，每次移动5px总共移动40px一个单元格。后面这个对象还会进行扩展，会加入碰撞检测等功能。

1.2.4 创建坦克对象Tank.js文件：

复制代码代码如下：//油箱对象继承自MoverTank=function(){ } tank。prototype=new Mover()；

//创建玩家坦克，继承自坦克对象SelfTank=function () { this .UI=实用工具类创建一个文档。getelementbyid(' div map ')；这个移动状态=假这个。速度=4;}自助坦克。原型=新坦克()；//设置坦克的位置自动坦克。原型。update ui=function(){ this .ui。NAmE=' itak//顶级对象方法，设置坦克的位置这个。设定位置（这个. XPosition * 40，这个ypposition * 40)；}

现在只创建了玩家坦克，后面我们还会往里添加敌人坦克。

1.2.5 创建游戏装载对象（核心)

复制代码代码如下：//游戏载入对象整个游戏的核心对象游戏加载器=function(){ this。mapcontainer=文档。getelementbyid(' div map ')；//存放游戏地图的设计这个_ selfTank=null//玩家坦克这个_ gameListener=null//游戏主循环计时器id } GameLoader。prototype={ Begin : function(){//初始化玩家坦克var selfT=new self tank()；自拍.x位置=4；自拍.YPosition=12selfT .更新ui()；这个_ selfTank=selfT//添加按键事件var warpper=功利主义BindFunction(这个，这个. OnKeyDown)；窗户。onkeydown=文档。尸体。onkeydown=warpper华勃=功利主义BindFunction(这个，这个. OnKeYup)；窗户。onkey up=文档。尸体。onkey up=warpper//游戏主循环华勃=功利主义BindFunction(这个，这个。跑);/*长定时器监听控制键*/这个_ GameListener=设置间隔(warpper，20)；} //键盘按下玩家坦克开始移动，OnKeyDown:函数(e){ switch((window . event | | e)} .键码){大小写37:这个_selfTank .方向=枚举方向。向左；这个_selfTank .移动状态=真打破；//左案例38:这个_selfTank .方向=枚举方向。向上；这个_selfTank .移动状态=真打破；//上案例39:这个_selfTank .方向=枚举方向。右；这个_selfTank .移动状态=真打破；//右第40:号案件_selfTank .方向=枚举方向。向下；这个_selfTank .移动状态=真打破；//下} } //按键弹起停止移动，OnKeyUp:函数(e) { switch ((window.event || e)).keyCode){案例37:案例38:案例39:案例40:这个_selfTank .移动状态=假打破；} } /*游戏主循环运行函数，游戏的心脏，枢纽*/，Run:函数(){如果(这._selfTank .移动状态){这个_selfTank .move()；} }};

游戏装载对象代码看起来很多，其实就做了两件事情： 1、创建玩家坦克对象。 2、添加按键监听事件，当玩家按下移动键调用坦克移动方法移动坦克。

总结：到这里我们的坦克可以通过按键自由的移动了。下一步我们需要完善地图和碰撞检测。