蛇游戏:未捕获ReferenceError:初始化未定义

时间:2018-09-30 20:01:18

标签: javascript html html5

我正在创建蛇游戏,但我一直在努力寻找有关为什么出现错误的答案: 未捕获ReferenceError:未定义init。我将我的javascript源添加到了html中,但是当我尝试通过google chrome调试时,它说我的脚本没有启动,因此我的功能无法正常工作。

<html>
<head>
    <meta charset="utf-8" />
    <title>319 Snake</title>

    <link href='http://fonts.googleapis.com/css?family=Rancho&effect=3d-float' rel='stylesheet' type='text/css'>
    <style>

        h1 {
            font-family: 'Rancho';
            font-size: 300%;
            text-align: center;
        }
        canvas{
            border: 1px;
            background:#ffffff;
            -webkit-box-shadow:0 0 20px #000;
            -moz-box-shadow: 0 0 20px #000;
            box-shadow:0 0 20px #000;"
        }
        body{
            background:#cdcdcd;
        }
    </style>
        <h1 class="font-effect-3d-float">Snake 319</h1>
        <canvas id="mycanvas" width="350" height="350" style="border:1px solid #000000></canvas>
    <script src="./snake.js"></script>
    </head>
    <body onload = "init();">
    </body>
</html>

这是我的Java脚本代码的一部分:

function init() {

canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');

loadImages();
createSnake();
locateApple();
setTimeout("gameCycle()", DELAY);
}    

有人对我的标记为什么不起作用/我应该在HTML代码中的位置提出任何提示吗?

2 个答案:

答案 0 :(得分:3)

该元素不是用于接收h1canvas标签的。这是没有显示的区域。您应该将需要显示的代码放在body部分中。

然后,您在画布元素中缺少引号。查看新代码:

function init() {
  canvas = document.getElementById('mycanvas');
  ctx = canvas.getContext('2d');

  loadImages();
  createSnake();
  locateApple();
  setTimeout("gameCycle()", DELAY);
}
<html>
  <head>
    <meta charset="utf-8" />
    <title>319 Snake</title>

    <link href='http://fonts.googleapis.com/css?family=Rancho&effect=3d-float' rel='stylesheet' type='text/css'>
    <style>
      h1 {
        font-family: 'Rancho';
        font-size: 300%;
        text-align: center;
      }

      canvas {
        border: 1px;
        background: #ffffff;
        -webkit-box-shadow: 0 0 20px #000;
        -moz-box-shadow: 0 0 20px #000;
        box-shadow: 0 0 20px #000;
        "

      }

      body {
        background: #cdcdcd;
      }
    </style>
  </head>

  <body onload="init();">
    <h1 class="font-effect-3d-float">Snake 319</h1>
    <canvas id="mycanvas" width="350" height="350" style="border:1px solid #000000"></canvas>

    <script src="./snake.js "></script>
  </body>
</html>

答案 1 :(得分:2)

您缺少引号,这就是为什么它不读取文件的原因。这是下一行。

SELECT t.id, t.eventfk, t.name, t.quantity, t.price FROM tickettypetable t LEFT JOIN ticketsalestable s ON s.eventfk = t.eventfk WHERE t.eventfk = 10

在样式标签上,您缺少结尾<canvas id="mycanvas" width="350" height="350" style="border:1px solid #000000> </canvas>