利用js正弦定律制作小狗接球的小动画

浏览:2049 发布日期:2016/11/27 分类:canvas 关键字: js动画 js正弦动画

  本来是打算尝试用canvas去制作这个动画,但是最后觉得,canvas能完成的动画通过简单的dom结构也能完成,就没必要耗费太多时间来做canvas,这动画是利用正弦定律加上随机概率,小狗有一定几率接到红色的运动球,正弦定律制作的是一个曲线轨迹,这样使动画看起来更具有运动轨迹曲线

先看下动画游戏效果,如果不能看到,请点击下面的运行代码

  

下面贴出代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <style>
    .box2{
     width:400px;
     height:600px;
     margin:0 auto;
     border:1px solid #ccc;
     position: relative;
    }
    #ball{
     background: red;
     width:30px;
     height: 30px;
     -moz-border-radius: 15px;      /* Gecko browsers */
   -webkit-border-radius: 15px;   /* Webkit browsers */
   border-radius:15px;  
   position: absolute;
   top:550px;
   left:200px;
    }
    #dog{
     left:100px;
     height: 220px;
        width: 220px;
     background:url("http://maotouying.org/zb_users/upload/2016/11/dog.jpg");
     position: absolute;
     top:-30px;
    }
    </style>
</head>

<body>
    <div class="box2">
     <div id="dog"></div>
     <div id="ball"></div>
    </div>

    <script>
     $(function(){
     var a=0;
            var b=0.005;
            var c=1;
            var d=1;
            var e=Math.random()*(1-200)+200;
     $("#ball").click(function(){
        var id = setInterval(function (){
     a+=b;
                c+=d;
                if(a>180){
                    a=0
                }
                
     if(c>=550){
     c=0
                    a=0;
                    clearInterval(id);
                    location=location; 
     }
                
     $("#ball").css({
                    top:(550-c),
                    left:(200-Math.sin(a)*e)
                });
                var f=188<(200-Math.sin(a)*e)&&(200-Math.sin(a)*e)<200;
                console.log(f);

                if(c==(550-97)){
                    if(188<(200-Math.sin(a)*e)&&(200-Math.sin(a)*e)<200){
                       alert('吃着了');
                    }
                }

     }
     ,5)
     })

     
     })
    </script>
</body>


</html>

猫头鹰博客专注前端开发

前端开发QQ群:577185192

1476844455471.png


评论(45 相关
回复 宜人贷 2017-02-24
canvas能完成的动画通过简单的。。
这文章很不错,很有用!
回复 立刻贷 2017-05-28
动画通过简单的??
回复 币安 2017-11-16
币安网:http://www.lelev.com 大陆重新开放注册。
文章不错支持一下吧
回复 聚币网 2018-02-03
请点击下面的运行代码
文章很好收获很大
文章很有用,不错。
火牛视频:http://www.sohuo.com 精彩不容错过。
文章很好收获很大
博主分享的不错的啦,学习了不少,文章很好收获很大
感谢大佬分享
感谢分享 继续支持
学习了 很受用
非常好的项目 支持下
感谢分享的啦,支持支持哈。
分享的内容不错,支持一下哈
不错 非常棒
感谢分享 继续支持
学习了 很受用
文章内容很精彩 很适合我们阅读学习
文章内容很好啊,互粉互粉啊
文章不错支持一下,非常喜欢
很好 值得学习分享下
支持下
很好 学习了 支持下
学到很多
很精彩 学习到了 不错
内容精彩 值得学习分享
非常不错 值得学习下
非常不错 很精彩 学习了
很好 精彩 学习到了 不错
不错 很精彩 学习了
非常不错 学习支持下 很好
内容精彩 值得学习分享下 很好
济南新风向小编过来看看
内容很好 学习了 支持下啊
精彩 学习了 不错
非常好 学习了
不错 支持下 非常好
支持下 非常好 不错
很棒 学习了 不错
很棒 支持下 学习了
非常不错 很好
内容精彩 值得学习下

发表评论

必填

选填

选填