1.获取图片和浏览器的宽和高
2.获取图片的方位
3.设置小鸟移动的大小，全局变量
4.获取键盘上的上下左右键
5.根据键盘上的上下左右控制小鸟的移动
6.超出浏览器从反方向出来
7.旋转
<div class="dbird"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bird.gif" width="206" height="121" alt=""></div></body></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