Kesan perlanggaran bola gerakan molekul direalisasikan oleh jQuery

Kesan perlanggaran bola gerakan molekul direalisasikan oleh jQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:17:18

asal

1881 orang telah melayarinya

Contoh dalam artikel ini menerangkan kesan perlanggaran bola gerakan molekul yang dilaksanakan oleh jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Mari kita lihat rendering dahulu Kerana bola sedang bergerak, sukar untuk mengambil tangkapan skrin Di sini saya akan melukis laluan kasar untuk menyatakan idea umum dan jalankannya sendiri:

Bolanya agak kecil, hehe, saya belum uruskan butirannya secara terperinci Jika anda mahu menjadikannya sempurna, anda boleh menanganinya sendiri. Ini adalah keadaan ideal simulasi. Tiada pergerakan geseran dan perlanggaran molekul dalam kumpulan Ia adalah berteknologi tinggi~~~~~~mu~a
Kod itu belum disusun lagi Jika anda berminat, susunkannya ke dalam bentuk berorientasikan objek!

Kod adalah seperti berikut:

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

Salin selepas log masuk

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas di tapak ini: "Ringkasan kesan khas klasik biasa jQuery" dan "Ringkasan animasi jQuery dan penggunaan kesan khas"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.