快捷導(dǎo)航

JS碰撞運(yùn)動實(shí)現(xiàn)方法詳解

更新時間：2016年12月15日 14:25:34 作者：鬼畜十三

這篇文章主要介紹了JS碰撞運(yùn)動實(shí)現(xiàn)方法,詳細(xì)分析了碰撞運(yùn)動的原理及相應(yīng)的javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例分析了JS碰撞運(yùn)動實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

描述：撞到目標(biāo)點(diǎn)彈回來（速度反轉(zhuǎn)）

一、無重力的漂浮div

var div1=document.getElementById("div1");
var iSpeedX=6;
var iSpeedY=8;
setInterval(function(){
  var l=div1.offsetLeft+iSpeedX;
  var t=div1.offsetTop+iSpeedY;
  if(t>=document.documentElement.clientHeight-div1.offsetHeight){
    iSpeedY*=-1; //速度反向
    t=document.documentElement.clientHeight-div1.offsetHeight; //超出下邊界時，把它拉回到下邊界，不然右邊滾動條會閃動出現(xiàn)一下
  }
  else if(t<=0){
    iSpeedY*=-1;
    t=0;
  }
  if(l>=document.documentElement.clientWidth-div1.offsetWidth){
    iSpeedX*=-1;
    l=document.documentElement.clientWidth-div1.offsetWidthl;
  }
  else if(l<=0){
    iSpeedX*=-1;
    l=0;
  }
  div1.style.left=l+'px';
  div1.style.top=t+'px';
},30);

二、碰撞+重力

所謂重力就是Y軸的速度不斷增加

setInterval(function(){
  iSpeedY+=3;
  var l=div1.offsetLeft+iSpeedX;
  var t=div1.offsetTop+iSpeedY;
  if(t>=document.documentElement.clientHeight-div1.offsetHeight){
    iSpeedY*=-0.8;
    iSpeedX*=0.8; //橫向速度也要變慢，否則碰到地面時會停不下來
    t=document.documentElement.clientHeight-div1.offsetHeight;
  }
  else if(t<=0){
    iSpeedY*=-1;
    iSpeedX*=0.8;
    t=0;
  }
  if(l>=document.documentElement.clientWidth-div1.offsetWidth){
    iSpeedX*=-0.8;
    l=document.documentElement.clientWidth-div1.offsetWidthl;
  }
  else if(l<=0){
    iSpeedX*=-0.8;
    l=0;
  }
  if(Math.abs(iSpeedX)<1){ //解決小數(shù)的問題，因?yàn)榧偃缢俣仁切?shù)，正的沒問題，100(iSpeed=0.5)-->100.5-->100，負(fù)的100(iSpeed=-0.5)--->99.5-->99，可能會出現(xiàn)x軸反向時滑行
    iSpeedX=0;
  }
  if(Math.abs(iSpeedY)<1){
    iSpeedY=0;
  }
  div1.style.left=l+'px';
  div1.style.top=t+'px';
},30);

三、碰撞+重力+拖拽

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; //拖拽結(jié)束時的速度
      iSpeedY=t-lastY;
      lastX=l; //更新上一個點(diǎn)的位置
      lastY=t;
    };
    document.onmouseup=function ()
    {
      document.onmousemove=null;
      document.onmouseup=null;
      startMove(); //拖拽結(jié)束時執(zhí)行
    };
    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);
    }
    else
    {
      oDiv.style.left=l+'px';
      oDiv.style.top=t+'px';
    }
    document.title=iSpeedX;
  }, 30);
}

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: