ItIron2022 Javascript猜數字遊戲一直是很熱門的程式語言初學專案之一，可以很好的練習基本的條件式處理，但總是用打字去猜也是挺沒意思的，今天我們就試著打造一個用語音玩的猜數字遊戲吧！
我們今天的目標也很簡單，遊戲開始時會預設一個1~100的數字，你要做的就是對麥克風猜出你下一個數字，並根據給的提示修正數字直到你猜對為止。
Step1: 專案結構
該做的我相信你都知道了，請你先建立以下三個檔案並寫入對應的內容，js檔案同樣暫時先留空白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guess Number Game</title>
<script src="./script.js"></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<img src="./mic.png" alt="microphone" />
<h1>Guess a number between 1-100</h1>
<h3>Don't type! Just say the number to your microphone</h3>
<div class="msg" id="msg"></div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background: #2f3542;
min-height: 100vh;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1,
h3 {
margin-bottom: 0;
}
p {
line-height: 1.5;
margin: 0;
}
.play-btn {
padding: 8px 15px;
border: 0;
background: #f4f4f4;
border-radius: 5px;
margin-top: 10px;
}
.msg {
font-size: 1.5em;
margin-top: 40px;
}
.box {
border: 1px solid #dedede;
display: inline-block;
font-size: 30px;
margin: 20px;
padding: 10px;
}
到這邊為止你應該能看到以下的畫面了！這次專案的結構非常的單純，我們會將重心都放在js的處理上。
Step2: 事前規劃
整個專案要做的事情其實不多，大致上我們會有以下的步驟
除了語音辨識的部分我們都已經在之前的專案就做過了，而為了達到語音辨識的目的我們需要一個新的API使用，也就是SpeechRecognition，目前這仍是一個實驗性質的API，在部分瀏覽器(例如firefox)暫時不支援，但我們仍能用它來找點樂子！
語音辨識的流程相當直白，我們可以先看一下官方給的範例
const grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
const diagnostic = document.querySelector('.output');
const bg = document.querySelector('html');
document.body.onclick = () => {
recognition.start();
console.log('Ready to receive a color command.');
}
recognition.onresult = (event) => {
const color = event.results[0][0].transcript;
diagnostic.textContent = `Result received: ${color}`;
bg.style.backgroundColor = color;
}
我知道你腦袋在想什麼，先把「這是三小」的想法丟一邊，我們來拆解一下整個結構，這也是看官方文件時你需要的技巧，找出自己真正要的資訊。
這麼一來一切就明朗多了吧？我們知道當我們啟動語音辨識後可以監聽'result'事件去辨別使用者輸入的內容，這麼一來我們所有需要的判斷就可以在那邊完成了！ 至於判斷要做什麼我想你也心裡有底了，真的一點也不複雜的。
recognition.addEventListener('result', (e) => {
若猜中數字
顯示結束畫面
反之
顯示太大、太小或是無法判別等提示
})
今天就到此為止，我們先完成了UI的部分同時劇透了後續要用的API以及一些事前的規劃，坦白說到這邊你們應該有能力自己完成後續的部分了，我們明天就會完成後續的邏輯處理，到時候可以一起對個答案！
文章中的範例程式碼可以在這邊取得，歡迎自行取用
Danny，我順利的通過phone screen的階段了，HR跟我說之後會有白板題的測驗，我該怎麼準備呢？
我實在很想跟你說就刷唄，但事實上我確實有一些意見可以給你。白板題雖然對很多人來說(包含我在內)都是該死的惡夢，很多時候你思路一錯就萬劫不復了，題型的部分你可以藉由反覆刷題增加熟練度，但很多時候你不免會遇到一些完全沒見過的題目讓你必須從頭開始思考，這種時候如何整理你的思緒就變得很重要。不要太早放棄，你的程式碼並不需要會動，你要做的是在有限的時間內盡量展現你解題的思路，這時候互動就很重要！ 面試官一般還是挺有人性的，你可以問他一些問題，有時甚至他們會給你一點引導，悶著不吭聲最後吃虧的鐵定是你，畢竟這也是一種與他人協作的表現。當你遇到真的完全沒頭緒的問題時，我會建議你藉由覆述題目、確認條件與極端值之類的作法給自己一些額外的思考時間，整理過思緒後再開始！不管怎麼樣都不要交白卷，即便你真的不懂也要具體表達出你是卡在哪一個部分，白卷對我來說永遠是最下下策，因為你連卡關的部分都沒有描述，這要他人如何協助你？
本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!
iThome鐵人賽
看影片追技術