Andy83 Andy83 - 2 months ago 9
CSS Question

Script tags - not linking (JS platform game)

I'm working through the 'create a platform game' project from Eloquent JavaScript and have an issue with script tags.

In the book we're told to display our level using:

<link rel="stylesheet" href="css/game.css">

<script>
var simpleLevel = new Level(simpleLevelPlan);
var display = new DOMDisplay(document.body, simpleLevel);
</script>


I've tried adding this (together with an additional script tag for my platform.js file) into index.html but the browser is giving nothing back, not sure what I'm doing wrong?

Answer

Ensure you are inserting your scripts in the right order:

<!DOCTYPE html>
<html>
    <head>
        Here you should put your "included" scripts with <script src=...>
    </head>
    <body>
        ...
    </body>
    <script>
        Here you should put your first execution, if it needs the html page been completely loaded (as to use document.body).
    </script>
</html>

The scripts are being executed as they appear into the page. If you use document, you have to delay the execution until the whole page has been loaded: Either by putting your script at the end of the HTML, either by putting an initialization function within the HEAD, and call it from body onload:

    <head>
        <script>
            function myFunction(){...}
        </script>
    </head>
    <body onload="return myFunction()">
        ...
    </body>