JQ（jQuery）實(shí)現(xiàn)會(huì)飛的小鳥

.dbird{width:206px;height:121px;}

第一步獲取該div的寬和高以及瀏覽器的寬和高

var dwidth = $(".dbird").width();
var dheight = $(".dbird").height();
var bwidth = $(window).width();
var bheight = $(window).height();

第二步獲取方位  x、y，不設(shè)置位置的話，默認(rèn)在瀏覽器的左上角的(0,0)位置，即圖片的左上角的位置是瀏覽器的（0,0）

var off = $(".dbird").offset();

第三步設(shè)置小鳥移動(dòng)到大小，我們?cè)O(shè)置一個(gè)全局變量，大小為20

var step = 20;

第四步響應(yīng)鍵盤，鍵盤上的都是用數(shù)字表示的，如上下左右是37-40。把按得鍵賦給keycode，然后用來(lái)做第五步判斷

$(document).keydown(function(e){
	var keycode = e.keyCode;
}

第五步根據(jù)按鍵的是上下左右給出移動(dòng)，使用switch-case比較簡(jiǎn)單

switch(keycode){
    case 37:  //左
        off.left -= step;  //按一下往左動(dòng)20
        break;
    case 38://上
        off.top -= step;  //按一下往上動(dòng)20
        break;
    case 39:  //右
        off.left +=step;   //按一下往右動(dòng)20
        break;
    case 40: //下
        off.top += step;  //按一下往下動(dòng)20
        break;
}

此時(shí)應(yīng)該是沒(méi)有效果的，刷新小鳥的位置才可以，在switch后重新獲取移動(dòng)后的位置即可

$(".dbird").offset(off);

第六步超出瀏覽器從反方向飛回，解釋一下，如一直往右飛，當(dāng)小鳥的位置大于了瀏覽器的寬度，那么就看不見(jiàn)小鳥了，此時(shí)我們讓小鳥在從瀏覽器的左邊飛進(jìn)來(lái)，因?yàn)槲覀儧](méi)有設(shè)置小鳥的位置，那么應(yīng)該是從圖片的右邊先進(jìn)來(lái)，那么off.left就是-dwidth了，看圖片分析：

其他三個(gè)同理

if(off.left <= -dwidth){  //37
	off.left = bwidth;
}
if(off.top<=-dheight){   //38
	off.top = bheight;
}
if(off.left>=bwidth){    //39
	off.left=-dwidth
}
if(off.top>=bheight){    //40
	off.top = -dheight;
}

第七步按方位進(jìn)行旋轉(zhuǎn)

默認(rèn)是39（頭朝右）可以做判斷，如果是39，則不旋轉(zhuǎn)，如果不是39就根據(jù)按鍵的數(shù)做相應(yīng)的旋轉(zhuǎn)，左就旋轉(zhuǎn)180°，上或下就旋轉(zhuǎn)60°（度數(shù)自己定），可以先寫好按鍵數(shù)對(duì)應(yīng)的效果，如37，我們給定37的類dir_37類的css樣式是旋轉(zhuǎn)180°，當(dāng)按37時(shí)添加dir_37類即可，如果按的不是37而是40了，就移除dir_37類添加dir_40類。

首先先寫好三個(gè)類

.dri_37{
    transform:rotateY(180deg);/*直接轉(zhuǎn)身*/
}
.dri_38{
    transform:rotate(-60deg);/*傾斜*/
}
.dri_40{
    transform:rotate(60deg);
}

其次可以定義一個(gè)全局變量，賦值為默認(rèn)值39

var rcode = 39;

最后根據(jù)按鍵和rcode比較，如果不等于，那么就添加對(duì)應(yīng)的類，添加之前可以先移除上一次添加的類（如果沒(méi)有添加過(guò)類就不會(huì)執(zhí)行的）。否則繼續(xù)執(zhí)行。

if (keycode != rcode) {
    $(".dbird").removeClass().addClass("dri_"+keycode);
}

源碼：（為了方便，寫在一個(gè)文件里邊了）