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

浏览:1266 发布日期: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


评论(9 相关
回复 宜人贷 2017-02-24
canvas能完成的动画通过简单的。。
这文章很不错,很有用!
回复 立刻贷 2017-05-28
动画通过简单的??
回复 币安 2017-11-16
币安网:http://www.lelev.com 大陆重新开放注册。
文章不错支持一下吧
回复 聚币网 2018-02-03
请点击下面的运行代码
文章很好收获很大
文章很有用,不错。
火牛视频:http://www.sohuo.com 精彩不容错过。

发表评论

必填

选填

选填