MozTW 討論區
https://forum.moztw.org/

JavaScript一些其他問題(已解決)
https://forum.moztw.org/viewtopic.php?f=13&t=19631		 第 1 頁 (共 1 頁)
發表人:  fanta [ 2007-07-10, 10:12 ]
文章主題 :  JavaScript一些其他問題(已解決)
以下是書上的範例
htm內容
代碼:
<html>
<head>
<title>範例7-1</title>
   <script type="text/javascript" src="ex7-1.js">
   </script>
</head>
<body onkeypress="run()" onkeydown="run()">
   <center>
      按下 g 鍵來開始移動球, 按下 s 鍵來停止
   </center>
   <img name="blueBall" src="blueBall.jpg" 
      style="position:absolute; left:260; top:60" onload="startMovingBall()" />
   <img name="redBall" src="redBall.jpg"
      style="position:absolute; left:300; top:60" onload="startMovingBall()" />
   <img name="greenBall" src="greenBall.jpg"
      style="position:absolute; left:340; top:60" onload="startMovingBall()" />
   <img name="yellowBall" src="yellowBall.jpg"
      style="position:absolute; left:380; top:60" onload="startMovingBall()" />
   <img name="blackBall" src="blackBall.jpg"
      style="position:absolute; left:420; top:60" onload="startMovingBall()" />
   <img name="silverBall" src="silverBall.jpg"
      style="position:absolute; left:460; top:60" onload="startMovingBall()" />
   <img name="orangeBall" src="orangeBall.jpg"
      style="position:absolute; left:500; top:60" onload="startMovingBall()" />
</body>
</html>


js檔內容
代碼:
var startGame = false;
var ballVerticalDirection = new Array(true,true,true,true,true,true,true);
var ballHorizontalDirection = new Array(true,false,true,true,false,false,true);
var ballOrgX = new Array(260,300,340,380,420,460,500);
var ballOrgY = new Array(60,60,60,60,60,60,60);
var ballX = new Array(7);
var ballY = new Array(7);
var ballSpeed = new Array(8,12,10,9,7,9,12);
var ball = new Array("blueBall","redBall","greenBall","yellowBall","blackBall",
   "silverBall","orangeBall");
var leftBound = 10;
var rightBound = 630;
var topBound = 60;
var bottomBound = 380;
var timerID, i;

// 移動球的位置
function moveBall()
{
   // 巡迴7個球
   for (i = 0; i < 7; i++)
   {
      // 球往下
      if (ballVerticalDirection[i])
      {   
         ballY[i] += ballSpeed[i];   
         if (ballY[i] > bottomBound)
         {
            // 球已經到達底端,反向往上
            ballVerticalDirection[i] = false;
         }

         if (ballHorizontalDirection[i])
         {
            // 球往右
            ballX[i] += ballSpeed[i];
            if (ballX[i] > rightBound)
            {
               // 球已經到達右端,反向往左
               ballHorizontalDirection[i] = false;
            }
         }
         else
         {
            // 球往左
            ballX[i] -= ballSpeed[i];
            if (ballX[i] < leftBound)
            {
               // 球已經到達左端,反向往右
               ballHorizontalDirection[i] = true;
            }
         }
      }
      else
      {
         // 球往上
         ballY[i] -= ballSpeed[i];
         if (ballHorizontalDirection[i])
         {
            // 球往右
            ballX[i] += ballSpeed[i];
            if (ballX[i] > rightBound)
            {
               // 球已經到達右端,反向往左
               ballHorizontalDirection[i] = false;
            }
         }
         else
         {
            // 球往左
            ballX[i] -= ballSpeed[i];
            if (ballX[i] < leftBound)
            {
               // 球已經到達左端,反向往右
               ballHorizontalDirection[i] = true;
            }
         }
         if (ballHorizontalDirection[i])
         {
            // 球往右
            ballX[i] += ballSpeed[i];
            if (ballX[i] > rightBound)
            {
               // 球已經到達右端,反向往左
               ballHorizontalDirection[i] = false;
            }
         }
         else
         {
            // 球往左
            ballX[i] -= ballSpeed[i];
            if (ballX[i] < leftBound)
            {
               // 球已經到達左端,反向往右
               ballHorizontalDirection[i] = true;
            }
         }
         if (ballY[i] < topBound)
         {
            // 球已經到達頂端,反向往下
            ballVerticalDirection[i] = true;
         }
      }
           
      // 設定球的位置
      eval("document." + ball[i] + ".style.left = " + ballX[i]);
      eval("document." + ball[i] + ".style.top = " + ballY[i]);
   }
}

