hallo,everyone，我又来了，第3篇内容主要讲述坦克大战开始菜单的设计和事件绑定。

惯例，先上HTML内容和最终效果

.start{ width:250px; height:400px; background:#333; border:3px #9F0 outset; position:absolute; top:100px; left:300px; border-radius:10px;z-index:50;}

#shuoming,#chooselevel{left:560px; opacity:0; display:none;}

来看这一段样式，#shuoming和#chooselevel属于次级菜单，他们与一级菜单的区别在于，定位于一次菜单的右面，并且是隐藏的，只有点击事件出现后，次级菜单才会出现。

1 为“开始游戏”按钮绑定事件

//注意这里的这个选择器，更好的方式应该是$('#start .btn').eq(0),刚做的时候学艺不精；

$('#start').find('.btn').eq(0).bind('click',function(){//选中开始游戏按钮，绑定单击事件

$('#start').animate({top:0,opacity:0},500,function (){//给主菜单添加动画，500ms完成隐藏和移动

addposition();//还记得这个函数吗，这里的作用应该是格式化地图格子的位置

$(this).css('display','none');//主菜单动画完成后，将其display为none，因为如果只是单纯的透明度为0，实际上这个菜单里的按钮还是可以点击的。

setTimeout(slideupmubu,500);//延迟500ms开幕

setTimeout(startwar,500);//延迟500ms开始游戏，这里的startwar()是一个自定义函数，用来给坦克绑定事件，下节再给大家讲。

});

});

2 为“游戏说明”按钮绑定事件，游戏说明菜单“返回”按钮绑定事件

$('#start').find('.btn').eq(1).bind('click',function(){

$('#start').animate({left:50,opacity:0},500,function (){//主菜单动画，500ms内完成移动和隐藏

$(this).css('display','none');//动画完成后，将主菜单display:none；

$('#shuoming').css('display','block');//将二级菜单dispaly:block;

$('#shuoming').animate({left:300,opacity:1},500);//二级菜单动画，500ms内完成移动和显示；

});

});

$('#shuoming').find('.btn').bind('click',function(){//次级菜单游戏说明的返回按钮事件

$('#shuoming').animate({left:560,opacity:0},500,function (){

$(this).css('display','none');

$('#start').css('display','block');

$('#start').animate({left:300,opacity:1},500);

});

});

3 为“选择关卡”按钮绑定事件，选择关卡菜单“关卡X”按钮绑定事件

$('#start').find('.btn').eq(2).bind('click',function(){//这个事件也不解释了，实际上应该定义成一个通用函数的，方便直接调用。

$('#start').animate({left:50,opacity:0},500,function (){

$(this).css('display','none');

$('#chooselevel').css('display','block');

$('#chooselevel').animate({left:300,opacity:1},500);

});

});

$('#chooselevel').find('.btn').each(function(index, element) {//遍历4个关卡按钮

$(this).bind('click',function(){//为每个按钮添加点击事件；

pastemap(mapdata[index]);//布置对应关卡的地图，我事先制作了4个关卡的数据，储存在mapdata数组中；

$('#chooselevel').animate({left:560,opacity:0},500,function (){//布置完关卡后，直接返回一级菜单；

$(this).css('display','none');

$('#start').css('display','block');

$('#start').animate({left:300,opacity:1},500);

});

});

});

上节，我们已经为“定义地图”绑定过事件了，这里就不啰嗦了。

前文中，有几个函数，下面我们来定义一下

1. clearmap()，清除地图的各种地图块的class

function clearmap(){//清除地图上的所有东西，并布置老家

$('.map_i').each(function(index, element) {//遍历所有地图小块

$(this).attr('class','map_i')//初始化class为最初的map_i，这样原来的砖墙河流等就会没有了；

});

buzhilaojia();//为老家加上不可穿越的属性，还记得吗，给class里加一个zhuan_qiang关键字；

}

2. slidedownmubu()/slideupmubu()，开幕闭幕

function slideupmubu(){//开幕脚本

$('#mubu1').animate({height:0},2000,'linear');//上幕布向上卷起，匀速

$('#mubu2').animate({height:0,top:600},2000,'linear');///下幕布向下卷起，匀速

}

function slidedownmubu(){//幕布脚本

$('#mubu1').animate({height:300},2000,'linear');

$('#mubu2').animate({height:300,top:300},2000,'linear');

$('#start').css('display','block').delay(2100).animate({top:100,opacity:1},500);//闭幕完成后，还要将开始菜单显现；

}

3. copymapdata()，该函数可以获取定义好的地图格子的种类，返回数组

function copymapdata(){//获取自定义地图数据

var $mapdata=[];//初始化数组；

$('.map_i').each(function(index, element) {//遍历所有地图格子

$mapdata.push(getclass(index));//将每个地图格子的地图类型push入数组，这里的getclass(index)在前面已经讲过了，会根据不同的class返回不同的值。

});

return $mapdata;//返回数组

}

4. pastemap(data)，传入一个储存地图数据的数组，根据数据布置地图

function pastemap(data){//将data数据布置成地图

clearmap();//格式化地图

for(var i=0;i

switch(data[i]){//根据不同的值，为每个地图格子添加不同的样式

case 1:$('.map_i').eq(i).addClass('zhuan_qiang');break;

case 2:$('.map_i').eq(i).addClass('tie_qiang');break;

case 3:$('.map_i').eq(i).addClass('riverqiang');break;

case 4:$('.map_i').eq(i).addClass('caodi');break;

}

}

}`

5. startwar()，真正的开始游戏脚本

function startwar(){//开始游戏脚本

$(document).unbind('keydown').unbind('keyup');//初始化键盘按键事件

clearTimeout(timer);//如果光标闪烁，停止编辑地图中的光标闪烁

$('#bianji').css('display','none'); //退出编辑模式，将光标隐藏

$('#yyf').attr('style','').css('display','block');//显示男主角坦克

$(document).bind('keydown',function(event){//绑定键盘按键事件

if(event.which==65)tankermove('#yyf',3);//A坦克向左移动

if(event.which==87) tankermove('#yyf',1);//W坦克向上移动

if(event.which==83) tankermove('#yyf',2);//S坦克向下移动

if(event.which==68) tankermove('#yyf',4);//D坦克向右移动

if(event.which==74) shot('#yyf');//J 男主角坦克开炮

if(event.which==27) {//ESC退出游戏

slidedownmubu();//闭幕

$(this).unbind('keydown').unbind('keyup');//初始化键盘按键事件

setTimeout(clearmap,2150);//格式化地图

setTimeout('pastemap(mapdata[0])',2150);//退出后，重新布置关卡1

}

});

$(document).bind('keyup',function(event){//绑定松开移动按键后，坦克立即停止移动的事件

if(event.which==65)$('#yyf').stop(true,false);

else if(event.which==87)$('#yyf').stop(true,false);

else if(event.which==83) $('#yyf').stop(true,false);

else if(event.which==68)$('#yyf').stop(true,false);

movet();//坦克停止移动后，做一个位置的小调整

});

}

到这里，开始菜单的各按钮事件绑定就完成了。本篇内容也到此结束。

其中，startwar()里有几个重头函数，将是以后的章节中要介绍的主要内容。

其中，tankermove(tankerid,n)是坦克的移动函数；

shot(tankerid)是坦克的开炮函数；

movet()是一个移动结束后位置的调整函数，可以让坦克停止移动后其位置是一个整数，不然位置是小数不利于坦克移动，比如你永远也穿不过一个宽度和坦克宽度一样的通道。