JavaScriptであたり判定をつくろうその2

前回のつづきです。

今回はViewの部分をつくっていこうと思ったんですが、前回のコードを見返したら修正したいところが何点かあったので、まずはそちらの修正を行います。

移動量をインスタンスが持つようにする

前回、キーボードのイベントでオブジェクトの座標を更新するところを、

doc.addEventListener("keyup", function(evt) {
    var TOP_KEY_INDEX    = 38,
        BOTTOM_KEY_INDEX = 40,
        LEFT_KEY_INDEX   = 37,
        RIGHT_KEY_INDEX  = 39;

    switch(evt.keyCode) {
        case TOP_KEY_INDEX:
            hitArea.setPosition({top: hitArea.top - 10});
            break;
        case BOTTOM_KEY_INDEX:
            hitArea.setPosition({top: hitArea.top + 10});
            break;
        case LEFT_KEY_INDEX:
            hitArea.setPosition({left: hitArea.left - 10});
            break;
        case RIGHT_KEY_INDEX:
            hitArea.setPosition({left: hitArea.left + 10});
            break;
    }
}, false);

と書いていました。しかし、

移動量を変更するために 4カ所変更しなければならない
オブジェクトを複数つくった際にめんどくさくなりそう

という懸念があるのでいまのうちに改修しておきたいと思います。

// stride（歩幅）追加
function HitArea(obj) {
    this.top = obj.top || 0;
    this.left = obj.left || 0;
    this.width = obj.width || 100;
    this.height = obj.height || 100;
    this.stride = obj.stride || 10;
}

HitArea.prototype._setPosition = function(obj) {
    this.top = (typeof obj.top === "number") ? obj.top : this.top;
    this.left = (typeof obj.left === "number") ? obj.left : this.left;
};
    
HitArea.prototype.stepForTop = function() {
    this._setPosition({top: this.top - this.stride});
};

HitArea.prototype.stepForBottom = function() {
    this._setPosition({top: this.top + this.stride});
};
    
HitArea.prototype.stepForLeft = function() {
    this._setPosition({left: this.left - this.stride});
};
    
HitArea.prototype.stepForRight = function() {
    this._setPosition({left: this.left + this.stride});
};

引数にstride（歩幅）を追加してインスタンスごとに移動量を持つようにしてみました。
また、setPositionに直接アクセスさせずに、各方向に1歩移動するための専用メソッドをつかって移動するように設計し直しています。
また、引数が多くなると順番を覚えるのが大変なのでオブジェクトで指定できるようにしました。
結果、全体はこのようになりました。

var hitArea = new HitArea({
    top    : 10,
    left   : 10,
    width  : 100,
    height : 100,
    stride : 10
});


// キーボードイベント
doc.addEventListener("keyup", function(evt) {
    var TOP_KEY_INDEX    = 38,
        BOTTOM_KEY_INDEX = 40,
        LEFT_KEY_INDEX   = 37,
        RIGHT_KEY_INDEX  = 39;

    switch(evt.keyCode) {
        case TOP_KEY_INDEX:
            hitArea.stepForTop();
            break;
        case BOTTOM_KEY_INDEX:
            hitArea.stepForBottom();
            break;
        case LEFT_KEY_INDEX:
            hitArea.stepForLeft();
            break;
        case RIGHT_KEY_INDEX:
            hitArea.stepForRight();
            break;
    }
}, false);


// 定期的にオブジェクトを表示
setInterval(function() {
    console.log(hitArea);
}, 500);


// あたり判定になる予定
function HitArea(obj) {
    this.top    = obj.top    || 0;
    this.left   = obj.left   || 0;
    this.width  = obj.width  || 100;
    this.height = obj.height || 100;
    this.stride = obj.stride || 10;
}

HitArea.prototype._setPosition = function(obj) {
    this.top = (typeof obj.top === "number") ? obj.top : this.top;
    this.left = (typeof obj.left === "number") ? obj.left : this.left;
};

HitArea.prototype.stepForTop = function() {
    this._setPosition({top: hitArea.top - this.stride});
};

HitArea.prototype.stepForBottom = function() {
    this._setPosition({top: hitArea.top + this.stride});
};

HitArea.prototype.stepForLeft = function() {
    this._setPosition({left: hitArea.left - this.stride});
};

HitArea.prototype.stepForRight = function() {
    this._setPosition({left: hitArea.left + this.stride});
};