function startMovingBall()
{
   // 設定球移動的速度
   if (startGame)
   {
      // 每20毫秒移動一次
      timerID = setInterval("moveBall()", 20);
      // 設定球在原來的位置
      for (i = 0; i < 7; i++)
      {
         ballX[i] = ballOrgX[i];
         ballY[i] = ballOrgY[i];
      }
   }
}

function run()
{
   var keyChar = getKeyChar();
   // 開始移動球
   if (keyChar == "g" || keyChar == "G")
   {     
      if (!startGame)
      {
         startGame = true;
         startMovingBall();
      }
   }
   // 停止移動球
   if (keyChar == "s" || keyChar == "S")
   { 
      if (startGame)
      {
         startGame = false;
         clearInterval(timerID);

         // 設定球在原來的位置
         for (i = 0; i < 7; i++)
         {
            eval("document." + ball[i] + ".style.left = " + ballOrgX[i]);
            eval("document." + ball[i] + ".style.top = " + ballOrgY[i]);
         }
      }
   }
}

function getKeyChar(e)
{
  var keyChar = "";
  if (navigator.appName == "Microsoft Internet Explorer")
  {
     keyChar = String.fromCharCode(window.event.keyCode);
  }
  else
  {
     keyChar = String.fromCharCode(e.which);
  }

  return keyChar;
}

// 使用在 Netscape Navigator
document.onkeypress = getKeyChar;
document.onkeydown = getKeyChar;


利用暑假時間自學，但是遇到蠻多問題的，我用IE開很正常，大致功能是按G鍵球開始跑，S鍵停止，用firefox開就不行了，我看錯誤主控台訊息是寫說*.JS內在getKeyChar 函式內的e出錯，為什麼這裡要用個e呢，而且程式看起來像是分為IE和Netscape來寫，若要改成標準語法，在每個瀏覽器都通用，要如何更改呢?需要各位的幫忙，謝謝。
發表人:  kourge [ 2007-07-10, 23:37 ]
文章主題 : 
把 e 改成 event。

看到下面這一行：
eval("document." + ball[i] + ".style.left = " + ballOrgX[i]);
就覺得作者是半懂 JavaScript 寫出來的。這一定是幾年前的書，因為更好的寫法是：
document[ball[i]].style.left = ballOrgX[i]
利用 eval 來修改還沒決定的變數是非常犧牲效能的作法。

還有其他一些「好幾年前出版」的徵兆，如：
new Array(60,60,60,60,60,60,60)
現在只要寫這樣就好了：
[60,60,60,60,60,60,60]

基本上，看完這本書，再閱讀重新介紹 JavaScript 這篇文章，比較有益。
（最後還剩一點沒翻完XD）
發表人:  fanta [ 2007-07-11, 09:37 ]
文章主題 : 
感謝kourge大大
這本書是2006年的，我還特地找新一點的 。
我照大大說的把e改成event，eval的地方也改掉，但是還是不能耶，錯誤訊息變成event has no properties，不知道還有其他地方要改嗎?
發表人:  fanta [ 2007-07-11, 20:01 ]
文章主題 : 
感謝大大指導，我已經解決了
我將這行
<body onkeypress="run()" onkeydown="run()">
改成
<body onkeypress="run(event)" onkeydown="run(event)">

還有
function run()
{
var keyChar = getKeyChar();
括號裡面都加上傳入值就可以在Mozilla跑了，很納悶為什麼都少了傳入值IE還能跑

感謝嚕。
發表人:  kourge [ 2007-07-12, 04:57 ]
文章主題 : 
fanta 寫:
這本書是2006年的，我還特地找新一點的 。

可見作者對 JS 的了解還停留在好幾年前 :evil:

fanta 寫:
括號裡面都加上傳入值就可以在Mozilla跑了，很納悶為什麼都少了傳入值IE還能跑

那是因為 IE 不會把 event 在函式間傳來傳去，而是放到 window.event，而 window 是「全域物件」(global object)，所以直接寫 event 就可以得到 event 這個物件。事實上這樣並不符合 W3C 的事件模型，不過 IE 也從來沒有符合過XD
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/