ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

JS 运动的实现

2021-08-16 20:04:35  阅读:179  来源: 互联网

标签:node 实现 物体 timer JS offsetLeft var 运动 speed


初识运动

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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有