Home >Web Front-end >JS Tutorial >Molecular motion ball collision effect realized by jQuery_jquery

Molecular motion ball collision effect realized by jQuery_jquery

WBOYOriginal: 2016-05-16 15:17:181897browse

The example in this article describes the molecular motion ball collision effect implemented by jQuery. Share it with everyone for your reference, the details are as follows:

Let’s look at the renderings first. Because the ball is in motion, it’s hard to take a screenshot. Here I’ll draw a rough outline of the route to express the general idea. If you want to see the real effect, paste it and run it yourself:

The ball is a bit small, hehe, I haven’t dealt with the details in detail. If you want to make it perfect, you can deal with it yourself! This is the ideal state of simulation. There is no friction and collision movement of molecules in the group. It is high-tech~~~~~~mu~a
The code has not been organized yet. If you are interested, organize it into an object-oriented form!

The code is as follows:

<!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>

Readers who are interested in more content related to jQuery special effects can check out the special topics on this site: "Summary of common classic special effects of jQuery" and "Summary of jQuery animation and special effects usage"

I hope this article will be helpful to everyone in jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery+canvas implements simple oblique throwing and color dynamic transformation effects_jqueryNext article：jQuery+canvas implements simple oblique throwing and color dynamic transformation effects_jquery

See more

Molecular motion ball collision effect realized by jQuery_jquery

Related articles