初識運動

1.停不下來 給定時器新增timer 來判斷是否需要停止

2.到目的地，還能點選移動，把移動的程式碼放入else中

3.重複點選按鈕會加速運動 是因為點一次就會啟動一次定時器，多次就會啟動多次

保證只有一個定時器在啟動，啟動一次就關閉上一次啟動定時器

運動框架:

? 1 啟動就關閉定時器
? 2 if else

var odiv = document.getElementById(‘div1‘)
      var speed = 5;
      var timer = null;
      oBtn.onclick = function () {
        clearInterval(timer)

        timer = setInterval(() => {

          if (oDiv.offsetLeft >= 500) {
            clearInterval(timer)
          } else {
            oDiv.style.left = oDiv.offsetLeft + speed + ‘px‘
          }
        }, 30);
 

緩衝運動

1，首先給物體定義一個速度，速度是物體與XY軸的距離除以8，在定時器以30mm，

2,如果物體到了，判斷物體的座標是否達到終點

3,如果是正向運動，速度大於0，因為計算機解析畫素點不能為小數，所以要向上取整，才能判斷物體是否達到終點，反之向下去整

function startMove(iTarget){
      var oDiv1 =document.getElementById(‘div1‘)
      clearInterval(timer)
      timer = setInterval(()=>{
        //速度和距離公式 因為speed會有小數，計算機只能識別1px，所以需要給speed向上取整
        var speed = Math.ceil((iTarget -oDiv1.offsetLeft)/10)
        if(oDiv1.offsetLeft == iTarget){
          clearInterval(timer)
        }else{
          oDiv1.style.left =oDiv1.offsetLeft + speed +‘px‘
        }
      }, 30);
    }
 

多物體運動

因為有多個物體，timer只能控制一個定時器，所以傳入兩個引數，分別控制自身的定時器，

    // var timer= null ;
function startMove(node , iTarget){
      clearInterval(node.timer)
      node.timer= setInterval(()=>{
        var speed = (iTarget - node.offsetWidth) /8
        console.log(iTarget);
        speed= speed>0 ? Math.ceil(speed) : Math.floor(speed)

        if(node.offsetWidth == iTarget){
          clearInterval(node.timer)
        }else{
          node.style.width = node.offsetWidth + speed +‘px‘;
        }
      },30)
    }
 

碰撞

1.首先 兩個物體是否碰撞 我們要根據一個物體四個角是否碰到另一個物體的四個角， 所以我們判斷：永遠不碰到，要求是 2上碰不到1下，2下碰不到1上，2左碰不到1右，2右碰不到1左

 //碰撞
    function konck(node1, node2) {
      //獲取第一個元素上下左右的XY座標
      var l1 = node1.offsetLeft
      // console.log(dl);
      var r1 = node1.offsetLeft + node1.offsetWidth
      var t1 = node1.offsetTop
      var d1 = node1.offsetTop + node1.offsetHeight

      //獲取第二個元素上下左右的XY座標
      var l2 = node2.offsetLeft
      var r2 = node2.offsetLeft + node1.offsetWidth
      var t2 = node2.offsetTop
      var d2 = node2.offsetTop + node1.offsetHeight

      //判斷第二個元素是否會永遠不碰到，要求是 2上碰不到1下，2下碰不到1上，2左碰不到1右，2右碰不到1左
      if (l2>r1 || r2 <l1 || t2>d1 || d2<t1 ) {
        return false
      } else {
        return true
      }
    }

https://www.51220.cn 51220網站目錄;

拖拽

要想元素被滑鼠拖拽 ，

首先我們要獲取到這個物體的滑鼠在物體的座標位置 = （滑鼠的XY軸的座標 - 物體與XY軸的座標）

然後定義滑鼠事件，滑鼠移動的時候，物體是絕對定位，改變物體left和top 就是滑鼠的座標位置減去滑鼠在物體內部座標的位置

 //拖拽
    function trap(node) {
      node.onmousedown = function (ev) {
        //獲取滑鼠在物體內部的座標位置
        var offsetX = ev.clientX -node.offsetLeft
        var offsetY = ev.clientY - node.offsetTop
        document.onmousemove = function (ev) {
          //判斷碰撞
          if (konck(div1, div2)) {
            console.log(‘konck‘);
            div1.style.backgroundColor = ‘black‘
            
          } else {
            div1.style.backgroundColor = ‘red‘

          }
          //滑鼠位置減去滑鼠在物體內部的位置
          node.style.left = ev.clientX - offsetX + ‘px‘
          node.style.top = ev.clientY - offsetY  + ‘px‘
        }
      }
      //移除滑鼠，取消onmousemove事件
      document.onmouseup = function () {
        document.onmousemove = null
      }
    }