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

開啟編輯地圖模式

$('#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);

}

});

}

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

開始游戲游戲說明選擇關卡定義地圖

做一個開始菜單，上面有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经典坦克大战,HTML+CSS+JQ试做经典坦克大战（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。