みかづきブログ その3

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

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

前々回前回 のつづきです。

今回はエリアを見えるように改修しますが、また1点気になるところを修正してから実装を行います。

定数をkeyup時のコールバック関数の外に出す

前回のコードの、

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

ここの部分ですね。
キーアップするたびに定数を定義しているたので、

(function() {
    var TOP_KEY_INDEX    = 38,
        BOTTOM_KEY_INDEX = 40,
        LEFT_KEY_INDEX   = 37,
        RIGHT_KEY_INDEX  = 39;

    doc.addEventListener("keyup", function(evt) {
        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);
})();

と変更しました。

ではでは早速みためをつくっていきましょう。


当たり判定をビジュアライズする

demo


変更箇所

DOMをつくって参照をもつ
// あたり判定になる予定
function HitArea(obj) {
    var that = this;
    
    _init(); // 追加
    
    function _init() {
        var elm = doc.createElement("div");
        
        elm.className = "hitarea";
        elm.style.position = "absolute";
        that.elm = elm;
    }
    
    that.top    = obj.top    || 0;
    that.left   = obj.left   || 0;
    that.width  = obj.width  || 100;
    that.height = obj.height || 100;
    that.stride = obj.stride || 10;
}

HitArea を new した際に div を生成し、その参照を持たせるように変更しました。
のちのち座標を変更することを考え、position を absolute にしています。
Model と View をわけることも検討しましたが、今回はシンプルにあたり判定を
ビジュアライズするという意味で分けてません。はい。


appendToメソッドの追加
HitArea.prototype.appendTo = function(elm) {
    elm.appendChild(this.elm);
};

HitAreaが参照を持つDOMを引数で渡したDOMにappendするメソッドをつくりました。
今回はbodyにappendしています。

hitArea.appendTo(doc.body);
HitAreaの記述箇所を先頭へ移動

prototypeに追加しているメソッドは関数式の為、関数の巻き上げが行われません。
なのでHitAreaの定義をメインロジックより先に行う必要があるので先頭に移動しました。


renderメソッドの追加
HitArea.prototype.render = function() {
    this.elm.style.top    = this.top + "px";
    this.elm.style.left   = this.left + "px";
    this.elm.style.width  = this.width + "px";
    this.elm.style.height = this.height + "px";
};

エリアのもつ座標をDOMに渡すメソッドを用意しました。
いまのところサイズを変更する予定はありませんがのちのちのことを考えて渡しています。


renderメソッドを定期的に実行する
setInterval(function() {
    console.log(hitArea);
    hitArea.render();
}, 100);

現在の座標をコンソールに表示するだけではなく、DOMとして表示できるように定期的にrenderメソッドを叩く処理を追加しました。
また、インターバルも200msから100msに変更しています。

見た目はCSSで整える
body {
    margin: 0;
}

.hitarea {
    background: rgba(255, 0, 0, .1);
}

とりあえず色をつけておきます。



これであたり判定を可視化して動かせるようになりました。
次回は他のあたり判定との衝突判定を実装しようと思います。



つづきは こちら

kimizuka.hatenablog.com