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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
vue 组件高级用法实例详解
Apr 11 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
vue+element UI实现树形表格
Dec 29 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
Zerg基本策略
2020/03/14 星际争霸
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP微信支付实例解析
2016/07/22 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
python pandas库的安装和创建
2019/01/10 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
秋季运动会活动方案
2014/02/05 职场文书
电视购物广告词
2014/03/19 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS