1

私は HTML5 (および OO Javascript) を学習中で、単純なゲーム エンジンを作成しようとしていますが、キャンバスへのレンダリングは非常に奇妙な条件下で機能します。ここにページへのリンクがあり、ここに私のindex.htmlがあります: 

<html>
<head>
    <script type="text/javascript">
        function load()
        {
            var game = new Game();
            game.start();   
        }
    </script>
    <title>Game</title>
    <style>
        canvas
        {
            outline:0;
            border:1px solid #000;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body onload="load()">
    <canvas id='c'></canvas>

    <script src="classes/Tuple.js"></script>
    <script src="classes/Rect.js"></script>
    <script src="classes/Sprite.js"></script>
    <script src="classes/Game.js"></script>
</body>
</html>



最初に読み込まれると、Firefox 11.0 では NS_ERROR_DOM_TYPE_MISMATCH_ERR 例外が発生し、Chrome 18.0では TypeError例外が発生します。それを機能させるには：

Firefox 11.0

  • アドレス バーで URL を選択し、手動で Enter キーを押すか、
  • 更新ボタンをクリックするか、
  • F5 を押します。

クロム 18.0

  • アドレス バーで URL を選択し、手動で Enter キーを押すか、
  • 更新ボタンをクリックするか、
  • F5 またはを押す
  • Shift/Ctrl + F5 を押します。

私が推測していること - 推測ですが、最初のページの読み込み中に呼び出されるまでに、1 つ以上の .js ファイルが利用できない/準備ができていないようです。Firebug で数回試してみると、最初のページ リクエストでスプライト イメージが読み込まれないようです。

おそらく、いくつかの .js ファイルは、Game() へのインスタンス化が行われているときにまだダウンロードされており、キャッシュされており、すべてが 2 回目のページの読み込みによってのみ利用可能になるのでしょうか?

何か案は？ありがとうございます。

4

1 に答える 1

3

私はあなたのファイルをローカルにコピーし、いくつかのテストを行いました。利用できないのはJavaScriptファイルではなく、スプライトのようです。

を呼び出すまで、PNGをロードしていませんGame.start。あなたがするとき：

roadSpritesheetImage.src = "assets/sprites/player/playerSpriteSheet.png";

これにより、イメージの非同期ダウンロードが開始されます。残りのコードは、画像が完全に読み込まれる前に実行されるため、画像をスライスするときは、src属性がnullであるかのように画像をスライスします。

これが、更新を押すことができ、すべてが期待どおりに機能する理由です...画像はキャッシュされます。

キャンバスの直前に画像タグを追加することで、スプライトの読み込みを先取りすることができます。

<img src="assets/sprites/player/playerSpriteSheet.png" style="display:none;" />

これは、コンテンツ（画像を含む）が完全に読み込まれるまでbody loadイベントが発生しないため、機能します（これを調べる必要があると思います）。次に、この画像をに割り当てるimg.srcと、キャッシュされた画像を参照することになります。

または、ゲームの残りの機能をにバインドすることもできますimg.onload。例えば：

self.loadSprites = function()
{
    var roadSpritesheetImage = new Image();     
    roadSpritesheetImage.onload = function() { 
        self.entities.push(new Sprite("testTile", 
            roadSpritesheetImage, 
            new Tuple(16, 16), 
            new Rect(0, 0, 32, 16)));
        self.run();
    };

    roadSpritesheetImage.src = "assets/sprites/player/playerSpriteSheet.png";
};

self.run = function() {
    var drawSuccessful = false;
    drawSuccessful = self.entities[0].draw(self.context);
    self.entities[0].nextFrame();

    //if we managed to draw the Sprite successfully without any raised exceptions
    if(drawSuccessful) {
        setTimeout(self.run, 300);
    } else { alert("stopping execution of the game."); }
};

self.start = function()
{
    self.loadSprites();
};

これを行うと少しクリーンになり、リソースに競合状態がないことが保証されます。

ソース画像からNパズルを描画するために作成したjQueryプラグインでも同様の問題が発生しました。キャンバスの代わりにスライスされたdivを使用することになりましたが、このMDNドキュメントは当時非常に便利でした。

于 2012-04-06T04:23:52.893 に答える