jquery小球碰撞效果程式碼例項

antzone發表於2017-04-12
jQuery

本章節分享一段程式碼例項，它實現了小球自由運動，與周邊四壁碰撞效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
}
#box {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  border: 3px solid #DDDDDD;
  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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></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>
</head>
<body>
  <div id="box">
    <div id="runner">●</div>
  </div>
</body>
</html>

相關文章