javascript制作坦克大战全纪录(2)


Posted in Javascript onNovember 27, 2014

2.   完善地图

    我们的地图中有空地,墙,钢,草丛,水,总部等障碍物。 我们可以把这些全部设计为对象。

2.1  创建障碍物对象群

    对象群保存各种地图上的对象,我们通过对象的属性来判断对象是否可以被穿过或被攻击。
 
Barrier.js:
 

 // 障碍物基类对象,继承自TankObject

 Barrier = function () {

     this.DefenVal = 1;  // 防御力

     this.CanBeAttacked = true;  // 是否可以被攻击

 }

 Barrier.prototype = new TankObject();

 // 墙

 WallB = function () { }

 WallB.prototype = new Barrier();

 // 空地

 EmptyB = function () {

     this.CanAcross = true;  // 可被穿过

 }

 EmptyB.prototype = new Barrier();

 // 河流

 RiverB = function () {

     this.DefenVal = 0;

     this.CanBeAttacked = false; // 优先取对象的成员,继承自父类的会被覆盖。

 }

 RiverB.prototype = new Barrier();

 // 钢

 SteelB = function () {

     this.DefenVal = 3;

 }

 SteelB.prototype = new Barrier();

 // 草丛对象

 TodB = function () {

     this.CanBeAttacked = false;

     this.DefenVal = 0;

     this.CanAcross = true;

 }

 TodB.prototype = new Barrier();

 // 总部

 PodiumB = function () {

     this.DefenVal = 5;

 }

 PodiumB.prototype = new Barrier();

2.2    写入地图的数据。

在Common.js 中添加以下代码:
 

 //地图元素类型枚举

 /*

 0:空地    

 1:墙    

 2:钢    

 3:树丛        

 4:河        

 5:总部    

 */

 var EnumMapCellType = {

     Empty: "0"

     , Wall: "1"

     , Steel: "2"

     , Tod: "3"

     , River: "4"

     , Podium: "5"

 };

 // 每个地形对应的样式名称

 var ArrayCss = ['empty', 'wall', 'steel', 'tod', 'river', 'podium'];

 // 关卡地图

 /*关卡*/

 var str = '0000000000000';

 str += ',0011100111010';

 str += ',1000010000200';

 str += ',1200333310101';

 str += ',0000444400001';

 str += ',3313300001011';

 str += ',3011331022011';

 str += ',3311031011011';

 str += ',0101011102010';

 str += ',0101011010010';

 str += ',0100000000110';

 str += ',0100012101101';

 str += ',0010015100000';

 // 存储关卡地图   0,1,2,3... 分别为1-n ... 关

 var Top_MapLevel = [str];

2.3    绘制地图

    准备工作做完了,下面开始上大菜,绘制地图。前面有提到我们的地图为 13 * 13 的表格。所以我们在游戏装载对象添加行和列两个属性,并且添加初始化地图方法。
 
Frame.js:
 

 // 游戏载入对象 整个游戏的核心对象

 GameLoader = function () {

     this._mapContainer = document.getElementById("divMap");  // 存放游戏地图的div

     this._selfTank = null;  // 玩家坦克

     this._gameListener = null; // 游戏主循环计时器id

     /*v2.0新加的属性*/

     this._level = 1;

     this._rowCount = 13;

     this._colCount = 13;

     this._battleField = []; // 存储地图对象二维数组

 }

 // 加载地图方法

    Load: function () {

         // 根据等级初始化地图

         var map = Top_MapLevel[this._level - 1].split(",");

         var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);

         // 遍历地图表格中每一个单元格

         for (var i = 0; i < this._rowCount; i++) {

             // 创建div,每一行的地图保存在这个div中

             var divRow = UtilityClass.CreateE("div", "", "", mapBorder);

             // 在一维数组中再创建一个数组

             this._battleField[i] = [];

             for (var j = 0; j < this._colCount; j++) {

                 // 读取地图数据,默认值:0

                 var v = (map[i] && map[i].charAt(j)) || 0;

                 // 插入span元素,一个span元素即为一个地图单位

                 var spanCol = UtilityClass.CreateE("span", "", "", divRow);

                 spanCol.className = ArrayCss[v];

                 // 将地图对象放入二维数组中,便于后面碰撞检测。

                 var to = null;

                 switch (v) {

                     case EnumMapCellType.Empty:

                         to = new EmptyB();

                         break;

                     case EnumMapCellType.Wall:

                         to = new WallB();

                         break;

                     case EnumMapCellType.Steel:

                         to = new SteelB();

                         break;

                     case EnumMapCellType.Tod:

                         to = new TodB();

                         break;

                     case EnumMapCellType.River:

                         to = new RiverB();

                         break;

                     case EnumMapCellType.Podium:

                         to = new PodiumB();

                         break;

                     default:

                         throw new Error("地图数字越界!");

                         break;

                 }

                 to.UI = spanCol;

                 //这里的j就是X,因为内部循环是横向的,x是横坐标

                 to.XPosition = j;

                 to.YPosition = i;

                 // 将当前的地图对象存入二维数组中obj为障碍物对象,occupier为占有对象

                 this._battleField[i][j] = { obj: to, occupier: null, lock: false };

             }   //end for

         }   // end for

         // 放入window全局变量

         window.BattleField = this._battleField;

     }

    ok,到这里我们的地图就大功告成了。 这里的注释已经很详细了,如果大家还有不理解的地方自己下载源码调试一下就很好理解了。

这里主要加载地图数据,将每一个地图作为span元素插入html文档中。并且将地图的对象存储在二维数组中。以后我们做碰撞检测的时候就可以直接通过对象的坐标取到对应的数组对象,十分方便。

附上源码:http://xiazai.3water.com/201411/yuanma/jstankedazhan(3water.com).rar

Javascript 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
javascript制作坦克大战全纪录(1)
Nov 27 #Javascript
使用jsonp完美解决跨域问题
Nov 27 #Javascript
JavaScript变量声明详解
Nov 27 #Javascript
js脚本实现数据去重
Nov 27 #Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 #Javascript
javascript几个易错点记录
Nov 26 #Javascript
jquery选择器需要注意的问题
Nov 26 #Javascript
You might like
php常用Stream函数集介绍
2013/06/24 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
vue多次循环操作示例
2019/02/08 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
什么是会话Bean
2015/05/14 面试题
大学毕业生工作的自我评价
2013/10/01 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
长江三峡导游词
2015/01/31 职场文书
全国助残日活动总结
2015/05/11 职场文书
小学语文国培研修日志
2015/11/13 职场文书
执行力心得体会范文
2016/01/11 职场文书
详解Python flask的前后端交互
2022/03/31 Python
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers