jQuery实现的分子运动小球碰撞效果


Posted in Javascript onJanuary 27, 2016

本文实例讲述了jQuery实现的分子运动小球碰撞效果。分享给大家供大家参考,具体如下:

先看效果图吧,因为小球是运动状态的,不好截图,这里就先大体画了一下路线,表示大体意思吧,如果想看真实的效果,自己粘贴下去运行:

jQuery实现的分子运动小球碰撞效果

小球有点小哟,嘿嘿,没有对细节进行详细的处理,如果像让它完美一点,自己处理下吧!这里是模拟的理想状态下的,没有摩擦力与组里的分子碰撞运动,高科技哟~~~~~~mu~a
代码也没有整理,如果有心的话,把它整理成面向对象形式的吧!

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    var dim_half_past_PI = dimAngle(Math.PI / 2); // Math.PI/2的约数
    var lastAngle = dimAngle(Math.PI/8); // 发射角度(0-dimAngle(Math.PI))
    var v = 120; //飞行速度【>0】
    var lastPosition = {}; // 最后一次碰撞坐标
    var lastTime = ""; // 最后一次碰撞时间
    var lastDirection = "top"; // 开始发射方向(top,bottom,left,right)
    var horizen = 1; // 水品方向的积数
    var vertical = 1; // 竖直方向的积数
    var box = {};
    function dimAngle(angle) {
      var tempAngle = angle + "";
      return parseFloat(tempAngle.substring(0, 6));
    }
    function getWillDirection(position, box) {
      var direction = lastDirection;
      if (position.x < box.left) {
        direction = "right";
      }
      if (position.x > box.right) { 
        direction = "left"
      }
      if (position.y < box.top) {
        direction = "bottom";
      }
      if (position.y > box.bottom) {
        direction = "top";
      }
      return direction;
    }
    function getScale(direction, angle) { 
      switch(direction){
        case "top":
          vertical = -1;
          if (angle < dim_half_past_PI) {
            horizen = 1;
          }
          if (angle > dim_half_past_PI) {
            horizen = -1;
          }
          if (angle == dim_half_past_PI) {
            horizen = 0;
          }
          break;
        case "left":
          horizen = -1;
          if (angle > dim_half_past_PI) {
            vertical = 1;
          }
          if (angle < dim_half_past_PI) {
            vertical = -1;
          }
          if (angle == dim_half_past_PI) {
            vertical = 0;
          }
          break;
        case "bottom":
          vertical = 1;
          if(angle > dim_half_past_PI) {
            horizen = 1;
          }
          if(angle < dim_half_past_PI) {
            horizen = -1;
          }
          if(angle == dim_half_past_PI) {
            horizen = 0;
          }
          break;
        case "right":
          horizen = 1;
          if (angle > dim_half_past_PI) {
            vertical = -1;
          }
          if (angle < dim_half_past_PI) {
            vertical = 1;
          }
          if (angle == dim_half_past_PI) {
            vertical = 0;
          }
          break;
      }
    }
    function getOutAngle(inAngle) {
      if (inAngle == dim_half_past_PI || inAngle == 0) {
        return inAngle;
      } else {
        return dim_half_past_PI - inAngle;
      }
    }
    function setPosition(obj, position) {
      obj.css({ "left": position.x +"px", "top": position.y +"px"});
    }
    function run(obj) {
      var vx = Math.cos(lastAngle) * v;
      var vy = Math.sin(lastAngle) * v;
      var runTime = (new Date().getTime() - lastTime) / 1000;
      getScale(lastDirection, lastAngle);
      var sx = vx * runTime * horizen;
      var sy = vy * runTime * vertical;
      var position = {
        x: lastPosition.x + sx,
        y: lastPosition.y + sy
      };
      setPosition(obj, position);
      var currentDirection = getWillDirection(position, box);
      console.log(currentDirection +":"+lastDirection+":"+vertical+":"+horizen+":"+lastAngle+":"+dim_half_past_PI);
      // 如果没有发生碰撞
      if (currentDirection != lastDirection) {
        // 如果发生了碰撞
        lastDirection = currentDirection;
        lastPosition = position;
        lastTime = new Date().getTime();
        lastAngle = getOutAngle(lastAngle);
      }
      setTimeout(function () {
        run(obj);
      }, 30);
    }
    $(document).ready(function () {
      var boxer = $("#box");
      var x = parseInt(boxer.offset().left);
      var y = parseInt(boxer.offset().top);
      box = {
        left: x,
        top: y,
        right: x + boxer.width(),
        bottom: y + boxer.height()
      };
      var runner = $("#runner");
      lastTime = new Date().getTime();
      lastPosition = {
        x: x,
        y: y + boxer.height()
      };
      run(runner);
    });
  </script>
  <style type="text/css" >
  body { margin:0; padding:0; }
  #box { margin:0 auto; width:500px; height:500px; border:3px solid #DDDDDD; border-radius:4px; -wekit-border-radius:4px; -moz-border-radius:4px;}
  #runner { width:10px; height:10px; font-size:10px; color:black; padding:0; position:absolute; left:100px; top:480px;}
  </style>
</head>
<body>
<div id="box">
<div id="runner">●</div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
layui对工具条进行选择性的显示方法
Sep 19 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 #Javascript
不用一句js代码初始化组件
Jan 27 #Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 #Javascript
封装属于自己的JS组件
Jan 27 #Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 #Javascript
Bootstrap树形控件使用方法详解
Jan 27 #Javascript
window.onerror()的用法与实例分析
Jan 27 #Javascript
You might like
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
简单实现python进度条脚本
2017/12/18 Python
详解python字节码
2018/02/07 Python
python书籍信息爬虫实例
2018/03/19 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Python通过socketserver处理多个链接
2020/03/18 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
政工例会汇报材料
2014/08/26 职场文书
志愿者个人总结
2015/03/03 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
讲解MySQL增删改操作
2022/05/06 MySQL