其他分享
首页 > 其他分享> > JS 运动的实现

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
      }
    }

标签:node,实现,物体,timer,JS,offsetLeft,var,运动,speed
来源: https://www.cnblogs.com/xiaonian8/p/15149640.html