第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

HTML+CSS+JQ試做經(jīng)典坦克大戰(zhàn)(二)

標(biāo)簽:
Html/CSS JQuery JavaScript

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


编辑模式

开启编辑地图模式


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

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

點(diǎn)擊查看更多內(nèi)容
21人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消