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 (请自动转换#为@)
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。