承接一，本篇主要完善坦克大戰(zhàn)的自定義地圖編輯腳本。

開啟編輯地圖模式

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

顯示光標(biāo)

var timer;//自定義地圖光標(biāo)閃爍定時(shí)器名稱，方便終止

function blinkgb(){//自定義地圖光標(biāo)閃爍腳本

$('#guangbiao').css('display')=='block'?$('#guangbiao').css('display','none'):$('#guangbiao').css('display','block');

timer=setTimeout(blinkgb,500);

}

定義光標(biāo)閃爍函數(shù)；

blinkgb();

開啟光標(biāo)閃爍

定義光標(biāo)移動(dòng)腳本

function moveguangbiao(n){//自定義地圖光標(biāo)移動(dòng)腳本，n用來表示光標(biāo)移動(dòng)方向

var $guangbiao=$('#bianji');

if(n==1){//向上移動(dòng)(這里用switch-case更好，這里就不改了)

var $top=($guangbiao.position().top+550)%600+'px';//做一個(gè)判斷，如果光標(biāo)位于第1排，移動(dòng)光標(biāo)到最后一排

$guangbiao.css('top',$top);//移動(dòng)光標(biāo)

}

else if(n==2){//向下移動(dòng)

var $top=($guangbiao.position().top+50)%600+'px';

$guangbiao.css('top',$top);

}

else if(n==3){//向左移動(dòng)

var $left=($guangbiao.position().left+800)%850+'px';

$guangbiao.css('left',$left);

}

else{//向右移動(dòng)

var $left=($guangbiao.position().left+50)%850+'px';

$guangbiao.css('left',$left);

};

}

定義布置地圖塊腳本

function buzhi(){//自定義地圖布置地圖腳本

/*獲取當(dāng)前光標(biāo)坐標(biāo)，計(jì)算出光標(biāo)所在地圖格子的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);//獲取當(dāng)前地圖格子上的地圖類型，getclass(j)是一個(gè)自定義函數(shù)，傳入坐標(biāo)，返回該坐標(biāo)格子對(duì)應(yīng)的地圖類型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){//獲取下標(biāo)為j的地圖格子上的地圖類型

var $classname=$('.map_i').eq(j).attr('class').split(' ')[1];//獲取代表地圖類型的class;例子class="map_i zhuan_qiang"，經(jīng)過這個(gè)表達(dá)式，就會(huì)變成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

}

綁定鍵盤按鍵移動(dòng)函數(shù)

function editmap(){//編輯地圖腳本

$('#bianji').css('display','block');//顯示光標(biāo)

blinkgb();//光標(biāo)閃爍開啟

$('#bianji').attr('style','').css('display','block');

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

$('#yyf').css('display','none');//隱藏坦克

$(document).bind('keydown',function(event){//添加光標(biāo)移動(dòng)按鍵時(shí)間ESC回車事件

if (event.which == 13) {//回車事件

event.preventDefault();//屏蔽默認(rèn)事件

slidedownmubu();//閉幕事件，后面講

}

if(event.which==65) moveguangbiao(3);//A鍵綁定光標(biāo)左移

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

}

});

}

到這里，自定義地圖的所有函數(shù)就定義完了，最后我們把自定義地圖這個(gè)功能綁定在一個(gè)按鈕上。

開始游戲游戲說明選擇關(guān)卡定義地圖

做一個(gè)開始菜單，上面有4個(gè)按鈕

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

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

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

clearmap();//清理地圖

buzhilaojia();//布置老家

slideupmubu();//開幕

editmap();//進(jìn)入編輯地圖模式

});

});

到此，地圖編輯模式就定義好了。講的太亂了，大家將就一下。

總結(jié)

以上是生活随笔為你收集整理的html经典坦克大战,HTML+CSS+JQ试做经典坦克大战（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。