0

HTML5キャンバスとJavaScriptを使用して基本的なWebベースのゲームを作成しています。以前にHTML5キャンバスでいくつかの作業を行ったことがありますが、それほど広範ではないため、あまり多くのJavaScriptを必要としませんでした。つまり、JavaScriptを.htmlファイルのスクリプトタグに記述しました。

現在作業中のファイルを使用して、JavaScriptをHTMLから分離する必要があります。これは、ブラウザーでページを表示し、キャンバスの[開始]ボタンをクリックすると、本来の機能を実行しますが、実行するには時間がかかります...私の.htmlファイル(ほとんどがJavaScript)のサイズのためだと思います。

すべてのJavaScriptを別々のファイルに移動し、各ファイルに1つまたは2つの関数を追加しましたが、HTMLページでこれらの関数をどのように使用するかわかりません。

私のHTMLファイルは現在次のようになっています。

<!DOCTYPE html>
<html>
<head>
<title>Home</title>

<section hidden>
<img id="StartButton" src="StartButton.png" alt="Start Button" width="179" height="180" href="javascript:drawLevelOneElements();"/>
</section>

<script src = "drawLevelOneElements.js" type = "text/javascript"></script>
<script src = "layers&analytics.js" type = "text/javascript"></script>
<script src = "startGameDrawGameElementsDrawStartButton.js" type = "text/javascript"></script>
<script src = "variables&preloadingImages.js" type = "text/javascript"></script>

</head>

<body onLoad="startGame()">
    <h1>Home</h1>
    <p1>The purpose of this website is to teach users the basic principles of running a business by playing the game below. <br /><br /></p1>
    <p2>

    <canvas id="gameCanvas" width="1000" height="500" style="border:1px solid">
    Your browser does not support the canvas element.
    </canvas>

    <br /><br /></p2>
    <p3>Use this paragraph to enter text that provides the user with instructions for how to play the game. <br />
        Update the instructions so that they're appropriate to whatever level the user is currently playing.</p3>
</body>

スクリプトのsrc行は、使用したいJSファイルを参照していますが、ブラウザーでページを表示すると、空白のキャンバスが表示されます。誰かが私がここで間違っていることを私に指摘できますか?別のファイルにJSを書き込むときに、JSをHTMLに「アタッチ」する方法がわかりません。

乾杯!

2012年11月21日12:00に編集

提案された変更を加えた後、Firefoxでページをもう一度表示してみましたが、Firebugコンソールでページが読み込まれると、「JSファイルの1つに「終了していない正規表現リテラル。それが文句を言っていたファイル」と表示されました。このJSコードが含まれています:

    /* Create a canvas layer to display text */
    function displayText(textLayer, message){
        var textLayerContext = textLayer.getContext();
        textLayer.clear();
        textLayerContext.font = "18pt Calibri";
        textLayerContext.fillStyle = "black";
        textLayerContext.fillText(message, 10, 10);
    }

    /* Create a canvas layer to display the button */
    window.onload = function(){
        var stage = new Kinetic.Stage({
            container: "container",
            width: 179,
            height: 180
        });
        var buttonLayer = new Kinetic.Layer();
        var textLayer = new Kinetic.Layer();
    }
</script>

<script type="text/javascript">
/*Google analytics code for tracking website. */
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-31216545-1']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

そしてそれが不平を言っていた行は</script>

現在は機能していますが、この変更を行っても、スタートボタンをクリックしてから画像を読み込むのにかかる時間の点では、パフォーマンスはそれほど向上していないようです...何か提案はありますか?

4

1 に答える 1

1

スクリプトが非常に大きいため、レンダリングに時間がかかる可能性があります。ブラウザーは HTML を上から下に解釈し、javascript ファイルに遭遇すると、そのレンダリングを開始します。

あなたの場合、JavaScript ファイルをページの一番下に移動して、もう一度試してみます。また、スクリプト ファイルが正しい順序でロードされていることを確認する必要があります。

また、JavaScript を使用したい場合は無効であり、代わりに属性を使用してください<section></section>:)<head><p>id="#n"hrefonClick

こちらの W3C バリデータ サービスを使用して、HTML を検証します。

次に、必要な関数を「単に」使用するには、それらを自分のファイルに入れるか、onLoad()jQuery を使用することに熱心な場合は、次のことができます。

$(document).ready(function(){ //perform your functions as normal here });

Firebug でアプリケーションをデバッグしようとしましたか?

于 2012-11-21T11:36:17.377 に答える