Analysis of JavaScript drag collision Gravity and Elastic motion

Examples of JavaScript drag, collision, gravity and elastic motion are presented in this paper. To share for your reference, the details are as follows:

js Drag, Collision and Gravity Implementation code:

window.onload=function ()
{
 var oDiv=document.getElementById('div1');
 var lastX=0;
 var lastY=0;
 oDiv.onmousedown=function (ev)
 {
 var oEvent=ev||event;
 var disX=oEvent.clientX-oDiv.offsetLeft;
 var disY=oEvent.clientY-oDiv.offsetTop;
 document.onmousemove=function (ev)
 {
  var oEvent=ev||event;
  var l=oEvent.clientX-disX;
  var t=oEvent.clientY-disY;
  oDiv.style.left=l+'px';
  oDiv.style.top=t+'px';
  iSpeedX=l-lastX;
  iSpeedY=t-lastY;
  lastX=l;
  lastY=t;
  document.title='x:'+iSpeedX+', y:'+iSpeedY;
 };
 document.onmouseup=function ()
 {
  document.onmousemove=null;
  document.onmouseup=null;
  startMove();
 };
 clearInterval(timer);
 };
};
var timer=null;
var iSpeedX=0;
var iSpeedY=0;
function startMove()
{
 clearInterval(timer);
 timer=setInterval(function (){
 var oDiv=document.getElementById('div1');
 iSpeedY+=3;
 var l=oDiv.offsetLeft+iSpeedX;
 var t=oDiv.offsetTop+iSpeedY;
 if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
 {
  iSpeedY*=-0.8;
  iSpeedX*=0.8;
  t=document.documentElement.clientHeight-oDiv.offsetHeight;
 }
 else if(t<=0)
 {
  iSpeedY*=-1;
  iSpeedX*=0.8;
  t=0;
 }
 if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
 {
  iSpeedX*=-0.8;
  l=document.documentElement.clientWidth-oDiv.offsetWidth;
 }
 else if(l<=0)
 {
  iSpeedX*=-0.8;
  l=0;
 }
 if(Math.abs(iSpeedX)<1)
 {
  iSpeedX=0;
 }
 if(Math.abs(iSpeedY)<1)
 {
  iSpeedY=0;
 }
 if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
 {
  clearInterval(timer);
  alert(' stop ');
 }
 else
 {
  oDiv.style.left=l+'px';
  oDiv.style.top=t+'px';
 }
 document.title=iSpeedX;
 }, 30);
}

js Elastic Motion Implementation code:

var left=0; // with left Variable storage assignment obj.style.left To prevent the system from omitting decimals each time, resulting in a slight difference in the final result 
var iSpeed=0;
function startMove(obj,iTarget)
{
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  iSpeed+=(iTarget-obj.offsetLeft)/5; // speed 
  iSpeed*=0.7; // Considering resistance 
  left+=iSpeed;
  if(Math.abs(iSpeed)<1&&Math.abs(iTarget-obj.offsetLeft)<1) // Stop condition   The absolute value of velocity and distance is less than 1
  {
   clearInterval(obj.timer);
   obj.style.left=iTarget+"px"; // Once clear, assign the target value to obj.style.left
  } 
  else
  {
   obj.style.left=left+"px";
  }
 },30);
}

For more information on the effects of JavaScript exercise, please see our special topic: Summary of JavaScript Exercise Effects and Techniques.

I hope this article has been helpful in JavaScript programming.