JS 运动的实现

初识运动

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.houdianzi.com/ logo设计公司

拖拽

要想元素被鼠标拖拽 ，

首先我们要获取到这个物体的鼠标在物体的坐标位置 = （鼠标的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
      }
    }