關於我的javascript比賽報警功能

<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>

你好我親愛的堆棧溢出的朋友，我目前工作的一個JavaScript的迷宮遊戲（上面的代碼），它基本上與鍵盤移動完成，而當它完成，它實際上應該彈出警報消息。但是，當我測試的代碼，它會說有錯誤。在下面的線爲「左」的提法：關於我的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); 
       } 
      }

我不知道是否會分享我的樣式表的代碼將在解決這個問題上是有用的，但他們是：

<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>

來源

2017-04-24 Harry

什麼是top'的'價值和'在'if'條件left'你可以通過控制檯檢查？ –

頂部和左側未在腳本中全局聲明。 – gurvinder372

添加一個觀察，在最終/生產代碼中使用警報並不是一個好的做法。 –

您還沒有宣佈top或left任何地方。你沒有看到top這個錯誤的唯一原因是瀏覽器有一個名爲top的內置全局（對頂級窗口的引用）。

您必須聲明變量。在計算中使用它們之前，還必須爲它們分配有意義的值。

一般來說，應避免使用全局變量。全局是一件壞事™。例如，您的不能作爲全局使用top，因爲您不允許分配給它。

爲了避免使用全局變量：

包裝你的代碼的作用域結構。就目前而言，這意味着一個行內調用的函數表達式：
```
(function() { 
    // Your code here 
})(); 
```
截至到最新的瀏覽器將讓你只使用一個獨立的模塊，因爲ES2015 +的語義，但是很多瀏覽器在野外仍然需要一個函數來代替。
不要使用onxyz -attribute式的事件處理程序（例如，像你onkeyup="moveLocation(event)"），因爲他們要求他們調用的函數是全局，並...全局是壞事™。相反，閱讀現代事件處理，通過addEventListener和類似的。（如果您有支持IE8，my answer here告訴您如何處理它不支持addEventListener的事實。）

來源

2017-04-24 05:55:42

並且不要嘗試改變全局'頂部'的含義！ –

@JaromandaX好的，所以我需要設置變量就像left = any value，top = any value？ – Harry

關於我的javascript比賽報警功能

回答

相關問題