<!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. 20145209刘一阳《JAVA程序设计》第八周课堂测试

    第八周课堂测试 1.下面代码中共有(C)个线程? public class ThreadTest { public static void main(String args[]){ MyThread ...

  2. 2017战略No.1：坚定不移地走全产业链发展路线

    编者按:2016年9月9日,首次公开表达"我想走全产业链发展路线"的想法. 这几个月,认真思考了下这个决定背后的原因.目的和价值. 付出常人5倍以上的努力,先抓住"技术研 ...

  3. uefi+gpt安装双系统

    uefi+gpt:不要用easybcd!不起作用.找不到.mbr文件. win10空出一个盘: 制作ubuntu启动盘: 分区设置 挂载点 分区大小 新分区类型 新分区位置 用于 / 22000MB ...

  4. OpenStack入门篇（二十一）之VXLAN原理

    1.Vxlan的概念 VXLAN 全称 Virtual eXtensible Local Area Network.(虚拟扩展本地局域网)VXLAN 提供与 VLAN 相同的以太网二层服务,但是拥有更 ...

  5. 亲手搭建一个基于Asp.Net WebApi的项目基础框架4

    实现目的:配置website端与服务端对接 1:配置好各项配置文件 2:server端编写接口客户端调用 1.1首先配置文件有log4的配置文件,有config的配置文件,还有服务列表的配置文件 首先 ...

  6. python之打包、发布模块

    一.python中针对于写好的模块,并且比人也可以使用改模块,这样就可以以同意的打出来,让别人安装或者赋值过后可以更好的使用以及集成. 二.最近在学习python所以这里主要是记录一下python的打 ...

  7. 2_C语言中的数据类型 （六）浮点数

    1.1       浮点float,double,long double类型 1.1.1          浮点常量,变量 Float在32位系统下是4个字节,double在32位系统下是8个字节 小 ...

  8. express的web server设置流程

    对于express的设置,一直是拿来就用,只知其然,今天查了一下文档,记录详细过程如下. 1.实现基本常用功能需要的模块path 用来处理路径字符串拼接,设置模板路径和静态资源路径时使用cookie- ...

  9. hdu1232畅通工程(并查集，简单题)

    传送门 最少好要修多少条路太能使全部城镇连通.只要用并查集算可以连通的城市的组数,修的路就是组数减1 #include<bits/stdc++.h> using namespace std ...

  10. Fiddler抓包原来可以这么玩

    Fiddler是一个抓包工具 1 解压压缩包至C\program files (x86) 2 打开C program files (x86) Fiddler Web Debugger V4.6.201 ...