みかづきブログ その3

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

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

とりあえずこれで上下左右キーで10ずつ座標を変更できるようになりました。
今回はここまでです。次回はこのオブジェクトを画面に表示してみようと思ってます。


demo


つづきは こちら

kimizuka.hatenablog.com