hallo,everyone，我又來了，第3篇內容主要講述坦克大戰開始菜單的設計和事件綁定。

慣例，先上HTML內容和最終效果

//菜單包裹層//開始菜單，4個按鈕div開始游戲游戲說明選擇關卡定義地圖//游戲說明div

• W:向上
• S:向下
• A:向左
• D:向右
• J:開炮/選擇地圖種類
• Esc:返回主菜單/取消定義地圖
• Enter:完成定義地圖

返回//里面有一個返回按鈕div//選擇關卡按鈕，里面有4個按鈕關卡一關卡二關卡三關卡四

.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

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做坦克大战的效果,HTML+CSS+JQ试做经典坦克大战（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

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