# Day 16 阿嬤的猜字遊戲!(上) Hangman 是一個猜字遊戲,讓主持人挑選一個單字,讓各位玩家盡情的猜。 例如:我們的主持人抽到了一個單字!Macular degeneration(黃斑病變) 不要問我為什麼要挑高難度的語詞:)第一位玩家可能會這樣寫: ``` M _ _ _ _ _ r d e g _ _ _ _ _ _ _ _ _ ``` 猜字的玩家會試著猜這個單字裡的字母。每猜對一個,就可以獲得 1 分, 他填了5個字母,他就可以獲得5分,反之,若他答錯了3個字母,他就會被扣 3 分,因為 錯一題扣一分: ``` M a n _ _ _ r d e g e n a _ _ t _ _ _ ``` 在這次猜字遊戲中,我們要讓 JavaScript 當我們的主持人,他會挑一個單詞 ,玩家們就會猜字母,以上就是簡略概要,只是希望可以再次透過這段文字來解釋規則,當然, 開發一個猜字遊戲也不是簡簡單單就能做出來的事,所以一樣會分上中下章,而且會引用到以前 學的`prompt`、`confirm`、`alert`等函數與各種程式碼,接下來都會一一位大家複習,那,準備好了嗎? 這篇的重點要來嘍。 ## 彈窗 問答題必須要用到彈窗阿! prompt = ![](https://i.imgur.com/M6OzXDU.png) ![](https://i.imgur.com/rhWtPlV.png) confirm = ![](https://i.imgur.com/59RGJHd.png) ![](https://i.imgur.com/uIUuZv7.png) alert = ![](https://i.imgur.com/baE89NK.png) ![](https://i.imgur.com/jWDCZEh.png) okok 你們都很聰明滴~ ## 設計遊戲 在撰寫 Hangman 遊戲前,可以先想一下這個遊戲的一些難題: *1. 怎麼讓 JavaScript 挑選一個單詞? 2. 怎麼接收玩家猜的字母? 3. 可以中途退出遊戲嗎? 4. 要怎麼判斷猜的字母正確? 5. 怎麼紀錄玩家猜對的字母並告訴玩家? 6. 怎麼結束遊戲?* 除了第一個任務和最後一個任務,其他的都必須重複多次 所以我們需要`While`迴圈或是`For`迴圈(自己去複習阿我就不一一介紹了) ### 紀錄單字的狀態 對於 Hangman 遊戲,這意味著要參賽者填入正確的字母,還要先展示這個神秘的單詞中, 有哪些空白,當然不可能一開始就給你看這個單詞怎麼拼,那還玩什麼?攤牌啦。 要怎麼做呢?只要當參賽者猜對了這個字母,填入它們即可。但嘴上說著很簡單,實際做起來, 難到連親媽都不認識:)(應該沒那麼難喔啾咪不要亂講) 在遊戲中,我們創建一個新的陣列,用來存放此單字的字母,簡單來講,就好像你買了個空罐子, 用來裝草莓果醬一樣的道理。把這個陣列命名為「單字」若參賽者猜的字母正確, 我們就把猜對的字母放到對應的空格,然後我們把 " _ " 當作空格。 我們把陣列當成一個空罐子好了。假如:我們買來的罐子原本是空的嘛,但是因為草莓果醬, 填滿了這個罐子,換句話說,當草莓果醬填滿了一整個罐子時,我們就知道這個參賽者獲勝了 因為我們用草莓果醬來比喻字母。 ### 迴圈 主要遊戲的過程都繞著 While 迴圈轉(ㄟ等等,我們繞著迴圈轉?)在這個循環中, 顯示單字的狀態是在猜測之中;要求玩家進行一次猜測。 幾乎所有的電腦遊戲都是繞著某種循環(我們繞著循環轉???),只是循環的快慢而已, 這些循環跟 Hangman 遊戲大大的關係,大部分的遊戲循環都這樣做: *1. 接收玩家的輸入 2. 修改遊戲狀態 3. 把狀態顯示給玩家* 控制台接收玩家輸入的字母,如果猜對了,就會更改此數組的狀態,並且告訴玩家。 若玩家完美猜出整個單字的話,控制台就會輸出完整的單詞,並且跳出一整個祝賀信息給玩家。 # 小總結 今天我們知道了猜字遊戲的概要和製作大綱與結構 ,然後我也是第一次做,有錯可以指正一下謝謝~ 下一章我們會講怎麼編寫此遊戲的程式碼,那就敬請期待吧!下回再見嘍掰掰!~