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);
        }
    });
}

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

<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();//进入编辑地图模式
        });
    });

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

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