JS实现碰撞检测的方法分析

2024-09-27 22:48:38

本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考，具体如下：

一个简单的碰撞检测例子，检测div1是否和div2发生碰撞，当div1碰到div2时，改变div2的颜色，看测试图

看一下分析图：

当div1在div2的上边线(t2)以上的区域活动时，始终碰不上
当div1在div2的右边线(r2)以右的区域活动时,始终碰不上
当div1在div2的下边线(b2)以下的区域活动时,始终碰不上
当div1在div2的左边线(r2)以左的区域活动时,始终碰不上

除了以上四种情况，其他情况表示div1和div2碰上了，下面试完整测试代码

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程序设计有所帮助。

您可能感兴趣的文章:

javascript制作游戏开发碰撞检测的封装代码
js实现碰撞检测特效代码分享
JS实现判断碰撞的方法
javascript实现10个球随机运动、碰撞实例详解
JavaScript拖拽、碰撞、重力及弹性运动实例分析
JS碰撞运动实现方法详解
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
JS实现小球的弹性碰撞效果
JS实现简单的浮动碰撞效果示例

js实现碰撞检测特效代码分享

自己做了碰撞检测的封装,先看下实例demo,在看封装 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>碰撞检测</title> <style type="text/css"> *{ margin: 0; padding: 0; } #divA,#divB{ width: 200px; height: 200px;
JavaScript拖拽、碰撞、重力及弹性运动实例分析

本文实例讲述了JavaScript拖拽.碰撞.重力及弹性运动实现方法.分享给大家供大家参考,具体如下: js拖拽.碰撞与重力实现代码: 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.of
javascript制作游戏开发碰撞检测的封装代码

