JS实现判断碰撞的方法

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

JS判断碰撞方法：

代码如下:

/** 判断是否碰撞
 * @param obj 原对象
 * @param dobj 目标对象
 */ 
function impact(obj, dobj) { 
    var o = { 
        x: getDefaultStyle(obj, 'left'), 
        y: getDefaultStyle(obj, 'top'), 
        w: getDefaultStyle(obj, 'width'), 
        h: getDefaultStyle(obj, 'height') 
    } 
 
    var d = { 
        x: getDefaultStyle(dobj, 'left'), 
        y: getDefaultStyle(dobj, 'top'), 
        w: getDefaultStyle(dobj, 'width'), 
        h: getDefaultStyle(dobj, 'height') 
    } 
 
    var px, py; 
 
    px = o.x <= d.x ? d.x : o.x; 
    py = o.y <= d.y ? d.y : o.y; 
 
    // 判断点是否都在两个对象中 
    if (px >= o.x && px <= o.x + o.w && py >= o.y && py <= o.y + o.h && px >= d.x && px <= d.x + d.w && py >= d.y && py <= d.y + d.h) { 
        return true; 
    } else { 
        return false; 
    } 
} 
 
/** 获取对象属性
 * @param obj       对象
 * @param attribute 属性
 */ 
function getDefaultStyle(obj, attribute) { 
    return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]); 
}

示例如下：

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
 <head> 
  <title> demo </title> 
  <style type="text/css"> 
  body{margin:0px;} 
    .main{position:relative;} 
    #f1{position:absolute; background:#FF0000; top:100px; left:100px; width:200px; height:200px; z-index:999} 
    #f2{position:absolute; background:#FFFF00; top:0px; left:0px; width:600px; height:150px;} 
  </style> 
 </head> 
 <body> 
 <div class="main"> 
    <div id="f1"></div> 
    <div id="f2"></div> 
 </div> 
 <script type="text/javascript"> 
    var o = document.getElementById("f1"); 
    var d = document.getElementById("f2"); 
    alert(impact(o, d));

function impact(obj, dobj) { 
        var o = { 
            x: getDefaultStyle(obj, 'left'), 
            y: getDefaultStyle(obj, 'top'), 
            w: getDefaultStyle(obj, 'width'), 
            h: getDefaultStyle(obj, 'height') 
        }

var d = { 
            x: getDefaultStyle(dobj, 'left'), 
            y: getDefaultStyle(dobj, 'top'), 
            w: getDefaultStyle(dobj, 'width'), 
            h: getDefaultStyle(dobj, 'height') 
        }

var px, py;

px = o.x <= d.x ? d.x : o.x; 
        py = o.y <= d.y ? d.y : o.y; 
 
        // 判断点是否都在两个对象中 
        if (px >= o.x && px <= o.x + o.w && py >= o.y && py <= o.y + o.h && px >= d.x && px <= d.x + d.w && py >= d.y && py <= d.y + d.h) { 
            return true; 
        } else { 
            return false; 
        } 
    }

function getDefaultStyle(obj, attribute) { 
        return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]); 
    } 
 </script> 
 </body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

    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运动动画的八个知识点

    今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父

  • Javascript实现重力弹跳拖拽运动效果示例

    演示地址: http://www.ihuxu.com/project/gcdmove/ 调用示例: var GCDM = gcdMove(oDiv,100,0); GCDM.startMove();//开始运动 GCDM.stopMove();//结束运动 该段JS代码已经封装好了,代码如下: 简要说明 - obj为要改动的对象元素,通常为某个div:iSpeedX,iSpeedY为div出师的横向(右侧),竖向(下)的初始速度,当然也可以设为零. 复制代码 代码如下: /** * @Desc

  • 使用JavaScript 实现对象 匀速/变速运动的方法

    实例1--控制一个对象的匀速移动和停止 HTML: 复制代码 代码如下: <input id="btn" type="button" value=" Move It ! "/>    <div id="d1">        <img id="i1" src="1.jpg" alt/>    </div> JS:实现向右运动 复制代码 代码

  • Js实现简单的小球运动特效

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body style="background:pink;"

  • JS实现匀速运动的代码实例

    JS实现匀速运动的代码实例

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 100px;            height: 10

  • javascript动画之圆形运动,环绕鼠标运动作小球

    代码如下: 复制代码 代码如下: <script type="text/javascript"> var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 50; function run(){ if(ball === undefined){ ball = document.createElement("span"); ball.style.position = &

  • javascript制作游戏开发碰撞检测的封装代码

    javascript制作游戏开发碰撞检测的封装代码

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

  • 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实现10个球随机运动、碰撞实例详解

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

  • js实现缓冲运动效果的方法

    本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO

  • 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实现碰撞检测特效代码分享

    自己做了碰撞检测的封装,先看下实例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玩转游戏物理(一)运动学模拟与粒子系统

    系列简介 也许,三百年前的艾萨克·牛顿爵士(Sir Issac Newton, 1643-1727)并没幻想过,物理学广泛地应用在今天许多游戏.动画中.为什么在这些应用中要使用物理学?笔者认为,自我们出生以来,一直感受着物理世界的规律,意识到物体在这世界是如何"正常移动",例如射球时球为抛物线(自旋的球可能会做成弧线球) .石子系在一根线的末端会以固定频率摆动等等.要让游戏或动画中的物体有真实感,其移动方式就要符合我们对"正常移动"的预期. 今天的游戏动画应用了多种

随机推荐