承接一,本篇主要完善坦克大战的自定义地图编辑脚本。
开启编辑地图模式
$('#bianji').css('display','block');
显示光标
var timer;//自定义地图光标闪烁定时器名称,方便终止
function blinkgb(){//自定义地图光标闪烁脚本
$('#guangbiao').css('display')=='block'?$('#guangbiao').css('display','none'):$('#guangbiao').css('display','block');
timer=setTimeout(blinkgb,500);
}
定义光标闪烁函数;
blinkgb();
开启光标闪烁
定义光标移动脚本
function moveguangbiao(n){//自定义地图光标移动脚本,n用来表示光标移动方向
var $guangbiao=$('#bianji');
if(n==1){//向上移动(这里用switch-case更好,这里就不改了)
var $top=($guangbiao.position().top+550)%600+'px';//做一个判断,如果光标位于第1排,移动光标到最后一排
$guangbiao.css('top',$top);//移动光标
}
else if(n==2){//向下移动
var $top=($guangbiao.position().top+50)%600+'px';
$guangbiao.css('top',$top);
}
else if(n==3){//向左移动
var $left=($guangbiao.position().left+800)%850+'px';
$guangbiao.css('left',$left);
}
else{//向右移动
var $left=($guangbiao.position().left+50)%850+'px';
$guangbiao.css('left',$left);
};
}
定义布置地图块脚本
function buzhi(){//自定义地图布置地图脚本
/*获取当前光标坐标,计算出光标所在地图格子的index ii*/
var ii;
var ii_x=$('#bianji').position().left/50;
var ii_y=$('#bianji').position().top/50;
ii=ii_x+17*ii_y;
var $mapi=$('.map_i').eq(ii);//选中地图格子
var $classindex=getclass(ii);//获取当前地图格子上的地图类型,getclass(j)是一个自定义函数,传入坐标,返回该坐标格子对应的地图类型class。
switch($classindex){//切换成下一种类型的墙
case 1: $mapi.attr('class','map_i tie_qiang'); break;//砖墙切换铁墙;
case 2: $mapi.attr('class','map_i riverqiang'); break;//铁墙切换河流;
case 3: $mapi.attr('class','map_i caodi'); break;//河流切换草地;
case 4: $mapi.attr('class','map_i'); break;//草地切换空白;
case 5: $mapi.attr('class','map_i zhuan_qiang'); break;//空白切换砖墙;
}
}
function getclass(j){//获取下标为j的地图格子上的地图类型
var $classname=$('.map_i').eq(j).attr('class').split(' ')[1];//获取代表地图类型的class;例子class="map_i zhuan_qiang",经过这个表达式,就会变成zhuan_qiang;
if($classname=='zhuan_qiang') return 1;//砖墙返回1
else if($classname=='tie_qiang') return 2;//铁墙返回2
else if($classname=='riverqiang') return 3;//河流返回3
else if($classname=='caodi') return 4;//草地返回4
else return 5;//空白返回5
}
绑定键盘按键移动函数
function editmap(){//编辑地图脚本
$('#bianji').css('display','block');//显示光标
blinkgb();//光标闪烁开启
$('#bianji').attr('style','').css('display','block');
$(document).unbind('keydown').unbind('keyup');//初始化按键事件
$('#yyf').css('display','none');//隐藏坦克
$(document).bind('keydown',function(event){//添加光标移动按键时间ESC回车事件
if (event.which == 13) {//回车事件
event.preventDefault();//屏蔽默认事件
slidedownmubu();//闭幕事件,后面讲
}
if(event.which==65) moveguangbiao(3);//A键绑定光标左移
if(event.which==87) moveguangbiao(1);//W键绑定上移
if(event.which==83) moveguangbiao(2);//S键绑定下移
if(event.which==68) moveguangbiao(4);//D键绑定右移
if(event.which==74) buzhi();//J键绑定布置地图快事件
if(event.which==27) {//ESC绑定取消事件;
slidedownmubu();//闭幕事件,后面讲
setTimeout('pastemap(mapdata[0])',2150);
}
});
}
到这里,自定义地图的所有函数就定义完了,最后我们把自定义地图这个功能绑定在一个按钮上。
<div class="start" id="start">
<div class="btn">开始游戏</div>
<div class="btn">游戏说明</div>
<div class="btn">选择关卡</div>
<div class="btn">定义地图</div>
</div>
做一个开始菜单,上面有4个按钮
$('#start').find('.btn').eq(3).bind('click',function(){
$('#start').animate({top:0,opacity:0},500,function (){
$(this).css('display','none');
clearmap();//清理地图
buzhilaojia();//布置老家
slideupmubu();//开幕
editmap();//进入编辑地图模式
});
});
到此,地图编辑模式就定义好了。讲的太乱了,大家将就一下。
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123