開頭前幾天一直覺得會翻船，自認無法撐到結束XD
結果沒想到苟延殘喘的來到第26天，真是奇蹟
等活動結束後，再找點時間把內容重新寫的更完善吧

最後幾天來挑戰，做一個前陣子很紅的小遊戲 wordle 猜字遊戲

遊戲規則

• 遊戲開始會給予一個 5 個字母的單字
• 玩家有 6 次猜的機會
• 如果答案沒猜中字母，顯示灰色
• 如果猜中字母但字母在不對的位置，則會顯示黃色
• 如果猜中字母但字母在對的位置，則會顯示綠色
• 按過的字母可以重複輸入（只是你會浪費次數xd

在6次內猜對單字為贏
而在6次外都沒猜到就輸掉本局遊戲

坊間也有其他變形的版本，像是改為猜注音的版本 注得了
遊戲原理也是大同小異，如果是注音版本，則要多花時間處理注音字符 encode / decode 部分
這次先不要太貪心哈哈，以原汁原味的英文版為主～

基本架構

來建立基本元件，規劃如下

• DashBoard.js 猜字遊戲的主面板
• GuessArea.js 放置玩家六次回答答案的區域
  • GuessRow.js 每次猜測的整列組件
    • Cell.js 單一字母的組件
• KeyboardArea.js 26 個字母 delete 跟 enter 按鈕的區域
  • KeyboardButton.js 按鈕元件 接收父層傳來的 props 並顯示對應的內容在畫面上

因為專案的檔案數量比之前幾個練習稍微多一點，所以這次使用 npx create-react-app FolderName 來開發，等結束之後再提供網址給大家玩

基本的樣式

簡單美化一下樣式，不要看起來太糟糕XDD
差不多長這樣就可以了

明天來寫遊戲的邏輯吧～

參考資料

https://www.nytimes.com/games/wordle/index.html