我正在创建一个贪吃蛇游戏，我正在努力寻找一些答案，为什么我会收到错误： 未捕获的引用错误：未定义初始化。我已将我的 JavaScript 源代码添加到我的 html 中，但是当我尝试通过谷歌浏览器进行调试时，它说我的脚本没有启动，因此我的函数不起作用。
<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 代码中的位置。
该元素不是为接收h1或canvas标签而创建的。这是一个不显示的区域。您应该将需要显示的代码放在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>你有一个缺少的引号，这就是为什么它没有读取你的文件。这是下一行。
<canvas id="mycanvas" width="350" height="350" style="border:1px solid #000000> </canvas>
在您的样式标签上，您缺少结束"