1

我正在编写一个类项目（我们必须使用 HTML5 画布构建一个 Frogger 游戏），并且我有一堆对象可以帮助我完成不同的事情，例如碰撞检测、运动等。

下面的对象就是其中之一。每个视图都包含一个 Frame 对象，该对象包含一个函数调用 hitTest，该函数调用检查其帧是否与传入的帧发生冲突。出于某种原因，this.lr保留了它在游戏开始时最初设置的值，我无法弄清楚为什么它没有根据不断变化的原点进行更新。

function Frame(origin, size) {
    this.origin = utility.checkPoint(origin);
    this.size = utility.checkSize(size);
    var self = this;

    this.lr = (function () {
        return utility.checkPoint(new Point(self.origin.x + self.size.width, self.origin.y + self.size.height));
    }());

    this.tr = (function () {
        return utility.checkPoint(new Point(self.origin.x + self.size.width, self.origin.y));
    }());

    this.ll = (function () {
        return utility.checkPoint(new Point(self.origin.x, self.origin.y + self.size.height));
    }());

    /* Returns true if the two frames share any common pixels */

    this.hitTest = function (frame) {
        var isInXBounds = function (p) {
            return (p.x >= self.origin.x && p.x <= self.tr.x);
        };

        var isInYBounds = function (p) {
            return (p.y >= self.origin.y && p.y <= self.lr.y);
        };

        var isContained = function (p) {
            return (isInXBounds(p) && isInYBounds(p));
        };

        return isContained(frame.origin) || isContained(frame.tr) || isContained(frame.lr) || isContained(frame.ll);
    };
}
4

2 回答 2

2

这就是我写你的Frame课的方式：

Frame.prototype.lr = function () {
    var x = this.origin.x + this.size.width;
    var y = this.origin.y + this.size.height;
    return utility.checkPoint(new Point(x, y));
};

Frame.prototype.tr = function () {
    var x = this.origin.x + this.size.width;
    return utility.checkPoint(new Point(x, this.origin.y));
};

Frame.prototype.ll = function () {
    var y = this.origin.y + this.size.height;
    return utility.checkPoint(new Point(this.origin.x, y));
};

Frame.prototype.isContained = function (point) {
    var isInXBounds = point.x >= this.origin.x && point.x <= this.tr().x;
    var isInYBounds = point.y >= this.origin.y && point.y <= this.lr().y;
    return isInXBounds && isInYBounds;
};

Frame.prototype.hitTest = function (frame) {
    return this.isContained(frame.origin) || this.isContained(frame.tr) ||
           this.isContained(frame.lr) || this.isContained(frame.ll);
};

function Frame(origin, size) {
    this.origin = utility.checkPoint(origin);
    this.size = utility.checkSize(size);
}

对于来自古典背景的人来说，原型继承可能相当令人生畏。这是原型继承的简单解释：https ://stackoverflow.com/a/8096017/783743

有很多库可以帮助经典程序员使用 JavaScript。例如我自己的扩充库。以下是您将如何使用以下方法编写上述类augment：

var Frame = Object.augment(function () {
    this.constructor = function (origin, size) {
        this.origin = utility.checkPoint(origin);
        this.size = utility.checkSize(size);
    }

    this.lr = function () {
        var x = this.origin.x + this.size.width;
        var y = this.origin.y + this.size.height;
        return utility.checkPoint(new Point(x, y));
    };

    this.tr = function () {
        var x = this.origin.x + this.size.width;
        return utility.checkPoint(new Point(x, this.origin.y));
    };

    this.ll = function () {
        var y = this.origin.y + this.size.height;
        return utility.checkPoint(new Point(this.origin.x, y));
    };

    this.isContained = function (point) {
        var isInXBounds = point.x >= this.origin.x && point.x <= this.tr().x;
        var isInYBounds = point.y >= this.origin.y && point.y <= this.lr().y;
        return isInXBounds && isInYBounds;
    };

    this.hitTest = function (frame) {
        return this.isContained(frame.origin) || this.isContained(frame.tr) ||
               this.isContained(frame.lr) || this.isContained(frame.ll);
    };
});

另外，由于您想知道真正的闭包是什么，我建议您阅读以下答案：https ://stackoverflow.com/a/12931785/783743

于 2013-03-16T06:52:29.310 回答
1

您正在立即执行该功能

this.lr = (function () {
    return utility.checkPoint(new Point(self.origin.x + self.size.width, self.origin.y + self.size.height));
}());

结果， lr 在那个地方被赋予了一个值，并且永远不会改变。

你想要的只是：

this.lr = function () {
   return utility.checkPoint(new Point(self.origin.x + self.size.width, self.origin.y + self.size.height));
};

这将 lr 定义为将来可以根据需要调用的方法。

于 2013-03-16T06:29:36.890 回答