簡介： 這個遊戲會由程式先產生四個不重複的數字密碼X，由玩家也猜測一組四個不重複的數字Y。X與Y中位置與數字皆相同的個數是變數A，數字相同但位置不同的個數是變數B，每次猜測後程式會回應?A?B的提示，玩家依據提示繼續逼近正確的答案。這些程式功能都要由JavaScript程式完成，會用到亂數產生器、字串變數、字元陣列、比較是否相等的條件式與迴圈運算。

網頁介面的設計 開啟一個HTML網頁，設計介面如下： 第一二行分別是一個Text與Button物件，id分別應該是：Text1, Button1, Text2, Button2 下方是一個Textarea物件，id=TextArea1 產生密碼的程式 請雙按Button1進入程式碼編輯事件副程式如下： 上述程式先宣告一個四成員的字元陣列，接著用迴圈一一使用亂數產生一個0~9的阿拉伯數字，Math.random會產生一個>=0且小於1的小數，乘以10就會變成>=0且小於10的數字，parseInt是將小數部份去掉取整數的運算，結果就是0~9的一個隨機數字了！ 但是這樣產生的數字有可能重複，譬如出現「7567」之類的結果！因此後續程式是將產生的陣列自我比對，如果位置一樣數字當然是一樣的，但是位置不同也有相等的數字就是有重複了！處理方式是回去重新產生一組新的數字，如果不重覆時就會結束這個迴圈，顯示結果到Text1之中。寫好程式請執行看看，每次按下Button1是不是出現在Text1的數字都是四個不重複的數字？ 猜數字的程式 遊戲過程應該是產生密碼之後由玩家在Text2裡面輸入猜測的數字，然後按下Button2讓程式去比對Text1與Text2的數字相關性，將?A?B的提示寫在TextArea1裡面。當然完成後的程式Text1內容應該看不到，我們稍後再處理，測試時先讓他透明以便檢視程式是否正確。按下Button2寫事件副程式如下： 如程式註解，上述程式先自我檢測猜的數字本身是否重複？如果有就提示玩家，接著跳出副程式→retuen就是回家，後面程式就不繼續執行了！ 如果猜測數字合法，後面就是檢測有?A?B的結果，此處用到一個 charAt 函數，意思是字串中的第幾個字元的意思，但是括號內用的「索引」值，第一個字是索引 0 不是 1！所以第1~4個字的索引是0~3！ 交叉比對密碼組與猜測組，發現相同數字時看看相對位置相同時A+1，不同時B+1。結果顯示於TextArea1，請注意此處用innerHTML屬性，所以要用標籤 <br/> 來換行。最後還要清除猜測的數字，讓玩家方便繼續猜，不必自己刪除舊數字。 隱藏密碼 至此程式功能已經完成，你可以試試看整個產生密碼與猜數字的程序，如果一切OK就必須寫程式隱藏Text1了！否則看著答案玩就不必猜了！最簡單的方法就是將Text1物件設成密碼(password)顯示模式，原來的 Text1 原始碼是這樣的： 改成這樣 顯示畫面就變成這樣了！ 隱藏整個物件 如果要隱藏整個物件也可以！到Text1的style屬性視窗，找到版面配置頁的 visibility屬性欄，設定為 hidden(隱藏)即可！ 各位同學應該已經學過VB與C#視窗程式，在HTML物件中你會發現很多屬性設定，如 Visible或 Left, Top等等不會直接出現在屬性視窗，這是因為HTML物件原本就沒有這些屬性，但是經過樣式表(CSS)的附加功能，物件還是可以擁有這些屬性，但是必須進入style屬性之內設定，這些屬性都算是 style屬性的一部份。 猜對時的反應 A等於 4時當然就是完全猜對了！可以清除紀錄並呼叫 Button1_onclick()自動重設密碼，有趣了！既然可以自動重設，那麼好像Button1也可以藏起來，不必讓玩家自己重設了？但是還差一點，在網頁載入時也必須自動呼叫Button1_onclick()產生密碼才行！請將 body標籤修改如下： 之後你其實可以直接將 Button1物件刪除都沒關係了！保守一點的作法就是模仿隱藏Text1的方式隱藏Button1了！