1

私はクラス プロジェクトを作成しています (HTML5 キャンバスを使用して Frogger ゲームを作成する必要があります)。衝突検出、移動などのさまざまなことを支援するオブジェクトがたくさんあります。

下のオブジェクトはその 1 つです。各ビューには、そのフレームが渡されたフレームと衝突しているかどうかを確認する関数呼び出し hitTest を含む Frame オブジェクトが含まれています。何らかの理由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 に答える