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

2.获取图片的方位

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

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

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

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

7.旋转

bird.gif

<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了，看图片分析：

TIM截图20180605234119.png

其他三个同理

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    (请自动转换#为@)