会飞的小鸟

最新推荐文章于 2020-03-26 16:50:09 发布

lucky芬

最新推荐文章于 2020-03-26 16:50:09 发布

阅读量834

点赞数

分类专栏：练手小案例

本文链接：https://blog.csdn.net/daimomo000/article/details/78676674

版权

练手小案例专栏收录该内容

42 篇文章

订阅专栏

网上下载的小鸟gif图不太好看~~

重在思路~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会飞的小鸟</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div id="dbird"><img src="img/1.gif" alt=""></div>
<script src="jquery-1.4.2.min.js"></script>
<script src="js.js"></script>
</body>
</html>

body{overflow: hidden;}
#dbird{
    position: absolute;
}
.dir_37{
    transform:rotateY(0deg);
}
.dir_38{
    transform:rotate(60deg);
}
.dir_39{
    transform:rotateY(180deg);
}
.dir_40{
    transform:rotate(-60deg);
}

$(function(){
    var $bird = $("#dbird");//找到小鸟的对象
    var pos = $bird.offset();//获取到小鸟的方位，top,left
    var birdSize = {width:$bird.width(),height:$bird.height()};//获取到小鸟的尺寸
    var speed = 10;//设置小鸟移动的速度
    var keyrecord = 37;
    $(document).keydown(function(even){
        var key = even.keyCode;//得到键盘事件
        if(key!=keyrecord){
            $bird.removeClass().addClass("dir_"+key);
        }
        keyrecord = key;
        switch(key){
            case 37://左
                pos.left -= speed;
                if(pos.left <= -birdSize.width){
                    pos.left = $(window).width();
                }
                break;
            case 38://上
                pos.top -= speed;
                if(pos.top <= -birdSize.height){
                    pos.top = $(window).height();
                }
                break;
            case 39://右
                pos.left += speed;
                if(pos.left >= $(window).width()){
                    pos.left = -birdSize.width;
                }
                break;
            case 40://下
                pos.top += speed;
                if(pos.top >= $(window).height()){
                    pos.top = -birdSize.height;
                }
                break;
        }
        $bird.offset(pos);
    });

});