Альтернатива DOMRect в старых браузерах
Я учу парня JS, и мы пишем игру. Для обнаружения столкновений мы используем объекты DOMRect. Каждый из двух объектов дает нам свой прямоугольник следующим образом:
get_rect(){
return new DOMRect (this.x, this.y, this.width, this.height);
}
В основном файле у нас есть функция для проверки коллизии:
function rects_intersect(rect_a, rect_b) {
return (rect_a.left <= rect_b.right &&
rect_b.left <= rect_a.right &&
rect_a.top <= rect_b.bottom &&
rect_b.top <= rect_a.bottom);
}
В game_loop каждый кадр мы вызываем так:
if (rects_intersect(player.get_rect(), enemy.get_rect()) == true){
alert('collision')
}
На моей машине код работает нормально. На моей студенческой машине это не работает. Браузер говорит: «DOMRect is undefined» в строке, которая имеет:
return new DOMRect(this.x, this.y, this.img.width, this.img.height);
У моего ученика очень старый ПК с Win XP на борту. Его Chrome — 49.0.2623.112. Он говорит, что больше не может обновляться на XP.
Можете ли вы предложить:
- либо альтернатива DOMRect, которая работает в более ранних браузерах
- или полная замена DOMRect с сохранением логики нашего приложения
Если я правильно понимаю, то getBoundingClientRect может вернуть только позицию и размер стандартного HTML-объекта, тогда как в нашей игре мы создаем свои объекты с нуля
Исправьте, так что если у вас уже есть это, то вычисление нижнего или правого края слева + ширина и верх + высота на самом деле ничего не значит, кроме того, что я что-то упустил
Цель состоит в том, чтобы сделать функцию rects_intersect() универсальной. Он должен принимать два прямоугольника в качестве аргументов и возвращать true/false. Если эта функция зависит от фактической реализации объектов, для которых она должна проверять коллизии, она больше не будет универсальной, и мы не сможем просто скопировать ее из одного проекта в другой.
Было бы полезно, если бы вы представили свой код в его контексте, возможно, в классе?
Я думаю, что самым дешевым и быстрым решением для меня было бы создать свой собственный класс Rect для хранения x, y, ширины и высоты.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете добавить полифилл в свой код, который сработает только в том случае, если DOMRect еще не определен:
var DOMRect = DOMRect || function (x, y, width, height) {
this.x = this.left = x;
this.y = this.top = y;
this.width = width;
this.height = height;
this.bottom = y + height;
this.right = x + width;
};
Конечно, у вас не должно быть кода, который изменяет какие-либо атрибуты. Если это так, вы должны создать геттеры и сеттеры для этих свойств, чтобы остальные синхронизировались.
Не могли бы вы показать, как создать экземпляр этого класса сейчас? Ранее я использовал: new DOMRect(..., ..., ..., ...);
Он должен быть прозрачным. Вам не нужно трогать какой-либо из вашего существующего кода.
как насчет getBoundingClientRect..?