2.6.1　Greg's Gambits：創建填字游戲

作為小孩或成人，你很可能玩過Mad Libs填字游戲。這個游戲要求玩家想出可以插入故事中的單詞，并且大聲朗讀時可能非常好笑。玩家輸入的單詞可以是名詞、動詞、形容詞、副詞、專有名詞等。這里將創建一個非常類似的游戲，稱為Greg's Tales。

2.6.1.1　開發程序

作為開始，我們將編造一個故事（我們的故事），然后找出要用戶以自己的單詞代替的單詞。在做練習時你可以編造你自己的故事，但是現在使用以下故事：

要編制這個游戲，我們必須決定要使用哪些變量和獲得最終目標要采取的步驟。對此，我們使用非常一般的偽代碼描述如下：

·聲明變量

·識別每個變量的詞性（即如何向玩家描述這個單詞）

·為變量請求輸入

·輸出故事

在逐漸完善這個描述之前，我們先從需要的變量及其描述開始。

在編造這個故事時，我們可以設想以下幾種可能的結局：

·結局1："The×××××(monster)and×××××(name)became best friends and lived in×××××(name's)house happily ever after."

·結局2："The×××××(monster)overpowered×××××(name)and gobbled down all the×××××(food)and×××××(drink)in×××××(name's)refrigerator."

·結局3："×××××(name)screamed mean things at the×××××(monster),causing the×××××(monster)to turn and run back to the woods,never to be seen again."

2.6.1.2　編寫代碼

這個網頁將成為Greg's Gambits網站的一部分，以后我們也將為每個游戲創建一個新網頁。現在，我們從一個簡單網頁開始，聲明必需的變量，顯示游戲標題及其說明。這個網頁的對應文件稱為gregs_tales.html，并且可以在Student Data Files中找到。

這里列出的JavaScript和HTML代碼只是顯示游戲的開始頁面，網頁本身應當有一種方法讓用戶開始游戲。注意第30行的按鈕顯示在頁面的內容區域，當用戶單擊這個按鈕時，應當發生一些事情。在這種情況下，按鈕的標題是它的值（“click to begin”），并且當用戶單擊時將調用JavaScript函數startGame()。這是編寫JavaScript程序的重要方式，以使實現程序代碼和網頁之間的通信。一旦單擊了這個按鈕，程序控制就跳至第7行的函數startGame()，執行花括號內（即第8~14行）的代碼。當然，這個函數現在只是初始化變量的值。我們將為這個函數添加代碼，當然你也可以將下面的代碼添加到gregs_tales.html文件中。

網頁現在看起來像這樣：

然后添加提示，將這些代碼放在第8行之后。其中，變量pronoun取決于變量gender：

現在，我們處理變量gender。需要考慮用戶可能錄入Boy、BOY、boy或其他可能，或者甚至是拼錯的單詞，對于girl也一樣。要關心的一件事情是：如果玩家想要故事的英雄是男孩，那么錄入的第一個字符將是b或B；如果用戶想要英雄是女孩，那么第一個字符是g或G。本書后面將學習處理所有可能的輸入，但是現在假定玩家錄入的字符串起始于b或g。另外，若玩家選擇男孩，則變量pronoun應該設置為“he”；若玩家選擇女孩，變量pronoun應該設置為“she”。對于這種情況，可以使用條件操作符，并且這個測試gender輸入的語句要放在提示輸入gender的語句之后。如果gender內容的第一個字符是b或B，那么gender設置為“boy”并且pronoun設置為“he”；如果gender內容的第一個字符是g或G，那么gender設置為“girl”并且pronoun設置為“she”。

2.6.1.3　charAt()函數

要做的第一件事情是判斷gender的第一個字符是b還是g，我們可以使用一個內置JavaScript函數做這件事。函數charAt()返回字符串中任何指定位置的字符，而現在想要返回第一個位置上的字符。這個函數的語法如下所示：

現在要訪問的字符串是gender；index指的是要訪問字符的位置，而現在要訪問字符串的第一個字符，其位置是0。我們需要一個變量保存這個函數的返回值，因此使用一個新變量letter。也就是，把函數charAt()的結果存儲到letter中。然后使用條件操作符，根據letter的值將gender設置為“boy”或“girl”。其代碼看起來像這樣：

然后，使用條件操作符，根據gender的狀態將變量pronoun設置為“he”或“she”，如下所示：

2.6.1.4　完成代碼

通過添加代碼，我們可以使用玩家錄入的單詞和3個可能的結局完整地顯示這個故事。這個代碼將在最后一個提示之后，并且在函數start_game()的結束花括號之前：

現在我們將所有的相關代碼放在一起：

這里是一些在給定輸入情況下的輸出樣例：

輸入：

輸出：

輸入：

輸出：