2.獲取圖片的方位

3.設置小鳥移動的大小，全局變量

4.獲取鍵盤上的上下左右鍵

5.根據鍵盤上的上下左右控制小鳥的移動

6.超出瀏覽器從反方向出來

7.旋轉

<div class="dbird"><img src="bird.gif" width="206" height="121" alt=""/></div>

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

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

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

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

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

第三步設置小鳥移動到大小，我們設置一個全局變量，大小為20

var step = 20;

第四步響應鍵盤，鍵盤上的都是用數字表示的，如上下左右是37-40。把按得鍵賦給keycode，然後用來做第五步判斷

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

第五步根據按鍵的是上下左右給出移動，使用switch-case比較簡單

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

此時應該是沒有效果的，刷新小鳥的位置才可以，在switch後重新獲取移動後的位置即可

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

第六步超出瀏覽器從反方向飛回，解釋一下，如一直往右飛，當小鳥的位置大於了瀏覽器的寬度，那麽就看不見小鳥了，此時我們讓小鳥在從瀏覽器的左邊飛進來，因為我們沒有設置小鳥的位置，那麽應該是從圖片的右邊先進來，那麽off.left就是-dwidth了，看圖片分析：

其他三個同理

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

第七步按方位進行旋轉

默認是39（頭朝右）可以做判斷，如果是39，則不旋轉，如果不是39就根據按鍵的數做相應的旋轉，左就旋轉180°，上或下就旋轉60°（度數自己定），可以先寫好按鍵數對應的效果，如37，我們給定37的類dir_37類的css樣式是旋轉180°，當按37時添加dir_37類即可，如果按的不是37而是40了，就移除dir_37類添加dir_40類。

首先先寫好三個類

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

其次可以定義一個全局變量，賦值為默認值39

var rcode = 39;

最後根據按鍵和rcode比較，如果不等於，那麽就添加對應的類，添加之前可以先移除上一次添加的類（如果沒有添加過類就不會執行的）。否則繼續執行。

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

JQ（jQuery）實現會飛的小鳥