Javascript画布冲突端检测 [英] Javascript canvas collision side detection

问题描述

嘿，我想要得到的两个对象在画布上碰撞的那一面。

其中o1和o2是对象taht有属性：

p>

x - 在X轴上的位置

y - Y轴上的位置

w - 矩形的宽度

h - 矩形的高度

  var collidesWith = function（o2）{
 var o1 = this; 
 if（（o1.y + o1.h）< o2.y）{
 return 0; 
} 
 if（o1.y>（o2.y + o2.h））{
 return 0; 
} 
 if（（o1.x + o1.w）< o2.x）{
 return 0; 
} 
 if（o1.x>（o2.x + o2.w））{
 return 0; 
} 
 return 1; 
}; 
 

EDIT ：这是我为碰撞检测

  if（
（o1.y  -  o1.dy> = o2.y） &&& 
（o1.y  -  o1.dy< = o2.y + o2.h）&& 
（o1.x + o1.w> = o2.x） &&&&b; b（o1.x< = o2.x + o2.w）
）{
 //我们碰撞到顶端
} 
  




解决方案

您需要 double ：

  if（（o1.y> o2.y）&&&< o2.y + o2.h））{
 return'top'; // o1的顶部边框与o2的底部边框相冲突
} 
  

/ p>


Hey i'm trying to get the side with which the two objects in the canvas collide. Here's what i'm using for collision detection, but it only checks for a collision, without a specific side.

Where o1 and o2 are objects taht have properties:

x - position on the X axis
y - position on the Y axis
w - the width of the rectangle
h - the height of the rectangle

var collidesWith = function (o2) {
    var o1 = this;
    if ((o1.y + o1.h) < o2.y) {
        return 0;
    }
    if (o1.y > (o2.y + o2.h)) {
        return 0;
    }
    if ((o1.x + o1.w) < o2.x) {
        return 0;
    }
    if (o1.x > (o2.x + o2.w)) {
        return 0;
    }
    return 1;
};

EDIT: Here's the code i came up for the collision detection on the top of the element:

if (
    (o1.y - o1.dy >= o2.y) &&
    (o1.y - o1.dy <= o2.y + o2.h) &&
    (o1.x + o1.w >= o2.x) &&
    (o1.x <= o2.x + o2.w)
) {
    // We have collision at the top end
}

解决方案

You need double-conditions like this:

if ((o1.y > o2.y) && (o1.y < o2.y + o2.h)) {
  return 'top'; // o1's top border collided with o2's bottom border
}

Similarily for other sides.

这篇关于Javascript画布冲突端检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！