Проверьте точку попадания повернутого прямоугольника с помощью прямоугольника фиксированной формы в HTML5 + Javascript и Canvas

Question

Проверьте точку попадания повернутого прямоугольника с помощью прямоугольника фиксированной формы в HTML5 + Javascript и Canvas

Привет, я делаю автомобильную игру, в которой рисую прямоугольник в форме машины следующим образом. xP и yP динамически происходят из события клавиатуры в JavaScript, как и вращение.

ctxDrift.clearRect(0, 0, 426, 754);
ctxDrift.save();
ctxDrift.beginPath();
ctxDrift.translate(xP-car.getWidth()/2, yP-car.getHeight()/2);
ctxDrift.rotate((Math.PI / 180) * car.getRotation());
ctxDrift.translate(-xP, -yP);
ctxDrift.rect(xP-car.getWidth()/2, yP-car.getHeight()/2, car.getWidth(), car.getHeight());
ctxDrift.fillStyle = 'yellow';
ctxDrift.fill();
ctxDrift.restore();

Теперь есть несколько препятствий, имеющих форму прямоугольника, которые не вращаются. Теперь, как я мог проверить попадание между этими двумя объектами. Или сказать, как проверить, лежит ли точка прямоугольника внутри другого прямоугольника, если повернуть?

0

html5-canvas rotation rectangles hit

Источник

user1613901 20 фев '13 в 15:21

4 ответа

Другие вопросы по тегам html5-canvas rotation rectangles hit

user411591 21 фев '13 в 01:10 2013-02-21 01:10 · Answer 1 · 2013-02-21 01:10

Даже до того, как вы приступите к тестированию столкновений: Canvas не отслеживает, где находятся ваши объекты на холсте. Вы должны вручную отслеживать накопленные.translate() и.rotate(), выполненные пользователем. Вы делаете это, фиксируя изменения матрицы преобразования для каждого события клавиатуры пользователя. Затем вы накапливаете преобразования в одну окончательную матрицу преобразования, которую вы можете использовать, чтобы начать тестирование попаданий.

Оттуда математика по тестированию столкновений быстро усложняется!

Ваш самый простой тест на столкновение состоит в том, чтобы просто окружить каждый прямоугольник окружностью, а затем вычислить, находятся ли центральные точки окружности в пределах суммы двух радиусов окружности. Код выглядит так:

function CirclesCollide(x1,y1,radius1,x2,y2,radius2){
    return ( Math.sqrt( ( x2-x1 ) * ( x2-x1 )  + ( y2-y1 ) * ( y2-y1 ) ) < ( radius1 + radius2 ) );
}

Если вы хотите провести более качественное тестирование на столкновение и хотите пройти много математических тестов, вот хороший источник 3 тестов на столкновение: http://www.sfml-dev.org/wiki/en/sources/simple_collision_detection

Возможно, лучшее решение - использовать библиотеку Canvas, такую как FabricJs, которая отслеживает, где находятся ваши объекты на холсте, и предоставляет для вас тестирование попаданий. Легко как это!

var theyAreColliding = myCar.intersectsWithObject(myObstical);

user577306 20 фев '13 в 21:55 2013-02-20 21:55 · Answer 2 · 2013-02-20 21:55

Самый простой способ - повернуть прямоугольники, ограничивающие прямоугольники, чтобы они по существу больше не вращались, прежде чем выполнять проверку столкновения. Затем поверните их назад, прежде чем изображение будет нарисовано.

Более того, используйте ограничивающий прямоугольник, который не вращается, который можно использовать для тестирования в широкой фазе (быстрая и дешевая проверка, чтобы узнать, нужно ли тогда выполнять проверку в узкой фазе).

Это называется ограничивающим прямоугольником с выравниванием по оси или AABB для краткости. Это значительно упрощает ваш код обнаружения столкновений.

обновление: нашел эту ссылку, которая может быть полезной.