旧浏览器中 DOMRect 的替代品

如何解决旧浏览器中 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.img.width,this.img.height);

我的学生有一台装有 Win XP 的旧电脑。他的 Chrome 是 49.0.2623.112。他说他不能再更新 XP 了。

你能提出建议吗：

1. 适用于早期浏览器的 Domrect 替代方案
2. 或者完全替代 Domrect，同时保留我们应用程序的逻辑

解决方法

您可以向代码中添加一个 polyfill，它仅在 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;
};

您当然不应该拥有修改任何属性的代码。如果是这种情况，您应该为这些属性创建 getter 和 setter，以便其他属性保持同步。