<!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. WPF中如何使用BusyIndicator

    一.下载dll:http://wpftoolkit.codeplex.com/releases/view/99072 下载之后将WPFToolkit引用到WPF项目下: 二.添加命名空间: xmlns ...

  2. Package设计2：增量更新

    SSIS 设计系列: Package设计1:选择数据类型.暂存数据和并发 Package设计2:增量更新 Package 设计3:数据源的提取和使用暂存 一般来说,ETL实现增量更新的方式有两种,第一 ...

  3. 手把手带你打造一个 Android 热修复框架（上篇）

    本文来自网易云社区 作者:王晨彦 前言 热修复和插件化是目前 Android 领域很火热的两门技术,也是 Android 开发工程师必备的技能. 目前比较流行的热修复方案有微信的 Tinker,手淘的 ...

  4. css快速入门-引入方式

    一.概述 HTML是骨架.框架CSS是外表.衣服JS是动作.肌肉 css的主要作用是对元素进行渲染.1.找到要操作的标签(选择器)2.对定位的标签进行操作(属性) 二.CSS引入方式 1.行内式 &l ...

  5. CI/CD系列

    一.CI/CD系列 什么是CI/CD(译) Docker与CI/CD(转) Docker和CI/CD实战 二.Git 三.GitLab

  6. Linux shell（3）

    shell的运算操作: let整数运算 expr整数运算 bc浮点运算 字符串运算 let命令: let命令让BASH shell 执行算数值的操作,使用let,可以比较两个值或执行加减乘除等这样的算 ...

  7. CF刷题-Codeforces Round #481-F. Mentors

    题目链接:https://codeforces.com/contest/978/problem/F 题目大意: n个程序员,k对仇家,每个程序员有一个能力值,当甲程序员的能力值绝对大于乙程序员的能力值 ...

  8. 《图解 HTTP 》阅读 —— 第一章

    第1章 了解web及网络基础 计算机与网络设备相互通信的规则称为协议,比如:如何探测到通信目标.由哪一边发起通信.使用那种语言进行通信.怎么结束通信等. TCP/IP 协议族按照层次分为以下四层:应用 ...

  9. ubuntu HackRF One相关环境搭建

    本文内容.开发板及配件仅限用于学校或科研院所开展科研实验! 淘宝店铺名称:开源SDR实验室 HackRF链接:https://item.taobao.com/item.htm?spm=a1z10.1- ...

  10. python—启动自带shell时报错（丢失api-ms-win-crt-runtime-l1-1-0.dll)已解决

    备注: 有的伙伴安装完1后重启,问题可以解决,summer儿在安装完1依然未能解决,于是又进行了2的安装再次重启后问题解决!! 1,安装vc-redist.x64,微软官网搜索免费下载,安装后重启. ...