1.獲取圖片和瀏覽器的寬和高
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);
}源碼：（爲了方便，寫在一個文件裏邊了）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="華慕熊">
<meta name="Keywords" content="">
<meta name="Description" content="html註釋和取消註釋是shift+/,
js註釋ctrl+/,js取消註釋ctrl+shift+/">
<title>Document</title>
<script src="jquery-1.10.2.min.js"></script>
<style>
*{
margin:0px;
padding:0PX;
}
bady{
overflow:hidden;
}
#dbird{
width:206px;
height:121px;
position:absolute;
}
.dri_37{
transform:rotateY(180deg);/*直接轉身*/
}
.dri_38{
transform:rotate(-60deg);/*傾斜*/
}
.dri_40{
transform:rotate(60deg);
}
</style>
<script>
/*
1.獲取圖片和瀏覽器的寬和高
2.獲取圖片的方位
3.設置小鳥移動的大小，全局變量
4.獲取鍵盤上的上下左右鍵
5.根據鍵盤上的上下左右控制小鳥的移動
6.超出瀏覽器從反方向出來
7.旋轉
*/
//設置移動的大小
var step = 20;//步長
var rcode = 39;
$(function () {
//獲取小鳥圖片的寬和高
var bwidth = $("#dbird").width();
var bheight = $("#dbird").height();
//獲取瀏覽器的寬和高
var dwidth = $(window).width();
var dheight = $(window).height();
//獲取圖片的方位
var off = $("#dbird").offset(); //x y
$(document).keydown(function (e) {
var keycode = e.keyCode; //獲取按鍵的數：左鍵->37,上鍵38，右鍵->39,下鍵->40
if (keycode != rcode) {
$("#dbird").removeClass().addClass("dri_"+keycode);
}
rcode = keycode;
switch (keycode) {
case 37://左邊
off.left -= step;
if (off.left <= -bwidth) {
off.left = dwidth;
}
break;
case 38://上
off.top -= step;
if (off.top <= -bheight) {
off.top = dwidth;
}
break;
case 39://右
off.left += step;
if (off.left >= dwidth) {
off.left = -bwidth;
}
break;
case 40://下
off.top += step;
if (off.top >= dheight) {
off.top = -bheight;
}
break;
}
$("#dbird").offset(off);//更新小鳥的位置
});
});
</script>
</head>
<body>
<div id="dbird"><img src="bird.gif" width="206" height="121" alt=""></div>
</body>
</html>百度網盤連接：鏈接：https://pan.baidu.com/s/1siJIFDhg6PwAQsYply1img 密碼：6du1
若失效請聯繫我： huamuxiong_2018#163.com (請自動轉換#爲@)