js达成碰撞检验,JS达成碰撞检查评定的办法剖析

2019-06-01 19:24 来源:未知

本文实例讲述了JS完结碰撞检查评定的章程。分享给我们供大家参谋,具体如下:

JS完结碰撞检查实验的方式深入分析,js完结碰撞检测

本文实例讲述了JS完毕碰撞检查评定的点子。分享给大家供大家参照他事他说加以侦察,具体如下:

多少个简易的碰撞检验例子,检查评定div1是或不是和div2产生相撞,当div一蒙受div二时,改动div2的颜料,看测试图

图片 1

看一下分析图:

图片 2

当div一在div2的上面线(t2)以上的区域活动时,始终碰不上
当div壹在div二的左侧线(r二)以右的区域活动时,始终碰不上
当div一在div二的上面线(b2)以下的区域活动时,始终碰不上
当div1在div贰的右边线(r二)以左的区域活动时,始终碰不上

除了那些之外上述种种意况,别的处境表示div一和div二碰上了,上面试完整测试代码

HTML部分:

<div id="div1"></div>
<div id="div2"></div>

css部分:

<style>
    #div1{
      width:100px ;height: 100px;background: green;
      position: absolute;
    }
    #div2{
      width:100px ;height: 100px;background: yellow;
      position: absolute;left: 300px;top: 200px;z-index: -1;
    }
</style>

JS部分:

<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function (ev) {
      var ev = ev|| window.event;
      disX = ev.clientX - oDiv.offsetLeft;
      disY = ev.clientY - oDiv.offsetTop;
      document.onmousemove = function (ev) {
        var ev = ev|| window.event;
        var t1 = oDiv.offsetTop;
        var l1 = oDiv.offsetLeft;
        var r1 = oDiv.offsetLeft   oDiv.offsetWidth;
        var b1 = oDiv.offsetTop   oDiv.offsetHeight;
        var t2 = oDiv2.offsetTop;
        var l2 = oDiv2.offsetLeft;
        var r2 = oDiv2.offsetLeft   oDiv2.offsetWidth;
        var b2 = oDiv2.offsetTop   oDiv2.offsetHeight;
        if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
        }else{
          oDiv2.style.background = 'blue';
        }
        oDiv.style.left = ev.clientX - disX  'px';
        oDiv.style.top = ev.clientY - disY  'px';
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false;
    }
  }
</script>

更加多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动作用与手艺汇总》、《JavaScript切换特效与技艺总计》、《JavaScript查找算法技艺计算》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调整本领计算》、《JavaScript数据结构与算法才干总结》、《JavaScript遍历算法与本事总括》及《JavaScript数学生运动算用法计算》

企望本文所述对大家JavaScript程序设计有所帮助。

本文实例讲述了JS完毕碰撞检查评定的不二等秘书籍。分享给大家供大家参照他事他说加以调查,具体如下: 3个轻松的碰撞...

正文实例深入分析了JS碰撞运动达成方式。分享给我们供大家参谋,具体如下:

一个简约的碰撞检验例子,检验div1是或不是和div二发生撞击,当div1遭逢div贰时,改换div二的颜色,看测试图

叙述:撞到对象点弹回来(速度反转)

图片 3

一、无重力的漂浮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; //超出下边界时,把它拉回到下边界,不然右边滚动条会闪动出现一下
  }
  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);

图片 4

二、碰撞 重力

当div一在div二的下面线(t2)以上的区域活动时,始终碰不上
当div一在div2的左侧线(r二)以右的区域活动时,始终碰不上
当div一在div二的上面线(b二)以下的区域活动时,始终碰不上
当div一在div2的右边线(r二)以左的区域活动时,始终碰不上

所谓重力正是Y轴的快慢持续加码

除开以上各样情形,其余意况表示div1和div二碰上了,下边试完整测试代码

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){ //解决小数的问题,因为假如速度是小数,正的没问题,100(iSpeed=0.5)-->100.5-->100,负的100(iSpeed=-0.5)--->99.5-->99,可能会出现x轴反向时滑行
    iSpeedX=0;
  }
  if(Math.abs(iSpeedY)<1){
    iSpeedY=0;
  }
  div1.style.left=l 'px';
  div1.style.top=t 'px';
},30);

