---
# System prepended metadata

title: Day 18 阿嬤的猜字遊戲！（下）

---

# 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>