JS实现判断碰撞的方法

网络编程 2024/11/17 佚名

3 2 1

本文实例讲述了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 "codetitle">复制代码代码如下:<!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程序设计有所帮助。

JS,判断,碰撞,方法

标签：

JS,判断,碰撞,方法

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JS实现判断碰撞的方法”

JS实现判断碰撞的方法

暂无“JS实现判断碰撞的方法”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2024年11月17日

JS实现判断碰撞的方法

JS,判断,碰撞,方法

45个JavaScript编程注意事项、技巧大全

javascript异步编程代码书写规范Promise学习笔记

评论“JS实现判断碰撞的方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接