6

HTML5 キャンバスを使用した単純な JavaScript ゲームに取り組んでいます。これは、以下を含む非常に典型的なゲームループのセットアップです。

  • プレイフィールドで使用されるオブジェクトを初期化し、いくつかの開始 x/y 位置をランダム化し、同様のセットアップ タスクを行う init() 関数
  • シンプルなキャンバス形状といくつかの画像を含むすべてのゲーム オブジェクトを描画する draw() 関数
  • 25 ミリ秒ごとに draw を呼び出す setInterval

このプロジェクトを開始するときに、init() 関数の最後に setInterval 呼び出しを行ったので、ページをロードするとすぐに描画とアニメーションが開始され、すべてが正常に機能しました。さらに進んだので、読み込み時に完全に入力された静的なプレイフィールドを描画し、ボタンを使用してメインのゲーム ループ間隔を開始したいと思います。そのため、init() の最後に draw() への単一の呼び出しを追加しました。問題は、これを行うと、すべてのキャンバスの形状が適切に描画されますが、キャンバスに画像がレンダリングされないことです。

draw() を数回実行するとレンダリングされます...

    var previewDraw = setInterval(draw, 25);
    var stopPreviewDraw = function() { clearInterval(previewDraw) }
    setTimeout(stopPreviewDraw, 100)

...しかし、それはばかげているようです。draw() の単一の呼び出しが機能しないのはなぜですか? オブジェクトを Chrome と Firefox のコンソールに記録しましたが、それらに関するすべてが正常に見えます。それらはすでに適切な img src パスを持っており、作成されてから canvas.2dcontext.drawImage() メソッドを介して呼び出される新しい Image() に割り当てるために渡すことができる開始 x/y 値を持っています。

私はこれをChrome 6とFirefox 3.6.10でテストしていますが、どちらもこの動作に困惑しています。Chrome のコンソールにエラーや問題は表示されませんが、draw() を 1 回だけ呼び出してみると、Firefox はこれをスローします。

キャッチされない例外: [例外... "コンポーネントが失敗コードを返しました: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" 場所: "JS フレーム :: http://localhost/my-game-url / :: drawItem :: 行 317" データ: なし]

Google でそのエラーを検索すると、破損した画像が表示されますが、それらはすべてプレビューと Photoshop で問題なく開きます。

4

1 に答える 1

8

ウィンドウオブジェクトの onload イベントが発生した後に init() を呼び出していると思います。問題は、その時点で画像データが実際に利用可能であることを保証しないことです。AFAIRは、画像がネットワークからフェッチされた後に起動しますが、それでもデコードする必要があります.

最善の策は、代わりに画像の onload イベントを待つことです。

于 2010-10-03T15:38:19.103 に答える