1.获取图片和浏览器的宽和高

2.获取图片的方位

3.设置小鸟移动的大小，全局变量

4.获取键盘上的上下左右键

5.根据键盘上的上下左右控制小鸟的移动

6.超出浏览器从反方向出来

7.旋转

<divclass="dbird"><imgsrc="bird.gif"width="206"height="121"alt=""/></div>

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

第一步获取该div的宽和高以及浏览器的宽和高

vardwidth=$(".dbird").width();vardheight=$(".dbird").height();varbwidth=$(window).width();varbheight=$(window).height();

第二步获取方位 x、y，不设置位置的话，默认在浏览器的左上角的(0,0)位置，即图片的左上角的位置是浏览器的（0,0）

varoff=$(".dbird").offset();

第三步设置小鸟移动到大小，我们设置一个全局变量，大小为20

varstep=20;

第四步响应键盘，键盘上的都是用数字表示的，如上下左右是37-40。把按得键赋给keycode，然后用来做第五步判断

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

第五步根据按键的是上下左右给出移动，使用switch-case比较简单

switch(keycode){case37://左off.left-=step;//按一下往左动20break;case38://上off.top-=step;//按一下往上动20break;case39://右off.left+=step;//按一下往右动20break;case40://下off.top+=step;//按一下往下动20break;}

此时应该是没有效果的，刷新小鸟的位置才可以，在switch后重新获取移动后的位置即可

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

第六步超出浏览器从反方向飞回，解释一下，如一直往右飞，当小鸟的位置大于了浏览器的宽度，那么就看不见小鸟了，此时我们让小鸟在从浏览器的左边飞进来，因为我们没有设置小鸟的位置，那么应该是从图片的右边先进来，那么off.left就是-dwidth了，看图片分析：

其他三个同理

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

varrcode=39;

最后根据按键和rcode比较，如果不等于，那么就添加对应的类，添加之前可以先移除上一次添加的类（如果没有添加过类就不会执行的）。否则继续执行。

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

源码：（为了方便，写在一个文件里边了）

<!doctypehtml><html><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content="华慕熊"><metaname="Keywords"content=""><metaname="Description"content="html注释和取消注释是shift+/,js注释ctrl+/,js取消注释ctrl+shift+/"><title>Document</title><scriptsrc="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.旋转*///设置移动的大小varstep=20;//步长varrcode=39;$(function(){//获取小鸟图片的宽和高varbwidth=$("#dbird").width();varbheight=$("#dbird").height();//获取浏览器的宽和高vardwidth=$(window).width();vardheight=$(window).height();//获取图片的方位varoff=$("#dbird").offset();//xy$(document).keydown(function(e){varkeycode=e.keyCode;//获取按键的数：左键->37,上键38，右键->39,下键->40if(keycode!=rcode){$("#dbird").removeClass().addClass("dri_"+keycode);}rcode=keycode;switch(keycode){case37://左边off.left-=step;if(off.left<=-bwidth){off.left=dwidth;}break;case38://上off.top-=step;if(off.top<=-bheight){off.top=dwidth;}break;case39://右off.left+=step;if(off.left>=dwidth){off.left=-bwidth;}break;case40://下off.top+=step;if(off.top>=dheight){off.top=-bheight;}break;}$("#dbird").offset(off);//更新小鸟的位置});});</script></head><body><divid="dbird"><imgsrc="bird.gif"width="206"height="121"alt=""></div></body></html>

百度网盘连接：链接：https://pan.baidu.com/s/1siJIFDhg6PwAQsYply1img 密码：6du1

若失效请联系我： huamuxiong_2018#163.com (请自动转换#为@)