html经典坦克大战,HTML+CSS+JQ试做经典坦克大战（二）

承接一，本篇主要完善坦克大战的自定义地图编辑脚本。

开启编辑地图模式

$('#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);

}

});

}

到这里，自定义地图的所有函数就定义完了，最后我们把自定义地图这个功能绑定在一个按钮上。

开始游戏游戏说明选择关卡定义地图

做一个开始菜单，上面有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();//进入编辑地图模式

});

});

到此，地图编辑模式就定义好了。讲的太乱了，大家将就一下。

总结

以上是生活随笔为你收集整理的html经典坦克大战,HTML+CSS+JQ试做经典坦克大战（二）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。