アクトインディ開発者ブログ

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

任意のイベントを受付け、発火できるオブジェクト

komagataです。

canvasでウロウロするシリーズも少しコードが汚くなって来たのでリファクタリングしました。

iPhone シミュレータ

canvasでウロウロする4

コンストラクタの継承が出来なかったのをJavaScript: The Good Partsに載っていた関数型の継承を使って書き直しました。

また、同じく同書に載っている、任意のオブジェクトに任意のイベントを受付け、発火できる機能を追加する、とても便利なeventuality関数を使うように書き換えました。

var eventuality = function(that) {
  var registry = {}

  that.fire = function(event) {
    var array, func, handler,
        type = typeof event === 'string' ? event : event.type

    if (registry.hasOwnProperty(type)) {
      array = registry[type]
      for (var i = 0; i < array.length; i++) {
        handler = array[i]
        func = handler.method
        if (typeof func === 'string') {
          func = this[func]
        }
        func.apply(this, handler.parameters || [event])
      }
    }
    return this
  }

  that.on = function(type, method, parameters) {
    var handler = {method: method, parameters: parameters}
    if (registry,hasOwnProperty(type)) {
      registry[type].push(handler)
    } else {
      registry[type] = [handler]
    }
    return this
  }

  return that
}

eventuality関数はonとfireの二つのメソッドを持ちます。onで任意の名前のイベントを登録し、fireで発火します。

eventuality関数を継承したオブジェクトは全て同機能を持つのでenterframeイベントを持ったspriteオブジェクトなどがとても簡単につくれるようになりました。

var sprite = function(img_src, x, y, width, height) {
  var that = eventuality()
  that.img = new Image
  that.img.src = img_src

  that.on('enterframe', function(){
    that.game.context.drawImage(
      that.img,
      that.x,
      that.y,
      that.width,
      that.height
    )
  })

  return that
}

こんな感じで好き勝手なイベントが作れるのが便利です。

コード:4 at master from komagata's canvas-prowler - GitHub

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス