html经典坦克大战,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);
}
});
}
到這里,自定義地圖的所有函數就定義完了,最后我們把自定義地圖這個功能綁定在一個按鈕上。
開始游戲游戲說明選擇關卡定義地圖做一個開始菜單,上面有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试做经典坦克大战(二)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 美国纽约大学计算机专业排名,纽约大学计算
- 下一篇: 手机浏览器跳转微信指定页面加好友及跳转微