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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
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 信息采集程序代码
2009/03/17 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
Javascript的this详解
2019/03/23 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
python抓取网页中的图片示例
2014/02/28 Python
python之import机制详解
2014/07/03 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python操作文件的参数整理
2019/06/11 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Django实现内容缓存实例方法
2020/06/30 Python
python如何代码集体右移
2020/07/20 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
微型企业创业投资计划书
2014/01/10 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
个人贷款承诺书
2014/03/28 职场文书
数字化校园建设方案
2014/05/03 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
国富论读书笔记
2015/06/26 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript