<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>碰撞检测</title>
        <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .wp {
                width: 600px;
                height: 500px;
                border: 1px solid;
                position: relative;
            }

            .box {
                width: 30px;
                height: 30px;
                background: red;
                position: absolute;
                border-radius: 50%;
            }

            .box2 {
                width: 100px;
                height: 100px;
                background: orange;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
            }
        </style>

    </head>

    <body>
        <div class="wp">
            <div class="box"></div>
            <div class="box2"></div>
        </div>
    </body>
    <script type="text/javascript">
        var wp = $(".wp");
        var box = $(".box");
        var box2 = $(".box2")

        var bl = box.offset().left;
        var bt = box.offset().top;
        var bv = 1;
        var bv2 = 1;
        //随机数
        function randomNum(min,max){
            var choices = max - min + 1;
            var num = Math.floor(Math.random() * choices + min );
            return num;
        }
        //随机颜色
        function colorFun(num){
            if(num==1){
                wp.css('border',"1px solid rgb("+randomNum(0,255)+","+randomNum(0,255)+","+randomNum(0,255)+")");
            }else{
                box2.css('background',"rgb("+randomNum(0,255)+","+randomNum(0,255)+","+randomNum(0,255)+")");
            }
            box.css('background',"rgb("+randomNum(0,255)+","+randomNum(0,255)+","+randomNum(0,255)+")");
        }
        setInterval(function() {
            bl += bv;
            bt += bv2;

            if(bl == (wp.width() - box.width()) || bl <= 0) {
                bv *= -1;
                colorFun(1);
            }
            if(bt >= (wp.height() - box.height()) || bt <= 0) {
                bv2 *= -1;
                colorFun(1);
            }

            // 左侧
            if(bl == (box2.offset().left - box.width()) && bt >= (box2.offset().top-box.height()) && bt <= (box2.offset().top + box2.height())) {
                bv *= -1;
                colorFun();
            }
            // 上侧

            if(bt == (box2.offset().top - box.height()) && bl >= (box2.offset().left- box.width()) && bl <= (box2.offset().left + box2.width())) {
                bv2 *= -1;
                colorFun();
            }

            // 右侧
            if(bl == (box2.offset().left + box2.width()) && bt >= (box2.offset().top-box.height()) && bt <= (box2.offset().top + box2.height())) {
                bv *= -1;
                colorFun();
            }
            // 下侧

            if(bt == (box2.offset().top + box2.height()) && bl >= (box2.offset().left- box.width()) && bl <= box2.offset().left + box2.width()) {
                bv2 *= -1;
                colorFun();
            }

            box.css('left',bl + "px");
            box.css("top" , bt + "px");
        }, )
    </script>

</html>

jQ 小球碰撞检测的更多相关文章

  1. js实现小球的弹性碰撞。

      前  言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...

  2. “AS3.0高级动画编程”学习：第一章高级碰撞检测

    AdvancED ActionScript 3.0 Animation 是Keith Peters大师继"Make Things Move"之后的又一力作,网上已经有中文翻译版本了 ...

  3. Scrum立会报告+燃尽图（Final阶段第七次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2486 项目地址:https://coding.net/u/wuyy694 ...

  4. Scrum立会报告+燃尽图（Final阶段第二次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2481 项目地址:https://coding.net/u/wuyy694 ...

  5. Scrum立会报告+燃尽图（Final阶段第三次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2481 项目地址:https://coding.net/u/wuyy694 ...

  6. Scrum立会报告+燃尽图（Final阶段第四次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2481 项目地址:https://coding.net/u/wuyy694 ...

  7. Scrum立会报告+燃尽图（Final阶段第五次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2484 项目地址:https://coding.net/u/wuyy694 ...

  8. Scrum立会报告+燃尽图（Final阶段第六次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2485 项目地址:https://coding.net/u/wuyy694 ...

  9. Scrum立会报告+燃尽图（Final阶段第一次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2480 项目地址:https://coding.net/u/wuyy694 ...

随机推荐

  1. css文字环绕

    html: <div class="wrap-div-topSpacer"></div> <div class="wrap-div" ...

  2. UWP MySQL 最新版 6.10.5是坏的

    #实锤#证实了,MySQL 最新版 6.10.5,在UWP平台并不能连接,是坏的 Oracle竟然没有测试吗?直接上线??? 我已经把把BUG设置为最高严重等级,提交给了官方. I'm using u ...

  3. js.ajax优缺点，工作流程

    1.ajax的优点 Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点: 1.最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.  2.使用异步方式与服务器通信,不 ...

  4. JTree实现电脑资源管理器

    0.前言 最近老师布置了一项用Java写资源管理器的任务,一开始以为简单,但是实际操作起来,却发现网上的资源用起来相对生疏.在使用中,我也遇到了许多问题,虽然不能像其他博主一样,写的非常齐全,但我还是 ...

  5. Mybatis批量更新报错com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException

    批量更新数据,非常简单的一段代码,硬是报错,插入的数据也能显示出来 List<User> userlist = new ArrayList<User>(); userlist. ...

  6. alibaba/fescar 阿里巴巴 开源 分布式事务中间件

    Fescar 是 阿里巴巴 开源的 分布式事务中间件,以 高效 并且对业务 0 侵入 的方式,解决 微服务 场景下面临的分布式事务问题. 示例:https://github.com/windwant/ ...

  7. Linux命令的那些事(一)

    回顾一下前文,三大主流操作系统 windows做的最好(更准确最早做图形化界面是windows)其实是图形化界面占有90%的市场份额(PC(个人电脑)机的市场)但是现在发展图形界面做的较好其实Unix ...

  8. 控制台报错： SCRIPT1006: Expected ')'

    今天做网站的时候,jsp页面取一个值死活取不出来. <script> if(${not empty requestScope.article.articleId}){ alert(${re ...

  9. Netty源码分析第1章(Netty启动流程)---->第2节: NioServerSocketChannel的创建

    Netty源码分析第一章:  Server启动流程 第二节:NioServerSocketChannel的创建 我们如果熟悉Nio, 则对channel的概念则不会陌生, channel在相当于一个通 ...

  10. docker 安装vim

    执行以下命令 apt-get update apt-get install vim