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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 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
NOT NULL 和NULL
2007/01/15 PHP
php URL编码解码函数代码
2009/03/10 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP7匿名类用法分析
2016/09/26 PHP
可输入的下拉框
2006/06/19 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
python通过opencv实现批量剪切图片
2017/11/13 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
Python实现弹球小游戏
2020/08/01 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
保护环境建议书
2014/03/12 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
工作说明书范文
2014/05/07 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
班主任开场白
2015/06/01 职场文书
浅谈Python协程asyncio
2021/06/20 Python