<!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. EntityFramework使用动态Lambda表达式筛选数据

    public static class PredicateBuilder { public static Expression<Func<T, bool>> True<T ...

  2. Windows和Linux下通用的线程接口

    对于多线程开发,Linux下有pthread线程库,使用起来比较方便,而Windows没有,对于涉及到多线程的跨平台代码开发,会带来不便.这里参考网络上的一些文章,整理了在Windows和Linux下 ...

  3. 【HNOI2014】画框

    题面 题解 这又是一种套路啊233 将\(\sum a_i\)和\(\sum b_i\)分别看做\(x\)和\(y\),投射到平面直角坐标系中,于是就是找\(xy\)最小的点 于是可以先找出\(x\) ...

  4. UWP 检测网络状态

    最近发现Community Toolkit有了网络辅助类,貌似很早就有了... 很不错,还是用.给大家分享一下. 1. 检测网络是否可用 2. 检测网络是否是计费模式? 3. 检测网络接入类型 4. ...

  5. Convert Application Model Differences

    The eXpressApp Framework is based on the modules concept. As a rule, every module implements a certa ...

  6. 发现一个很N且免费的html5拓扑图 关系图 生成组件

    传送门:http://visjs.org/ demo代码 <!doctype html> <html> <head> <title>vis.js new ...

  7. selenium 定位不到元素总结

    元素在网页上,却会出现定位不到的情况的分析. 1. 定位不正确. 2. 页面还没有加载完就去查找元素了. 3. 有遮罩层. 首先说下第3点. 先前在公司遇到过这样的问题. 页面是显示出来了, 这个元素 ...

  8. 【转】sshpass-Linux命令之非交互SSH密码验证

      sshpass-Linux命令之非交互SSH密码验证 ssh登陆不能在命令行中指定密码.sshpass的出现,解决了这一问题.sshpass用于非交互SSH的密码验证,一般用在sh脚本中,无须再次 ...

  9. Python里的类和对象简介

    ---恢复内容开始--- Python里的类  对象=属性+方法: 对象的属性主要是指主要的特征和参量,而方法主要是指函数: 类是一个具有一定特征和方法的集合,而对象是类的一个:类和对象的关系就如同模 ...

  10. jQuery的$ .ajax防止重复提交的方法

    没啥说的直接贴代码,很简单: 第一种方式:的onclick点击事件类型 <SCRIPT> function member_del(obj,id){ var lock = false; // ...