Question

    <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朋友们，我目前正在开发一个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>

Answer 1

您尚未在任何地方声明top或left。您top没有看到此错误的唯一原因是浏览器有一个内置的全局名为top（对顶级窗口的引用）。

您必须声明变量。在计算中使用它们之前，还必须为它们分配有意义的值。

一般来说，避免使用全局变量。 Globals是Bad Thing™。例如，您无法使用top作为全局，因为您不能分配给它。

避免使用全局变量：

将您的代码包装在范围结构中。目前，这意味着内联调用的函数表达式：
```
(function() {
    // Your code here
})();
```
由于ES2015 +的语义，最新的浏览器会让你只使用一个独立的块，但是野外的许多浏览器仍然需要一个函数。
不要使用onxyz - 属性样式的事件处理程序（例如，像onkeyup="moveLocation(event)"），因为它们要求它们调用的函数是全局的，并且...全局变量是一件坏事™。相反，通过addEventListener和类似的方式阅读现代事件处理。（如果您必须支持IE8，my answer here会向您展示如何处理不支持addEventListener的事实。）

关于我的javascript游戏中的提醒功能

1 个答案: