HTML+CSS+JQ试做经典坦克大战（三）-原创手记-慕课网

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

惯例，先上HTML内容和最终效果
图片描述


<div class="setting" id="setting">//菜单包裹层
        <div class="mubu" id="mubu1"></div>
        <div class="mubu" id="mubu2"></div>//幕布，分为上幕和下幕，开幕的时候从中间开始分别卷起上下幕；
        <div class="start" id="start">//开始菜单，4个按钮div
            <div class="btn">开始游戏</div>
            <div class="btn">游戏说明</div>
            <div class="btn">选择关卡</div>
            <div class="btn">定义地图</div>
        </div>
        <div class="start" id="shuoming">//游戏说明div
            <ul class="ul_shuoming">
                <li>W:向上</li>
                <li>S:向下</li>
                <li>A:向左</li>
                <li>D:向右</li>
                <li>J:开炮/选择地图种类</li>
                <li>Esc:返回主菜单/取消定义地图</li>
                <li>Enter:完成定义地图</li>
            </ul>
            <div class="btn">返回</div>//里面有一个返回按钮div
        </div>
        <div class="start" id="chooselevel">//选择关卡按钮，里面有4个按钮
            <div class="btn">关卡一</div>
            <div class="btn">关卡二</div>
            <div class="btn">关卡三</div>
            <div class="btn">关卡四</div>
        </div>
</div>


.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<data.length;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()是一个移动结束后位置的调整函数，可以让坦克停止移动后其位置是一个整数，不然位置是小数不利于坦克移动，比如你永远也穿不过一个宽度和坦克宽度一样的通道。

HTML+CSS+JQ试做经典坦克大战（三）原创