# Day 18 阿嬤的猜字遊戲！（下） 呦嘿我又來給你們受苦啦！（x ## 參賽者的輸入 我們要怎麼從玩家那得到猜測答案呢？又要怎麼確定玩家輸入的是一個字母，而不是 兩個呢？（問題超多 ``` var 你的猜測 = prompt("請猜一個字母，或者按取消來停止遊戲") if (你的猜測 === null) { break; } else if (你的猜測.lenght !== 1) { alert("請輸入一個字母以內的答案") } else { //我們必須用他的猜測來修改遊戲的狀態 } ``` 在此例上處，我們用了`prompt`來獲得玩家端的輸入，並且把輸入的內容儲存到變數`你的猜測`裡頭， 此時，玩家端可能會發生幾個情況： 若玩家覺得這個單字太難的話，有的還會選擇棄權，也就是按取消，那猜測內容就是`null`（就是沒 有猜測的意思）要在哪裡確認是否棄權呢？就在這段程式碼裡： ``` if (你的猜測 === null) break; ``` 若控制台檢查到條件為`true`時，我們就使用`break`強至退出遊戲（就是跳出循環）。 還有兩種情況，就是玩家輸入了1個字母以上的答案（不輸入也算喔）若我們啥也不寫，那你輸入的 文字就是 " "（空白）就像你考試時交白卷一樣。那要怎麼判斷玩家是否輸入超過一個字母呢？ 就是這句程式碼： ``` } else if (你的猜測.lenght !== 1) { alert("請輸入一個字母以內的答案") ``` 我們就是用這句程式碼來判斷玩家輸入的是否超過一個字母以上。 最後一種狀況就是要判斷玩家輸入是否正確來修改遊戲狀態。這部份我們等下會講到。 ### 遊戲的狀態 一旦玩家輸入了正確的字母就必須以玩家的猜測來修改`陣列`數組。 要怎樣撰寫程式碼呢？看我表演就對了： ``` for (var j = 0; j < 神奇的單字分身.length; j++) { if (神奇的單字分身[j] === 你的猜測) { 空格[j] = 你的猜測; 陣列--; } } ``` 這樣我們就可以透過猜測的字母是否一致，來修改遊戲狀態 ### 結尾 正如我們看到，全部遊戲的主要循環一直是`空格們阿 > 0`，所以只要有字母還沒猜完， 這個循環就不會停下，直到`空格 = 0`時，才會結束此循環。 但玩家們都那麼努力，總要給一點獎勵吧！ ``` alert(空格.join(" ")); alert("太棒了！你完成了此單字！！" + 神奇的單字分身); ``` 這樣我們就完成了整個遊戲的程式碼啦！！鼓掌（％％％％） # 小總結 今天我們把這個主題給完結了！！下一次我們就會講到 DOM，相信有基礎的大家應該都知道這是什麼， 然後這次的程式碼很長，有時間的友友們可以幫我看一下有沒有地方出錯，我實在是看不過來這一長串，也請大大們多多包容，那沒事的話就下一章見嘍！拜拜！～ # 遊戲程式碼 現在我們將展示出整個遊戲的程式碼啦，順便說一下，本人是用 HTML 編寫此遊戲的，來吧！！ 遊戲程式碼！！！ ``` <!DOCTYPE html> <html> <head> <title>猜字遊戲</title> </head> <body> <h1>猜字遊戲</h1> <script> var 神奇的單字 = [ "abrogate", "repeal", "annul", "synonym"]; var 神奇的單字分身 = 神奇的單字[Math.floor(Math.random() * 神奇的單字.length)]; var 空格 = []; for (var i = 0; i < 神奇的單字.length; i++) { 空格[i] = "_"; } var 陣列 = 神奇的單字分身.length; while (陣列 > 0); alert(空格.join(" ")); var 你的猜測 = prompt("請猜一個字母，或者按取消來停止遊戲") if (你的猜測 === null) { break; } else if (你的猜測.lenght !== 1) { alert("請輸入一個字母以內的答案") } else { //我們必須用他的猜測來修改遊戲的狀態 } for (var j = 0; j < 神奇的單字分身.length; j++) { if (神奇的單字分身[j] === 你的猜測) { 空格[j] = 你的猜測; 陣列--; } } alert(空格.join(" ")); alert("太棒了！你完成了此單字！！" + 神奇的單字分身); </script> </body> </html>