快速搜索
主页 > ag亚游vip|HOME > Javascriptag怎么试玩|平台 >

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

时间:2014-12-03 11:00来源:网络整理 作者:网络 点击:
分享到:
上文我们简单的完成了坦克大战的雏形,本文我们来继续完善坦克大战,接下来我们来学习制作地图和碰撞检测方面的问题。

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(",");
ag亚游vip|HOME ???????? 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;
???? }
精彩图集

赞助商链接