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

今回から2つのオブジェクトが重なっているかどうかを判定する仕組みをつくってみようと思います。
手探りなんでうまくいかないかもしれませんが、頑張ります。

オブジェクトをつくる

{
    top: 10,
    left: 10,
    width: 100,
    height: 100
}

とりあえず、座標と大きさがあれば良い気がしてるんでこんな感じで。

オブジェクトを返すFunctionをつくる

function HitArea(top, left, width, height) {
    this.top = top || 0;
    this.left = left || 0;
    this.width = width || 100;
    this.height = height || 100;
}

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

とりあえずこんな感じですね。

定期的にコンソールに出力する

setInterval(function() {
    console.log(hitArea);
}, 500);

デバッグ用なのでとりあえず0.5秒に1回表示してみましょう。

座標を更新するメソッドを用意する

function HitArea(top, left, width, height) {
    this.top = top || 0;
    this.left = left || 0;
    this.width = width || 100;
    this.height = height || 100;
}

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

オブジェクトを渡して座標を更新する仕様にしてみました。

documentでキーボードの入力を受け付ける

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