用javascript 面向对象制作坦克大战(二)
2. 完善地图
我们的地图中有空地,墙,钢,草丛,水,总部等障碍物。 我们可以把这些全部设计为对象。
2.1 创建障碍物对象群
// 障碍物基类对象,继承自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 写入地图的数据。
//地图元素类型枚举
/*
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 绘制地图
// 游戏载入对象 整个游戏的核心对象
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; }
用javascript 面向对象制作坦克大战(二)的更多相关文章
- javascript 面向对象制作坦克大战 (一)
PS:这个坦克大战是在网上下的一段源码之后,自己进行的重写. 写这个的目的是为了巩固自己这段时间对js的学习.整理到博客上,算是对自己近端时间学习js的一个整理. 同时也希望可以帮助到学习js的园 ...
- 用javascript 面向对象制作坦克大战(四)
我们现在还差一个重要的功能,没错,敌人坦克的创建以及子弹击中敌人坦克时的碰撞检测功能. 5. 创建敌人坦克完成炮弹碰撞检测 5.1 创建敌人坦克对象 敌人坦克和玩家坦克一样,同样继承自我们的坦克 ...
- 用javascript 面向对象制作坦克大战(三)
之前,我们完成了坦克的移动和地图的绘制,这次我们来完成碰撞检测和炮弹的发射. 上代码前来张最新的类图: 3. 碰撞检测 前面我们已经完成了坦克的移动和地图的绘制,下面我们开始写碰撞检测. 3. ...
- html5制作坦克大战
全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...
- Java坦克大战 (二) 之画一个能动的圆圈代表坦克
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- JavaScript 面向对象的编程(二) 类的封装
类的定义 方式一 var Book = function(id, name, price){ //私有属性,外部不能直接访问 var num = 1; //私有方法, function checkId ...
- 【blade04】用面向对象的方法写javascript坦克大战
前言 javascript与程序的语言比如C#或者java不一样,他并没有“类”的概念,虽然最新的ECMAScript提出了Class的概念,我们却没有怎么用 就单以C#与Java来说,要到真正理解面 ...
- 汉顺平html5课程分享:6小时制作经典的坦克大战!
记起自己去年參加的一次面试,在做过Java多年的面试官面前发挥的并不好,但他一听说我会html5,立刻眼睛发亮.无论不顾的想要和我签约.. .所以.如今为工作犯愁的朋友们,学好html5,绝对会为你找 ...
- JavaScript 面向对象(二) —— 案例篇
看案例前可以先看看基础篇:JavaScript 面向对象(一) —— 基础篇 案例——面向对象的选项卡:把面向过程的程序一步步改成面向对象的形式,使其能够更加的通用(但是通用的东西,一般会比较臃肿). ...
随机推荐
- VBScript 函数
Date/Time 函数 Conversion 函数 Format 函数 Math 函数 Array 函数 String 函数 其他函数 Date/Time 函数 函数 描述 CDate 把一个有效的 ...
- 关于C#中timer类
·关于C#中timer类 在C#里关于定时器类就有3个 1.定义在System.Windows.Forms里 2.定义在System.Threading.Timer类里 3.定义在System.Tim ...
- cognos8.3 sample在DB2里的安装
db2 create db c83 alias c83 using codeset UTF-8 territory CA 创建sample数据库 db2set db2codepage= db2 cha ...
- SpringMVC学习总结(四)——基于注解的SpringMVC简单介绍
SpringMVC是一个基于DispatcherServlet的MVC框架,每一个请求最先访问的都是 DispatcherServlet,DispatcherServlet负责转发每一个Request ...
- Java虚拟机的内存组成以及堆内存介绍
一.java内存组成介绍:堆(Heap)和非堆(Non-heap)内存 按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启 ...
- C++:类型转换
5.3 类型转换 5.3.1 系统预定义类型间的转换 1. 隐式转换: 例如: int x=5,y; y=3.5+x; //系统会自动先将int型的5转换为double型的5. ...
- public View getView(int position, View convertView, final ViewGroup parent)三个参数的意思
最近看到有人在问这三个参数的含义,其实帮助已经很详细的介绍了这三个参数,看来还是要好好学学英语了,不然连解释都看不懂. /** * Get a View that displays the d ...
- 车牌识别LPR系统系列文章汇总
这里的LPR的的几篇文章是之前项目的一些相关资料的整理,涉及实验室内部的资料就没有放上来,希望能对想了解这方面的同学,有所帮助,那怕了解个大概也好.知道整体的思路就好.当初就是一个人瞎摸索,走了很多的 ...
- php有些系统会报错或提示 Cannot modify header information - headers already sent by
Warning: Cannot modify header information - headers already sent by (output started at /home/test/do ...
- 函数buf_page_init
/********************************************************************//** Inits a page to the buffer ...