0

Chrome アプリとしてパッケージ化したいキャンバスを使用する単純な HTML5 Snake ゲームがあります。これが私の通常のHTMLファイルです：

<!DOCTYPE html>
<html>
    <head>
        <title>Snake</title>
        <link rel="stylesheet" href="snake.css">
    </head>
    <body>
        <canvas id="canvas" width="700" height="700"></canvas>
        <script type="text/javascript" src="food.js"></script>
        <script type="text/javascript" src="snake.js"></script>
        <script type="text/javascript" src="point.js"></script>
        <script type="text/javascript" src="game.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                    var canvas = document.getElementById("canvas"),
                    game = new Game(canvas, new Snake(canvas), new Food(canvas));
                game.init();
                game.run();
            }
        </script>
    </body>
</html>

ただし、HTML 内のスクリプトは許可されていません。そこで、それを削除して、ウィンドウを作成する main.js を配置しました。上記と同じコールバックを提供します。window.onloadこれは、これが chrome アプリと同等であると理解しているためです。

chrome.app.runtime.onLaunched.addListener(function() {
    "use strict";
    chrome.app.window.create('snake.html', {
        bounds: {
            width: 800,
            height: 800
        }
    }, function() {
        var canvas = document.getElementById("canvas"),
            game = new Game(canvas, new Snake(canvas), new Food(canvas));
        game.init();
        game.run();
    });
});

これは、DOM がロードされたように見えた後に実行されますが、document.getElementById常に null を返します。開発者ツールでドキュメントを見ると、アプリ ウィンドウにキャンバスが表示されていても、スクリプトだけが読み込まれているように見えます (キャンバスの周りに境界線があります)。誰が何が起こっているのか教えてもらえますか? window.onload動作しない場合に DOM にアクセスする適切な場所はどこですか?

4

1 に答える 1

1

main.js はバックグラウンド / イベント ページで実行されており、新しく作成されたウィンドウの DOM と同じコンテキストではありません。create callbackに記載されているように、そのコンテキストを操作できますが、これを解決することをお勧めする方法ではありません。

代わりに、main.js から単純にウィンドウを作成し、HTML ファイルから直接実行されるスクリプト コードをロードします。

window.html:

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="700" height="700"></canvas>
        <script ...</script>
        <script type="text/javascript" src="window.js"></script>

window.js:

var canvas = document.getElementById("canvas"),
game = new Game(canvas, new Snake(canvas), new Food(canvas));
game.init();
game.run();
于 2013-09-19T03:56:30.070 に答える