HTML部分:

三、碰撞 重力 拖拽

<div id="div1"></div>
<div id="div2"></div>
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; //拖拽结束时的速度
      iSpeedY=t-lastY;
      lastX=l; //更新上一个点的位置
      lastY=t;
    };
    document.onmouseup=function ()
    {
      document.onmousemove=null;
      document.onmouseup=null;
      startMove(); //拖拽结束时执行
    };
    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);
}

css部分:

更加的多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript运动作用与本领汇总》、《JavaScript切换特效与技能计算》、《JavaScript查找算法技术总计》、《JavaScript动画特效与手艺汇总》、《JavaScript错误与调治技术总括》、《JavaScript数据结构与算法技术计算》、《JavaScript遍历算法与手艺总括》及《JavaScript数学生运动算用法计算》

<style>
    #div1{
      width:100px ;height: 100px;background: green;
      position: absolute;
    }
    #div2{
      width:100px ;height: 100px;background: yellow;
      position: absolute;left: 300px;top: 200px;z-index: -1;
    }
</style>

期待本文所述对大家JavaScript程序设计具备扶助。

JS部分:

你或许感兴趣的文章:

  • JS实现碰撞检查评定的主意解析
  • js实现碰撞测验特效代码分享
  • javascript制作游戏支付碰撞检查评定的包装代码
  • JS达成推断碰撞的法子
  • JavaScript拖拽、碰撞、重力及弹性运动实例深入分析
  • JS完结小球的弹性碰撞效果
  • JS CSS达成带有碰撞缓冲效果的竖向导航条代码
  • 原生JS完成八个小球碰撞反弹效果示例
  • JS实现轻松的扭转碰撞效果示例
  • 原生JS完结的碰撞检测功能示例
<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function (ev) {
      var ev = ev|| window.event;
      disX = ev.clientX - oDiv.offsetLeft;
      disY = ev.clientY - oDiv.offsetTop;
      document.onmousemove = function (ev) {
        var ev = ev|| window.event;
        var t1 = oDiv.offsetTop;
        var l1 = oDiv.offsetLeft;
        var r1 = oDiv.offsetLeft   oDiv.offsetWidth;
        var b1 = oDiv.offsetTop   oDiv.offsetHeight;
        var t2 = oDiv2.offsetTop;
        var l2 = oDiv2.offsetLeft;
        var r2 = oDiv2.offsetLeft   oDiv2.offsetWidth;
        var b2 = oDiv2.offsetTop   oDiv2.offsetHeight;
        if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
        }else{
          oDiv2.style.background = 'blue';
        }
        oDiv.style.left = ev.clientX - disX  'px';
        oDiv.style.top = ev.clientY - disY  'px';
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false;
    }
  }
</script>

越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript运动作效果能与技巧汇总》、《JavaScript切换特效与才具总计》、《JavaScript查找算法本事计算》、《JavaScript动画特效与本领汇总》、《JavaScript错误与调治本事总计》、《JavaScript数据结构与算法工夫总计》、《JavaScript遍历算法与工夫总结》及《JavaScript数学生运动算用法总计》

梦想本文所述对大家JavaScript程序设计有着扶助。

您大概感兴趣的稿子:

  • js达成碰撞检查实验特效代码分享
  • javascript制作游戏支付碰撞检查实验的包裹代码
  • JS完成判定碰撞的章程
  • JavaScript拖拽、碰撞、重力及弹性运动实例剖判
  • JS碰撞运动落成格局详解
  • JS完成小球的弹性碰撞效果
  • JS CSS完毕带有碰撞缓冲效果的竖向导航条代码
  • 原生JS实现三个小球碰撞反弹效果示例
  • JS完成简单的变迁碰撞效果示例
  • 原生JS完成的碰撞检验作用示例
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:js达成碰撞检验,JS达成碰撞检查评定的办法剖析