Question

我正在使用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 at 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>

它现在可以正常工作，但是在单击开始按钮后加载图像所花费的时间方面，进行此更改似乎没有提高性能...任何建议？

Answer 1

你这样做是正确的，可能是你的脚本太大而在呈现之前需要一段时间。浏览器将HTML从上到下解释为当它遇到javascript文件时，它开始渲染它。

在您的情况下，我会尝试将javascript文件移到页面底部并再次尝试。此外，您必须确保以正确的顺序加载脚本文件。

此外，您应该将<section></section>放在正文中，而不是放在<head>中<p>应该有id="#n"，最后但不是最少{{1}想要使用javascript时图片上的图片无效，请改用href属性：）

使用W3C验证程序服务here验证您的HTML。

然后使用你想要的功能“简单地”将它们放在onClick中，或者如果你热衷于使用jQuery，你可以这样做

onLoad()

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

如何将内联Javascript从HTML移动到.js文件

1 个答案: