0

我正在使用 HTML5 画布和 JavaScript 创建一个基于 Web 的基本游戏。虽然我之前对 HTML5 画布做过一些工作，但它并没有太广泛，因此不需要太多的 JavaScript——这意味着我在我的 .html 文件的脚本标签中编写了 JavaScript。

有了我目前正在处理的文件，我现在需要将 JavaScript 与 HTML 分开，因为当我在浏览器中查看页面并单击画布上的“开始”按钮时，尽管它确实执行了它应该执行的功能，但它需要很长时间才能完成......我假设是因为我的 .html 文件的大小（其中大部分是 JavaScript）。

我已将所有 JavaScript 移动到单独的文件中，每个文件中只有一两个函数，但我不确定如何在我的 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 写入单独的文件时如何将其“附加”到 HTML。

干杯!

编辑 21/11/2012 12:00

进行了建议的更改后，我尝试再次在 Firefox 中查看该页面，并在 Firebug 控制台中，当页面加载时，它说我的一个 JS 文件中有一个“未终止的正则表达式文字。它抱怨的文件包含此 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 无效时，您应该将 body 放置<section></section>在 body 内部而不是 the 中<head>，并且<p>应该在图像上有一个id="#n"和最后但并非最不重要的 a ，请改用该属性:)hrefonClick

在此处使用 W3C 验证器服务来验证您的 HTML。

然后使用你想要你“简单”的函数把它们放在你的onLoad()或者如果你热衷于使用 jQuery 你可以做

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

您是否尝试过在 Firebug 中调试您的应用程序？

于 2012-11-21T11:36:17.377 回答