javascript制作坦克大战全纪录(2)
JavaScript 制作 大战 坦克 全纪录
2023-06-13 09:15:31 时间
2. 完善地图
我们的地图中有空地,墙,钢,草丛,水,总部等障碍物。我们可以把这些全部设计为对象。
2.1 创建障碍物对象群
对象群保存各种地图上的对象,我们通过对象的属性来判断对象是否可以被穿过或被攻击。
Barrier.js:
//障碍物基类对象,继承自TankObject
Barrier=function(){
this.DefenVal=1; //防御力
this.CanBeAttacked=true; //是否可以被攻击
}
Barrier.prototype=newTankObject();
//墙
WallB=function(){}
WallB.prototype=newBarrier();
//空地
EmptyB=function(){
this.CanAcross=true; //可被穿过
}
EmptyB.prototype=newBarrier();
//河流
RiverB=function(){
this.DefenVal=0;
this.CanBeAttacked=false;//优先取对象的成员,继承自父类的会被覆盖。
}
RiverB.prototype=newBarrier();
//钢
SteelB=function(){
this.DefenVal=3;
}
SteelB.prototype=newBarrier();
//草丛对象
TodB=function(){
this.CanBeAttacked=false;
this.DefenVal=0;
this.CanAcross=true;
}
TodB.prototype=newBarrier();
//总部
PodiumB=function(){
this.DefenVal=5;
}
PodiumB.prototype=newBarrier();
2.2 写入地图的数据。
在Common.js中添加以下代码:
//地图元素类型枚举
/*
0:空地
1:墙
2:钢
3:树丛
4:河
5:总部
*/
varEnumMapCellType={
Empty:"0"
,Wall:"1"
,Steel:"2"
,Tod:"3"
,River:"4"
,Podium:"5"
};
//每个地形对应的样式名称
varArrayCss=["empty","wall","steel","tod","river","podium"];
//关卡地图
/*关卡*/
varstr="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...关
varTop_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(){
//根据等级初始化地图
varmap=Top_MapLevel[this._level-1].split(",");
varmapBorder=UtilityClass.CreateE("div","","mapBorder",this._mapContainer);
//遍历地图表格中每一个单元格
for(vari=0;i<this._rowCount;i++){
//创建div,每一行的地图保存在这个div中
vardivRow=UtilityClass.CreateE("div","","",mapBorder);
//在一维数组中再创建一个数组
this._battleField[i]=[];
for(varj=0;j<this._colCount;j++){
//读取地图数据,默认值:0
varv=(map[i]&&map[i].charAt(j))||0;
//插入span元素,一个span元素即为一个地图单位
varspanCol=UtilityClass.CreateE("span","","",divRow);
spanCol.className=ArrayCss[v];
//将地图对象放入二维数组中,便于后面碰撞检测。
varto=null;
switch(v){
caseEnumMapCellType.Empty:
to=newEmptyB();
break;
caseEnumMapCellType.Wall:
to=newWallB();
break;
caseEnumMapCellType.Steel:
to=newSteelB();
break;
caseEnumMapCellType.Tod:
to=newTodB();
break;
caseEnumMapCellType.River:
to=newRiverB();
break;
caseEnumMapCellType.Podium:
to=newPodiumB();
break;
default:
thrownewError("地图数字越界!");
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};
} //endfor
} //endfor
//放入window全局变量
window.BattleField=this._battleField;
}
ok,到这里我们的地图就大功告成了。这里的注释已经很详细了,如果大家还有不理解的地方自己下载源码调试一下就很好理解了。
这里主要加载地图数据,将每一个地图作为span元素插入html文档中。并且将地图的对象存储在二维数组中。以后我们做碰撞检测的时候就可以直接通过对象的坐标取到对应的数组对象,十分方便。
相关文章
- javascript 基础_JavaScript高级编程
- 用JavaScript制作页面特效
- html左侧浮动广告代码,如何制作浮动广告 JavaScript制作浮动广告代码
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- javascript中存储和读取cookie详解编程语言
- JavaScript笔记整理详解编程语言
- JavaScript生成xml
- javascript调用XML制作连动下拉框
- javascript实现的制作特殊字的脚本
- Javascript更新JavaScript数组的uniq方法
- 用php+javascript实现二级级联菜单的制作
- javascript基础知识大全便于大家学习,也便于我自己查看
- javascript中日期转换成时间戳的小例子
- javascript重写alert方法的实例代码
- JavaScript中setAttribute用法介绍
- javascript自动改变文字大小和颜色的效果的小例子
- JavaScript中访问节点对象的方法有哪些如何使用
- Javascript浅谈之引用类型
- PHP+javascript制作带提示的验证码源码分享
- JavaScript中伪协议javascript:使用探讨
- JavaScript针对网页节点的增删改查用法实例