<html>
<head>
<title>Maze Game</title>
<link rel="stylesheet" type="text/css" href="styleSheet.css">
<script type="text/javascript">
function leftwards()
{
var element = document.getElementById("girl");
element.style.left = parseInt(element.style.left) - 10 + 'px';
}
function rightwards()
{
var element = document.getElementById("girl");
element.style.left = parseInt(element.style.left) + 10 + 'px';
}
function upwards()
{
var element = document.getElementById("girl");
element.style.top = parseInt(element.style.top) - 10 + 'px';
}
function downwards()
{
var element = document.getElementById("girl");
element.style.top = parseInt(element.style.top) + 10 + 'px';
}
function moveLocation(event)
{
switch (event.keyCode)
{
case 37:
leftwards();
break;
case 39:
rightwards();
break;
case 38:
upwards();
break;
case 40:
downwards();
break;
}
};
function mazeLoop()
{
if((Math.pow(Math.abs(top-590),2)+Math.pow(Math.abs(left-670),2)<=900))
{
alert("DONE!");
}
else
{
moveLocation();
setTimeout("mazeLoop()",10);
}
}
</script>
</head>
<body onload="mazeLoop();" onkeydown="" onkeyup="moveLocation(event)">
<h1>Find the destination</h1>
<hr><br>
<img src="maze.jpg" class="maze" alt="maze" width="730">
<img id="girl" src="girl.jpg" style="position: absolute; left: 620; top: 140; bottom: auto;" height="30" width="30">
</body>
</html>
亲爱的 Stack Overflow friend 们，你们好， 我目前正在开发一个javascript迷宫游戏(上面的代码)，它基本上是通过键盘移动来完成的，当它完成时，它实际上应该弹出警报消息。但是当我测试代码时，它会说以下行中“左”的引用有错误:
function mazeLoop()
{
if((Math.pow(Math.abs(top-590),2)+Math.pow(Math.abs(left-670),2)<=900))
{
alert("DONE!");
}
else
{
moveLocation();
setTimeout("mazeLoop()",10);
}
}
我不知道分享我的 styleSheet 代码是否有助于解决此问题，但它们是:
<style>
body{
background-color: powderblue;
font-size: 30px;}
h1{
color: #E1BEE7;
font-size: 50px;
text-align: center;
font-family: Verdana;
text-decoration: underline;}
h2{
color: #C0CA33;
font-size: 35px;
text-align: center;
position: absolute;
left: 8%;}
.button {
background-color: #C0CA33;
color: white;
padding: 8px 30px;
text-align: center;
display: inline-block;
font-size: 30px;}
.maze{
position: absolute;
width: 730px;
top: 25%;
left: 22%;}
#girl{
position: absolute;
left: 620;
right: 500;
top: 140;
bottom: auto;}
</style>
最佳答案
您尚未在任何地方声明 top 或 left。您没有在 top 中看到此错误的唯一原因是浏览器有一个名为 top 的内置全局变量(对顶级窗口的引用)。
您必须声明变量。在计算中使用它们之前，您还必须为它们分配有意义的值。
一般来说，避免全局变量。全局变量是一件坏事™。例如，您不能使用top作为全局变量，因为您不允许对其进行分配。
避免使用全局变量:
将代码包装在范围结构中。目前，这意味着内联调用的函数表达式:
(function() { // Your code here })();由于 ES2015+ 的语义，最新的浏览器将允许您仅使用独立的 block ，但许多浏览器仍然需要一个函数。
不要使用
onxyz-attribute-style 事件处理程序(例如，onkeyup="moveLocation(event)")，因为它们要求他们称之为全局函数，并且...全局函数是一件坏事™。相反，通过addEventListener等方式阅读现代事件处理。 (如果您必须支持 IE8，my answer here 会向您展示如何处理它不支持addEventListener的情况。)
关于javascript - 关于我的javascript游戏中的警报功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43580646/