過編寫一個(gè)簡單的游戲?qū)W習(xí) JavaScript
通過使用一個(gè)簡單的游戲來練習(xí)一些基本的 JavaScript 概念，邁出創(chuàng)建交互性動(dòng)態(tài) Web 內(nèi)容的第一步。
可以肯定地說，沒有 JavaScript，大多數(shù)現(xiàn)代 Web 都將不存在。它是三種標(biāo)準(zhǔn) Web 技術(shù)（以及 HTML 和 CSS ）之一，它使任何人都可以創(chuàng)建我們在萬維網(wǎng)體驗(yàn)中所期待的交互式、動(dòng)態(tài)內(nèi)容。從 React 這樣的框架到 D3 這樣的數(shù)據(jù)可視化庫，很難想象沒有它的 Web。
現(xiàn)在有很多東西要學(xué)習(xí)，開始學(xué)習(xí)這種流行語言的好方法是編寫一個(gè)簡單的應(yīng)用程序以熟悉某些概念。 最近，一些人寫了關(guān)于如何通過編寫簡單的猜謎游戲來學(xué)習(xí)自己喜歡的語言的文章，因此這是一個(gè)很好的起點(diǎn)！
現(xiàn)在開始吧
JavaScript 有許多種風(fēng)格，但我將從最基本的開始，通常稱為 “普通 JavaScript”。 JavaScript 主要是一種客戶端腳本語言，因此它可以在任何標(biāo)準(zhǔn)瀏覽器中運(yùn)行，而無需安裝任何程序。你只需要一個(gè)代碼編輯器（Brackets 就是一個(gè)不錯(cuò)的選擇）和一個(gè) Web 瀏覽器。
HTML 用戶界面
JavaScript 在 Web 瀏覽器中運(yùn)行，并與其他標(biāo)準(zhǔn) Web 技術(shù) HTML 和 CSS 交互。要?jiǎng)?chuàng)建此游戲，你首先需要使用 HTML（超文本標(biāo)記語言）來創(chuàng)建供玩家使用的簡單界面。如果你不清楚，HTML 是一種標(biāo)記語言，用于為 Web 內(nèi)容提供結(jié)構(gòu)。
首先，先創(chuàng)建一個(gè) HTML 文件。該文件應(yīng)具有 .html 擴(kuò)展名，以使瀏覽器知道它是 HTML 文檔。你可以將文件命名為 guessingGame.html。
在此文件中使用一些基本的 HTML 標(biāo)簽來顯示游戲的標(biāo)題、玩法說明，供玩家用來輸入和提交其猜測的交互式元素以及用于向玩家提供反饋的占位符：
<!DOCTYPE><html><head><meta charset="UTF-8" /><title> JavaScript Guessing Game </title></head><body><h1>Guess the Number!</h1><p>I am thinking of a number between 1 and 100. Can you guess what it is?</p><label for="guess">My Guess</label><input type="number" id="guess"><input type="submit" id="submitGuess" value="Check My Guess"><p id="feedback"></p></body></html>
<h1> 和 <p> 元素使瀏覽器知道在頁面上顯示什么類型的文本。標(biāo)簽對 <h1></h1> 表示標(biāo)簽之間的文本（Guess the Number!）是標(biāo)題。后面的一組 <p> 標(biāo)簽表示帶有說明的短文本是一個(gè)段落。此代碼塊末尾的空 <p> 標(biāo)簽用作占位符，用于根據(jù)用戶的輸入提供一些反饋。
<script> 標(biāo)簽
在網(wǎng)頁中包含 JavaScript 的方法有很多種，但是對于像這樣的簡短腳本，可以使用一組 <script> 標(biāo)簽并將 JavaScript 直接寫在 HTML 文件中。 這些 <script> 標(biāo)簽應(yīng)位于 HTML 文件末尾附近的 </body> 標(biāo)簽之前。
現(xiàn)在，你可以開始在這兩個(gè)腳本標(biāo)簽之間編寫 JavaScript。 最終文件如下所示：
<!DOCTYPE><html><head><meta charset="UTF-8" /><title> JavaScript Guessing Game </title></head><body><h1>Guess the Number!</h1><p>I am thinking of a number between 1 and 100. Can you guess what it is?</p><form><label for="guess">My Guess</label><input type="number" id="guess"><input type="submit" id="submitGuess" value="Check My Guess"></form><p id="feedback"></p><script>const randomNumber = Math.floor(Math.random() * 100) + 1console.log('Random Number', randomNumber)function checkGuess() {let myGuess = guess.valueif (myGuess === randomNumber) {feedback.textContent = "You got it right!"} else if (myGuess > randomNumber) {feedback.textContent = "Your guess was " + myGuess + ". That's too high. Try Again!"} else if (myGuess < randomNumber) {feedback.textContent = "Your guess was " + myGuess + ". That's too low. Try Again!"}}submitGuess.addEventListener('click', checkGuess)</script></body></html>
要在瀏覽器中運(yùn)行此文件，請雙擊文件或打開你喜歡的瀏覽器,點(diǎn)擊菜單，然后選擇文件->打開文件。（如果使用 Brackets 軟件，也可以使用角落處的閃電圖標(biāo)在瀏覽器中打開文件）。
生成偽隨機(jī)數(shù)
猜謎游戲的第一步是為玩家生成一個(gè)數(shù)字供玩家猜測。JavaScript 包含幾個(gè)內(nèi)置的全局對象，可幫助你編寫代碼。要生成隨機(jī)數(shù)，請使用 Math 對象。
JavaScript中的 Math 具有處理和數(shù)學(xué)相關(guān)的屬性和功能。你將使用兩個(gè)數(shù)學(xué)函數(shù)來生成隨機(jī)數(shù)，供你的玩家猜測。
Math.random()，會(huì)將生成一個(gè)介于 0 和 1 之間的偽隨機(jī)數(shù)。（Math.random 包含 0 但不包含 1。這意味著該函數(shù)可以生成 0 ，永遠(yuǎn)不會(huì)產(chǎn)生 1）
對于此游戲，請將隨機(jī)數(shù)設(shè)置在 1 到 100 之間以縮小玩家的選擇范圍。取剛剛生成的小數(shù)，然后乘以 100，以產(chǎn)生一個(gè)介于 0 到……甚至不是 100 之間的小數(shù)。至此，你將需要其他步驟來解決這個(gè)問題。
現(xiàn)在，你的數(shù)字仍然是小數(shù)，但你希望它是一個(gè)整數(shù)。為此，你可以使用屬于 Math 對象的另一個(gè)函數(shù) Math.floor()。Math.floor() 的目的是返回小于或等于你作為參數(shù)指定的數(shù)字的最大整數(shù)，這意味著它會(huì)四舍五入為最接近的整數(shù)：
Math.floor(Math.random() * 100)
這樣你將得到 0 到 99 之間的整數(shù)，這不是你想要的范圍。你可以在最后一步修復(fù)該問題，即在結(jié)果中加 1。瞧！現(xiàn)在，你有一個(gè)（有點(diǎn)）隨機(jī)生成的數(shù)字，介于 1 到 100 之間：
Math.floor(Math.random() * 100) + 1
變量
現(xiàn)在，你需要存儲(chǔ)隨機(jī)生成的數(shù)字，以便可以將其與玩家的猜測進(jìn)行比較。為此，你可以將其存儲(chǔ)到一個(gè) 變量。
JavaScript 具有不同類型的變量，你可以選擇這些類型，具體取決于你要如何使用該變量。對于此游戲，請使用 const 和 let。
let用于指示變量在整個(gè)程序中可以改變。const用于指示變量不應(yīng)該被修改。
const 和 let 還有很多要說的，但現(xiàn)在知道這些就足夠了。
隨機(jī)數(shù)在游戲中僅生成一次，因此你將使用 const 變量來保存該值。你想給變量起一個(gè)清楚地表明要存儲(chǔ)什么值的名稱，因此將其命名為 randomNumber：
const randomNumber
有關(guān)命名的注意事項(xiàng)：JavaScript 中的變量和函數(shù)名稱以駝峰形式編寫。如果只有一個(gè)單詞，則全部以小寫形式書寫。如果有多個(gè)單詞，則第一個(gè)單詞均為小寫，其他任何單詞均以大寫字母開頭，且單詞之間沒有空格。
打印到控制臺(tái)
通常，你不想向任何人顯示隨機(jī)數(shù)，但是開發(fā)人員可能想知道生成的數(shù)字以使用它來幫助調(diào)試代碼。 使用 JavaScript，你可以使用另一個(gè)內(nèi)置函數(shù) console.log() 將數(shù)字輸出到瀏覽器的控制臺(tái)。
大多數(shù)瀏覽器都包含開發(fā)人員工具，你可以通過按鍵盤上的 F12 鍵來打開它們。從那里，你應(yīng)該看到一個(gè) 控制臺(tái) 標(biāo)簽。打印到控制臺(tái)的所有信息都將顯示在此處。由于到目前為止編寫的代碼將在瀏覽器加載后立即運(yùn)行，因此，如果你查看控制臺(tái)，你應(yīng)該會(huì)看到剛剛生成的隨機(jī)數(shù)！
Javascript game with console
函數(shù)
接下來，你需要一種方法來從數(shù)字輸入字段中獲得玩家的猜測，將其與你剛剛生成的隨機(jī)數(shù)進(jìn)行比較，并向玩家提供反饋，讓他們知道他們是否正確猜到了。為此，編寫一個(gè)函數(shù)。 函數(shù) 是執(zhí)行一定任務(wù)的代碼塊。函數(shù)是可以重用的，這意味著如果你需要多次運(yùn)行相同的代碼，則可以調(diào)用函數(shù)，而不必重寫執(zhí)行任務(wù)所需的所有步驟。
根據(jù)你使用的 JavaScript 版本，有許多不同的方法來編寫或聲明函數(shù)。由于這是該語言的基礎(chǔ)入門，因此請使用基本函數(shù)語法聲明函數(shù)。
以關(guān)鍵字 function 開頭，然后起一個(gè)函數(shù)名。好的做法是使用一個(gè)描述該函數(shù)的功能的名稱。在這個(gè)例子中，你正在檢查玩家的猜測的數(shù)，因此此函數(shù)的名字可以是 checkGuess。在函數(shù)名稱之后，寫上一組小括號，然后寫上一組花括號。 你將在以下花括號之間編寫函數(shù)的主體：
function checkGuess() {}
使用 DOM
JavaScript 的目的之一是與網(wǎng)頁上的 HTML 交互。它通過文檔對象模型（DOM）進(jìn)行此操作，DOM 是 JavaScript 用于訪問和更改網(wǎng)頁信息的對象。現(xiàn)在，你需要從 HTML 中獲取數(shù)字輸入字段中玩家的猜測。你可以使用分配給 HTML 元素的 id 屬性（在這種情況下為 guess）來做到這一點(diǎn)：
<input type="number" id="guess">
JavaScript 可以通過訪問玩家輸入到數(shù)字輸入字段中的數(shù)來獲取其值。你可以通過引用元素的 ID 并在末尾添加 .value 來實(shí)現(xiàn)。這次，使用 let 定義的變量來保存用戶的猜測值：
let myGuess = guess.value
玩家在數(shù)字輸入字段中輸入的任何數(shù)字都將被分配給 checkGuess 函數(shù)中的 myGuess 變量。
條件語句
下一步是將玩家的猜測與游戲產(chǎn)生的隨機(jī)數(shù)進(jìn)行比較。你還想給玩家反饋，讓他們知道他們的猜測是太高，太低還是正確。
你可以使用一系列條件語句來決定玩家將收到的反饋。條件語句 在運(yùn)行代碼塊之前檢查是否滿足條件。如果不滿足條件，則代碼停止，繼續(xù)檢查下一個(gè)條件，或者繼續(xù)執(zhí)行其余代碼，而無需執(zhí)行條件塊中的代碼：
if (myGuess === randomNumber){feedback.textContent = "You got it right!"}else if(myGuess > randomNumber) {feedback.textContent = "Your guess was " + myGuess + ". That's too high. Try Again!"}else if(myGuess < randomNumber) {feedback.textContent = "Your guess was " + myGuess + ". That's too low. Try Again!"}
第一個(gè)條件塊使用比較運(yùn)算符 === 將玩家的猜測與游戲生成的隨機(jī)數(shù)進(jìn)行比較。比較運(yùn)算符檢查右側(cè)的值，將其與左側(cè)的值進(jìn)行比較，如果匹配則返回布爾值 true，否則返回布爾值 false。
如果數(shù)字匹配（猜對了?。?，為了讓玩家知道。通過將文本添加到具有 id 屬性 feedback 的 <p> 標(biāo)記中來操作 DOM。就像上面的 guess.value 一樣，除了不是從 DOM 獲取信息，而是更改其中的信息。<p> 元素沒有像 <input> 元素那樣的值，而是具有文本，因此請使用 .textContent 訪問元素并設(shè)置要顯示的文本：
feedback.textContent = "You got it right!"
當(dāng)然，玩家很有可能在第一次嘗試時(shí)就猜錯(cuò)了，因此，如果 myGuess 和 randomNumber 不匹配，請給玩家一個(gè)線索，以幫助他們縮小猜測范圍。如果第一個(gè)條件失敗，則代碼將跳過該 if 語句中的代碼塊，并檢查下一個(gè)條件是否為 true。 這使你進(jìn)入 else if 塊：
else if(myGuess > randomNumber) {feedback.textContent = "Your guess was " + myGuess + ". That's too high. Try Again!"}
如果你將其作為句子閱讀，則可能是這樣的：“如果玩家的猜測等于隨機(jī)數(shù)，請讓他們知道他們猜對了。否則，請檢查玩家的猜測是否大于 randomNumber，如果是，則顯示玩家的猜測并告訴他們太高了。”
最后一種可能性是玩家的猜測低于隨機(jī)數(shù)。 要檢查這一點(diǎn)，再添加一個(gè) else if 塊：
else if(myGuess < randomNumber) {feedback.textContent = "Your guess was " + myGuess + ". That's too low. Try Again!"}
用戶事件和事件監(jiān)聽器
如果你看上面的代碼，則會(huì)看到某些代碼在頁面加載時(shí)自動(dòng)運(yùn)行，但有些則不會(huì)。你想在玩游戲之前生成隨機(jī)數(shù)，但是你不想在玩家將數(shù)字輸入到數(shù)字輸入字段并準(zhǔn)備檢查它之前檢查其猜測。
生成隨機(jī)數(shù)并將其打印到控制臺(tái)的代碼不在函數(shù)的范圍內(nèi)，因此它將在瀏覽器加載腳本時(shí)自動(dòng)運(yùn)行。 但是，要使函數(shù)內(nèi)部的代碼運(yùn)行，你必須對其進(jìn)行調(diào)用。
調(diào)用函數(shù)有幾種方法。在此，你希望該函數(shù)在用戶單擊 “Check My Guess” 按鈕時(shí)運(yùn)行。單擊按鈕將創(chuàng)建一個(gè)用戶事件，然后 JavaScript 可以 “監(jiān)聽” 這個(gè)事件，以便知道何時(shí)需要運(yùn)行函數(shù)。
代碼的最后一行將事件偵聽器添加到按鈕上，以在單擊按鈕時(shí)調(diào)用函數(shù)。當(dāng)它“聽到”該事件時(shí)，它將運(yùn)行分配給事件偵聽器的函數(shù)：
submitGuess.addEventListener('click', checkGuess)
就像訪問 DOM 元素的其他實(shí)例一樣，你可以使用按鈕的 ID 告訴 JavaScript 與哪個(gè)元素進(jìn)行交互。 然后，你可以使用內(nèi)置的 addEventListener 函數(shù)來告訴 JavaScript 要監(jiān)聽的事件。
你已經(jīng)看到了帶有參數(shù)的函數(shù)，但花點(diǎn)時(shí)間看一下它是如何工作的。參數(shù)是函數(shù)執(zhí)行其任務(wù)所需的信息。并非所有函數(shù)都需要參數(shù)，但是 addEventListener 函數(shù)需要兩個(gè)參數(shù)。它采用的第一個(gè)參數(shù)是將為其監(jiān)聽的用戶事件的名稱。用戶可以通過多種方式與 DOM 交互，例如鍵入、移動(dòng)鼠標(biāo)，鍵盤上的 TAB 鍵和粘貼文本。在這種情況下，你正在監(jiān)聽的用戶事件是單擊按鈕，因此第一個(gè)參數(shù)將是 click。
addEventListener的第二個(gè)所需的信息是用戶單擊按鈕時(shí)要運(yùn)行的函數(shù)的名稱。 這里我們需要 checkGuess 函數(shù)。
現(xiàn)在，當(dāng)玩家按下 “Check My Guess” 按鈕時(shí)，checkGuess 函數(shù)將獲得他們在數(shù)字輸入字段中輸入的值，將其與隨機(jī)數(shù)進(jìn)行比較，并在瀏覽器中顯示反饋，以使玩家知道他們猜的怎么樣。 太棒了！你的游戲已準(zhǔn)備就緒。
學(xué)習(xí) JavaScript 以獲取樂趣和收益
這一點(diǎn)點(diǎn)的平凡無奇的 JavaScript 只是這個(gè)龐大的生態(tài)系統(tǒng)所提供功能的一小部分。這是一種值得花時(shí)間投入學(xué)習(xí)的語言，我鼓勵(lì)你繼續(xù)挖掘并學(xué)習(xí)更多。
