首页 > 代码库 > javascript 面向对象制作坦克大战 （一）
javascript 面向对象制作坦克大战 （一）
PS：这个坦克大战是在网上下的一段源码之后，自己进行的重写。 写这个的目的是为了巩固自己这段时间对js的学习。整理到博客上，算是对自己近端时间学习js的一个整理。 同时也希望可以帮助到学习js的园友。由于自己也是刚学js不久，所以难免出现错误。如果发现希望给予指正。 这个教程适合熟悉js基本语法和面向对象语法的园友学习。 本身没有太难的东西，这个案例将js面向对象用的比较好，可以作为js面向对象的入门教程。
1. 创建基本对象，实现坦克简单的移动。
1.1 如何在地图中绘制画布？
考虑到浏览器兼容的问题，我们用操作dom的方式来实现游戏对象的绘制和刷新。我们如何存储我们的地图呢？ 我们应该把地图用一个二维数组来保存， js中没有二维数组，但是可以通过在一维数组从存储数组来实现。
1.2 代码实现
我们将画布设计为 13 * 13 的一个二维数组，每个元素在地图中对应的长和宽均为40px，可以把整个地图看成由 40px*40p x大小的单元格组成的一个表格，那么我们整个画布的大小为 520px * 520px ；
1.2.1 创建顶级对象
html代码:
1 <body>2 <!--地图容器-->3 <div id="divMap">4 </div>5 <div id="debugInfo">6 </div>7 </body>8
TankObject.js文件：
// 顶级对象TankObject = function () {this.XPosition = 0; // 对象在地图（13*13）中的X的位置this.YPosition = 0;this.UI = null; // 地图中一个格子的UI}// 更改UI静态方法TankObject.prototype.UpdateUI = function (battlFiled) { }// 设置位置，参数是这样：1*40,6*40TankObject.prototype.SetPosition = function (leftPosition, topPosition) {// 在地图的位置 Math.round四舍五入this.XPosition = Math.round(leftPosition / 40);this.YPosition = Math.round(topPosition / 40);// 设置在窗体上的位置if (this.UI != null && this.UI.style != null) {this.UI.style.left = leftPosition + "px";this.UI.style.top = topPosition + "px";}}
这里?我们用X，Y坐标表示对象在地图上的位置。后面我们会将地图中的每个对象都放入二维数组中，这时可以通过X,Y坐标来取得对应的对象。
然后用css中的left和top来控制我们对象在窗体中的位置。（可以移动的对象：坦克，子弹）
1.2.2 创建公用对象
我们还需要创建一个公共的对象，来写入我们常用的一些方法。
Common.js：
1 // 坦克移动的四个方向 2 var EnumDirection = { 3 Up: "0", 4 Right: "1", 5 Down: "2", 6 Left: "3" 7 }; 8 9 10 // 通用方法对象11 var UtilityClass = {12 // 创建dom元素到parentNode中，可指定id，className13 CreateE: function (type, id, className, parentNode) {14 var J = document.createElement(type);15 if (id) { J.id = id };16 if (className) { J.className = className };17 return parentNode.appendChild(J);18 }, // 移除元素19 RemoveE: function (obj, parentNode) {20 parentNode.removeChild(obj);21 },22 GetFunctionName: function (context, argumentCallee) {23 for (var i in context) {24 if (context[i] == argumentCallee) { return i };25 }26 return "";27 }, // 绑定事件28 BindFunction: function (obj,func) {29 return function () {30 func.apply(obj, arguments);31 };32 }33 };34 35
1.2.3 创建移动对象
Mover.js
1 // 移动对象，继承自顶层对象 2 Mover = function () { 3 this.Direction = EnumDirection.Up; 4 this.Speed = 1; 5 } 6 Mover.prototype = new TankObject(); 7 Mover.prototype.Move = function () { 8 if (this.lock) { 9 return;/* 停用或者尚在步进中,操作无效 */10 }11 // 根据方向设置坦克的背景图片12 this.UI.style.backgroundPosition = "0 -" + this.Direction * 40 + "px";13 // 如果方向是上和下，vp就是top；如果方向是上和左，val就是-114 var vp = ["top", "left"][((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Down)) ? 0 : 1];15 var val = ((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Left)) ? -1 : 1;16 this.lock = true;/* 加锁 */17 // 把当前对象保存到This18 var This = this;19 // 记录对象移动起始位置20 var startmoveP = parseInt(This.UI.style[vp]);21 var xp = This.XPosition, yp = This.YPosition;22 var subMove = setInterval(function () {23 // 开始移动，每次移动5px24 This.UI.style[vp] = parseInt(This.UI.style[vp]) + 5 * val + "px";25 // 每次移动一个单元格 40px26 if (Math.abs((parseInt(This.UI.style[vp]) - startmoveP)) >= 40) {27 clearInterval(subMove);28 This.lock = false;/* 解锁,允许再次步进 */29 // 记录对象移动后在表格中的位置30 This.XPosition = Math.round(This.UI.offsetLeft / 40);31 This.YPosition = Math.round(This.UI.offsetTop / 40);32 33 }34 }, 80 - this.Speed * 10);35 36 }
这里的移动对象继承自我们的顶级对象 ，这里this就代表调用Move方法的对象。
Move对象的功能根据对象的方向和速度进行移动，每次移动5px总共移动40px一个单元格。后面这个对象还会进行扩展，会加入碰撞检测等功能。
1.2.4 创建坦克对象
Tank.js 文件：
1 2 //tank对象 继承自Mover 3 Tank=function(){} 4 5 Tank.prototype = new Mover(); 6 7 8 // 创建玩家坦克,继承自tank对象 9 SelfTank = function () {10 this.UI = UtilityClass.CreateE("div", "", "itank", document.getElementById("divMap"));11 this.MovingState = false;12 this.Speed = 4;13 }14 SelfTank.prototype = new Tank();15 // 设置坦克的位置16 SelfTank.prototype.UpdateUI = function () {17 this.UI.className = "itank";18 // 顶级对象方法，设置坦克的位置19 this.SetPosition(this.XPosition * 40, this.YPosition * 40);20 }
现在只创建了玩家坦克，后面我们还会往里添加敌人坦克。
1.2.5 创建游戏装载对象(核心)
1 // 游戏载入对象 整个游戏的核心对象 2 GameLoader = function () { 3 this.mapContainer = document.getElementById("divMap"); // 存放游戏地图的div 4 this._selfTank = null; // 玩家坦克 5 this._gameListener = null; // 游戏主循环计时器id 6 } 7 GameLoader.prototype = { 8 Begin: function () { 9 // 初始化玩家坦克10 var selfT = new SelfTank();11 selfT.XPosition = 4;12 selfT.YPosition = 12;13 selfT.UpdateUI();14 this._selfTank = selfT;15 16 // 添加按键事件17 var warpper = UtilityClass.BindFunction(this, this.OnKeyDown);18 window.onkeydown = document.body.onkeydown = warpper;19 warpper = UtilityClass.BindFunction(this, this.OnKeyUp);20 window.onkeyup = document.body.onkeyup = warpper;21 // 游戏主循环22 warpper = UtilityClass.BindFunction(this, this.Run);23 /*长定时器监听控制键*/24 this._gameListener = setInterval(warpper, 20);25 26 }27 // 键盘按下玩家坦克开始移动28 , OnKeyDown: function (e) {29 switch ((window.event || e).keyCode) {30 case 37:31 this._selfTank.Direction = EnumDirection.Left;32 this._selfTank.MovingState = true;33 break; //左34 case 38:35 this._selfTank.Direction = EnumDirection.Up;36 this._selfTank.MovingState = true;37 break; //上38 case 39:39 this._selfTank.Direction = EnumDirection.Right;40 this._selfTank.MovingState = true;41 break; //右42 case 40:43 this._selfTank.Direction = EnumDirection.Down;44 this._selfTank.MovingState = true;45 break; //下46 }47 48 }49 // 按键弹起停止移动50 , OnKeyUp: function (e) {51 switch ((window.event || e).keyCode) {52 case 37:53 case 38:54 case 39:55 case 40:56 this._selfTank.MovingState = false;57 break;58 }59 }60 /*游戏主循环运行函数，游戏的心脏，枢纽*/61 , Run: function () {62 if (this._selfTank.MovingState) {63 this._selfTank.Move();64 }65 }66 67 68 };69
游戏装载对象代码看起来很多，其实就做了两件事情：
1、创建玩家坦克对象。
2、添加按键监听事件，当玩家按下移动键调用坦克Move方法移动坦克。
javascript 面向对象制作坦克大战 （一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。