みかづきブログ その3

3ヶ月つづけてみました。

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);

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

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

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

// 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});
};

demo



なんだかつかいやすくなった気がしますね。
では次回こそViewの部分をつくっていきたいと思います。

つづきは こちら

kimizuka.hatenablog.com