1

私はキャンバスレーシングゲームをプログラミングしており、イベントを使用して、各ゲームオブジェクトが初期化されて使用できるようになる時期を決定する予定です。最初にオブジェクトにイベントリスナーを追加しようとしましたが、それらはhtml要素にのみアタッチできることに気付きました。回避策として、代わりにウィンドウオブジェクトにリスナーを追加しました。

この問題にイベントを使用する必要があるかどうか、および一般的なパターン/方法がある場合は確認する必要があるかどうかについてアドバイスをいただければ幸いです。オブザーバーパターンを読み上げるつもりでしたが、これはこのシナリオに適していると思われますか？

以下のコードスニペットは、私が現在行っていることを示しています。Trackオブジェクトのすべてのアイテムがロードされると、ウィンドウオブジェクトにアタッチされたイベントリスナーによってキャッチされたイベントがディスパッチされます。

主要：

function game() {
  var loadCount = 0;
  var itemsToLoad  = 10; 

  window.addEventListener("finishedLoading", itemLoaded, false);      
  function itemLoaded(event) {
    loadCount++;
    if(loadCount >= itemsToLoad)
    {
      gameStateFunction = title;
    }
  }
}

追跡オブジェクト：

function Track(name, bgTileSheet) {  
  this.backgroundImage = new Image();
  this.itemsLoaded = 0;
  this.itemsToLoad = 3;
  this.loadedEvent = new CustomEvent("finishedLoading", {
    detail: {
      objectType: "track"
    },
    bubbles: true,
    cancelable: false
  });

  this.centerPath = null;
}

Track.prototype.updateLoadProgress = function() {
  this.itemsLoaded++;
  if(this.itemsLoaded >= this.itemsToLoad)
  {
    dispatchEvent(this.loadedEvent);
  }
};

Track.prototype.init = function() {
  //calls loadItems() when XML data is ready
};

Track.prototype.loadItems = function() {
  this.loadBackground();
  this.loadMapDimensions();
  this.loadPaths();
};

Track.prototype.loadBackground = function() {
  var self = this;
  this.backgroundImage.addEventListener("load", 
    function() {
      self.updateLoadProgress();
    }, 
    false);     
  this.backgroundImage.src = Track.TILESHEET_DIR + this.bgTileSheet;
};
4

1 に答える 1

0

はい、私はイベントがこのようなものと一緒に行く方法だと思います。イベントの定義を、HTML要素にのみアタッチ可能なイベントから緩める必要があるだけです。

オブザーバー、サブスクライバー、メディエーターなど、この種のものに使用するパターンの大部分は、ある意味で不自然な形式のイベントを使用します。

調べたいと思うかもしれないことの1つは、jQueryの遅延オブジェクトです。これらは多くの場合AJAXに関連付けられていますが、非常に効果的な方法で考案された主観的なイベントで使用することもできます。

私は数ヶ月前にこれについてブログ投稿を書き、このためのテクニックを示しました。

簡単なサンプルを次に示します。

function SomeClass() {
    this.ready = false;
    this.deferred = $.Deferred();
}
SomeClass.prototype.makeReady = function() {
    this.ready = true;
    this.deferred.resolve();
}
var myInstance = new SomeClass();

//listen for ready
$.when(myInstance.deferred).done(function() { alert('object is ready!'); });

//after a while, let's say we're ready
setTimeout(function() { myInstance.makeReady(); }, 2000);

ここでのタイムアウトは、オブジェクトを設定する実際の環境のシミュレーションにすぎません。AJAXリクエスト、その他のコードなどを実行します。

最後に、実際にイベントをオブジェクトに直接アタッチすることはできませんが、getter/setterを介してオブジェクトをオブジェクトプロパティにアタッチすることはできます。

于 2012-07-14T12:12:14.093 に答える