V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
puny
V2EX  ›  JavaScript

关于 js 碰撞检测坐标的计算

  •  
  •   puny · 2016-03-25 23:02:39 +08:00 · 4543 次点击
    这是一个创建于 2925 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在做一个 js 小游戏,就是两条移动的点组成的的两条线段,随着点的移动,线条会越来越长,请问一下改如何判断两条线段会碰撞呢。

    我自己想到的是,为了让计算简单,我控制点只能上下左右移动,将地图分成若干个小方块,点始终在方块的中心,每移动一下就是占领一个小方块,依据小方块的熟悉来计算是否碰撞。

    Alt text

    不知道是否有更好的计算方式,或者是,关于曲线运动的算法呢。

    13 条回复    2016-03-27 00:00:21 +08:00
    Maic
        1
    Maic  
       2016-03-25 23:43:48 +08:00
    没看懂你说的什么意思。
    具体的碰撞检测,你可以在一个 JSON 里面,给每个方块一个编号,值为 0 的时候,为空,为 1 的时候是第一条线占领了,为 2 的时候,是第二条线占领了。
    每次运动完毕之后或者运动之前根据已有值进行判断。
    具体是以前还是之后,就看你的需求了。
    Maic
        2
    Maic  
       2016-03-25 23:44:29 +08:00
    这么简单是因为你的线每次都占一个格子,如果不是一个格子,是一个圆,就又稍微麻烦点。
    puny
        3
    puny  
    OP
       2016-03-25 23:51:31 +08:00
    @Maic 我的意思就是这样,因为我是只能想到这样的计算方法,所以才让线每次占一个格子,我想知道线如果就是正常运动呢,或者是曲线的运动,该如何计算呢
    puny
        4
    puny  
    OP
       2016-03-25 23:53:17 +08:00
    。。。。发现我打错字了,是‘属性’,不是熟悉。。。。
    spance
        5
    spance  
       2016-03-26 00:13:26 +08:00
    有点像贪吃蛇,但又不太一样。
    先描述一个通用方法,但不一定是最优的:
    先对线段做个轮廓,首先运动以 1x 坐标系,下来是计算要以 4x 坐标系。
    1 、快速边界排除,以 2 个轮廓的四条边做比较,可以快速排除完全不想交的情况。
    2 、快速排除为假后,考虑这个还可能不是凸多边形,那么做 xy2 个方向的投影,然后判断重叠区间,没有重叠自然不相交,如果有重叠,对 2 个图形上的重叠坐标部分做另外一个方向的投影,找重叠区间,证明是否的确相交。
    emric
        6
    emric  
       2016-03-26 00:14:10 +08:00   ❤️ 1
    emric
        7
    emric  
       2016-03-26 00:16:32 +08:00
    写小游戏用框架,一个触碰事件就搞定了。
    xupefei
        8
    xupefei  
       2016-03-26 00:26:20 +08:00
    这不就是从两点求直线方程,然后判断直线斜率是否相等么?
    xupefei
        9
    xupefei  
       2016-03-26 00:32:55 +08:00
    @xupefei 又看了看, LZ 你应该把 “两条线段” 改成 “两条轨迹”。线段指的是直线。
    1 楼的办法很标准,就是弄个数组把走过的点标记上就行了。
    Bomok
        10
    Bomok  
       2016-03-26 01:11:17 +08:00
    额……数组……
    其实不懂,看了一楼的解释后,想到了个办法。就是先初始化两个数组,数组中分别存放一份相同的存储地图的坐标信息。然后给两根“线段”分别分配一个数组,线段每移动一次,就把对应坐标数组的相应下标赋值,然后两个数组求交集。如果有交集,那么就发生了重合。不知道说得对不对,菜鸟一枚,还请多多提点, O(∩_∩)O 谢谢
    yzl0208994
        11
    yzl0208994  
       2016-03-26 08:27:17 +08:00
    想到有一个办法,每个 Object 都有一个数组表示它在屏幕中的位置,每一位代表一个点。有计算好当前位置后,对两个数组进行与操作,如果有不为 0 的就是相碰了
    puny
        12
    puny  
    OP
       2016-03-26 13:32:30 +08:00
    @yzl0208994
    @Bomok
    我一开始有这么想过,但是实际操作的时候,为了。。。好看,我并不是每次走一格,利用了动画, 1 秒 60 帧,每帧动画,运动 1px 像素,这样轨迹运动更加流畅。然后我每隔固定的帧数,判断一下轨迹所在的格子。如果光靠坐标的数组交集来判断,精度可能会不准确,估计会有问题,而格子的话,我只需要判断一个大概的范围,就知道坐标位于哪一个格子的中心。
    tyrealgray
        13
    tyrealgray  
       2016-03-27 00:00:21 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2871 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 11:18 · PVG 19:18 · LAX 04:18 · JFK 07:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.