在JavaScript开发Web游戏时,需要使用到碰撞检测时,为了方便开发,封装了矩形和圆形的两个碰撞检测方式. [附带案例操作捕获一枚] [注意:代码上未做优化处理] 演示图角色攻击区域碰撞检测.gif 塔防案例.gif 矩形区域碰撞检测 /** * 矩形区域碰撞检测 * Created by Administrator on 14-4-7. * author: marker */ function Rectangle(x, y, _width, _height){ this.x = x;
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码.分享给大家供大家参考.具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢.所用技术是JS和CSS. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
JS实现小球的弹性碰撞效果

一.HTML代码(body部分) <body>  <div id="main"> <div></div> <div></div> <div></div> <div></div> <div></div> <di
javascript实现10个球随机运动、碰撞实例详解

本文实例讲述了javascript实现10个球随机运动.碰撞的方法.分享给大家供大家参考.具体如下: 学了一段时间的javascript了,做过一些小案例,目前最有难度的就是10个小球随机碰撞效果,这不,把它上上来与大家分享一下,相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑,希望它能给一些人带来帮助. 效果要求:10个小球在页面随机移动,碰到窗口边界或其他小球都会反弹思路: 1.10个小球是10个div; 2.碰窗口反弹,定义vx vy为小球的移动变量,以及一个弹力变量bounce(
JS实现判断碰撞的方法

本文实例讲述了JS实现判断碰撞的方法.分享给大家供大家参考.具体如下: JS判断碰撞方法: 复制代码代码如下: /** 判断是否碰撞 * @param obj 原对象 * @param dobj 目标对象 */ function impact(obj, dobj) { var o = { x: getDefaultStyle(obj, 'left'), y: getDefaultStyle(obj, 'top'), w:
JS碰撞运动实现方法详解

本文实例分析了JS碰撞运动实现方法.分享给大家供大家参考,具体如下: 描述:撞到目标点弹回来(速度反转) 一.无重力的漂浮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.docum
JS实现简单的浮动碰撞效果示例

本文实例讲述了JS实现简单的浮动碰撞效果.分享给大家供大家参考,具体如下: <html> <head> <meta charset="UTF-8"> <title>www.jb51.net JS碰撞效果</title> <script language="javascript"> <!-- directX=1; //X轴方向 directY=1; //Y轴方向 sunX=0; sunY=0
JS实现碰撞检测的方法分析

本文实例讲述了JS实现碰撞检测的方法.分享给大家供大家参考,具体如下: 一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色,看测试图看一下分析图: 当div1在div2的上边线(t2)以上的区域活动时,始终碰不上当div1在div2的右边线(r2)以右的区域活动时,始终碰不上当div1在div2的下边线(b2)以下的区域活动时,始终碰不上当div1在div2的左边线(r2)以左的区域活动时,始终碰不上除了以上四种情况,其他情况表示d
JS弹性运动实现方法分析

本文实例分析了JS弹性运动实现方法.分享给大家供大家参考,具体如下: 描述:像弹簧一样左右弹动,最后缓慢停下来一.加减速运动 1.加速运动 var iSpeed=0; iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20; iSpeed--; 速度越来越慢,降到0后开始变负值往反方向运动二.弹性运动 1.在目标点左边,加速:目标点右边,减速,如 if(div1.offsetLeft<300){ iSpeed=iSpeed+1; //等同iSpeed++; }
JS实现Ajax的方法分析

本文实例分析了JS实现Ajax的方法.分享给大家供大家参考,具体如下: 一.什么是Ajax 不刷新的情况下读取数据或提交数据 (最早出现ajax:谷歌地图,拖动一下出现一片新的视野) 应用:用户注册.在线聊天.微博特性:只能从服务器上去读取数据(所以我们需要配置自己的服务器程序AMP) 二.使用Ajax 1.基础:请求并显示静态TXT文件 btn.onclick=function(){ ajax('abc.txt',function(str){ alert(str); }); } ①Ajax里
python飞机大战pygame碰撞检测实现方法分析

本文实例讲述了python飞机大战pygame碰撞检测实现方法.分享给大家供大家参考,具体如下: 目标了解碰撞检测方法碰撞实现 01. 了解碰撞检测方法 pygame 提供了两个非常方便的方法可以实现碰撞检测: pygame.sprite.groupcollide() 两个精灵组中所有的精灵的碰撞检测 groupcollide(group1, group2, dokill1, dokill2, collided = None) -> Sprite_dict 如果将 dokill 设
js抽奖转盘实现方法分析

本文实例讲述了js抽奖转盘实现方法.分享给大家供大家参考,具体如下: HTML 这里.left 固定了圆的宽度和高度,还有canvas也设置了固定宽高绘制圆心的坐标也就出来了 (203,203) 抽奖转盘是由一个大圆和一个内圆完成 :大圆负责绘制上奖品 ,内圆负责确定指针的位置,指针直接使用图片,决定位置确定 <div class="left"> <div class="turnplate" style="background:#1b
JavaScript实现重力下落与弹性效果的方法分析

本文实例讲述了JavaScript实现重力下落与弹性效果的方法.分享给大家供大家参考,具体如下: 这里利用JS语言在Html页面中实现重力作用下落地后弹起的效果,如下所示: 在此例中主要涉及以下几个问题: 1.给球体一个释放初速度,如何实现越向下运动且在接触边缘之前,竖直方向上的速度speedY越大的效果? 答案:可以在计时器中,每及时一次,竖直方向上的速度speedY自增一个固定值来实现,下面代码中speedY += 6;就是实现这个效果. 2.球体接触地面(此例中指浏览器下边缘)后,如何实现
js中数组排序sort方法的原理分析

本文实例分析了js中数组排序sort方法的原理.分享给大家供大家参考.具体分析如下: 最近在百度的项目中要用到对数组进行排序,当然一开始自然想到了数组的sort方法,这方法应用非常简单,大致如下: 复制代码代码如下: window.onload=function(){ var arr=[2,55,55,1,75,3,9,35,70,166,432,678,32,98]; var arr2=["George","John","
JS瀑布流实现方法实例分析

本文实例分析了JS瀑布流实现方法.分享给大家供大家参考,具体如下: 描述: 1.每个图片宽度都一样,高度不一样思路: 1.算出一共有几列(通过视窗总宽度/单个图片宽度得出) 2.根据一共几列*单个图片宽度,设置外围总宽度并水平居中(注:这个宽度应该是计算出来的,而不是定死,因为窗口大小会改变) 3.将第一行图片高度按顺序填充进数组 4.算出第一行图片里高度最短的那个,将第二行的第一张图片添加到其后(绝对定位),添加完第二行第一张,更新他的高度,然后重新计算最短,再开始之前的过程 5.鼠标在滑动
JS运动改变单物体透明度的方法分析

本文实例讲述了JS运动改变单物体透明度的方法.分享给大家供大家参考,具体如下: 除了通过改变物体的宽,高,letf,top位置或者是运动方向来实现物体运动效果之外,改变物体的透明度,也是运动特效 <script> window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmousemove = function () { startMove(100); } oDiv.onmouseout
JS运动特效之任意值添加运动的方法分析

本文实例讲述了JS运动特效之任意值添加运动的方法.分享给大家供大家参考,具体如下: 回顾一下上个例子JS实现多物体运动的方法: <script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[i].onmouseov

JS实现碰撞检测的方法分析

您可能感兴趣的文章:

相关推荐

随机推荐