通過(guò)使用一個(gè)簡(jiǎn)單的游戲來(lái)練習(xí)一些基本的 JavaScript 概念，邁出創(chuàng)建交互性動(dòng)態(tài) Web 內(nèi)容的第一步。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括古城網(wǎng)站建設(shè)、古城網(wǎng)站制作、古城網(wǎng)頁(yè)制作以及古城網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，古城網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到古城省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

可以肯定地說(shuō)，沒(méi)有 JavaScript，大多數(shù)現(xiàn)代 Web 都將不存在。它是三種標(biāo)準(zhǔn) Web 技術(shù)（以及 HTML 和 CSS ）之一，它使任何人都可以創(chuàng)建我們?cè)谌f(wàn)維網(wǎng)體驗(yàn)中所期待的交互式、動(dòng)態(tài)內(nèi)容。從 React 這樣的框架到 D3 這樣的數(shù)據(jù)可視化庫(kù)，很難想象沒(méi)有它的 Web。

現(xiàn)在有很多東西要學(xué)習(xí)，開(kāi)始學(xué)習(xí)這種流行語(yǔ)言的好方法是編寫(xiě)一個(gè)簡(jiǎn)單的應(yīng)用程序以熟悉某些概念。 最近，一些人寫(xiě)了關(guān)于如何通過(guò)編寫(xiě)簡(jiǎn)單的猜謎游戲來(lái)學(xué)習(xí)自己喜歡的語(yǔ)言的文章，因此這是一個(gè)很好的起點(diǎn)！

現(xiàn)在開(kāi)始吧

JavaScript 有許多種風(fēng)格，但我將從最基本的開(kāi)始，通常稱為 “普通 JavaScript”。 JavaScript 主要是一種客戶端腳本語(yǔ)言，因此它可以在任何標(biāo)準(zhǔn)瀏覽器中運(yùn)行，而無(wú)需安裝任何程序。你只需要一個(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)記語(yǔ)言）來(lái)創(chuàng)建供玩家使用的簡(jiǎn)單界面。如果你不清楚，HTML 是一種標(biāo)記語(yǔ)言，用于為 Web 內(nèi)容提供結(jié)構(gòu)。

首先，先創(chuàng)建一個(gè) HTML 文件。該文件應(yīng)具有 .html 擴(kuò)展名，以使瀏覽器知道它是 HTML 文檔。你可以將文件命名為 guessingGame.html。

在此文件中使用一些基本的 HTML 標(biāo)簽來(lái)顯示游戲的標(biāo)題、玩法說(shuō)明，供玩家用來(lái)輸入和提交其猜測(cè)的交互式元素以及用于向玩家提供反饋的占位符：

 
 
 
 

  
  
  
  

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
Guess the Number!
  
  
  
  
 
I am thinking of a number between 1 and 100. Can you guess what it is?
  
  
  
  
 
  
  
  
  
 My Guess
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 

  
  
  
  
 
  
  
  
  
 
 
 
 
 

 和 

 元素使瀏覽器知道在頁(yè)面上顯示什么類(lèi)型的文本。標(biāo)簽對(duì) 

 表示標(biāo)簽之間的文本（Guess the Number!）是標(biāo)題。后面的一組 

 標(biāo)簽表示帶有說(shuō)明的短文本是一個(gè)段落。此代碼塊末尾的空 

 標(biāo)簽用作占位符，用于根據(jù)用戶的輸入提供一些反饋。

要在瀏覽器中運(yùn)行此文件，請(qǐng)雙擊文件或打開(kāi)你喜歡的瀏覽器,點(diǎn)擊菜單，然后選擇文件->打開(kāi)文件。（如果使用 Brackets 軟件，也可以使用角落處的閃電圖標(biāo)在瀏覽器中打開(kāi)文件）。

生成偽隨機(jī)數(shù)

猜謎游戲的第一步是為玩家生成一個(gè)數(shù)字供玩家猜測(cè)。JavaScript 包含幾個(gè)內(nèi)置的全局對(duì)象，可幫助你編寫(xiě)代碼。要生成隨機(jī)數(shù)，請(qǐng)使用 Math 對(duì)象。

JavaScript中的 Math 具有處理和數(shù)學(xué)相關(guān)的屬性和功能。你將使用兩個(gè)數(shù)學(xué)函數(shù)來(lái)生成隨機(jī)數(shù)，供你的玩家猜測(cè)。

Math.random()，會(huì)將生成一個(gè)介于 0 和 1 之間的偽隨機(jī)數(shù)。（Math.random 包含 0 但不包含 1。這意味著該函數(shù)可以生成 0 ，永遠(yuǎn)不會(huì)產(chǎn)生 1）

對(duì)于此游戲，請(qǐng)將隨機(jī)數(shù)設(shè)置在 1 到 100 之間以縮小玩家的選擇范圍。取剛剛生成的小數(shù)，然后乘以 100，以產(chǎn)生一個(gè)介于 0 到……甚至不是 100 之間的小數(shù)。至此，你將需要其他步驟來(lái)解決這個(gè)問(wèn)題。

現(xiàn)在，你的數(shù)字仍然是小數(shù)，但你希望它是一個(gè)整數(shù)。為此，你可以使用屬于 Math 對(duì)象的另一個(gè)函數(shù) Math.floor()。Math.floor() 的目的是返回小于或等于你作為參數(shù)指定的數(shù)字的最大整數(shù)，這意味著它會(huì)四舍五入為最接近的整數(shù)：

 
 
 
 

  
  
  
  
Math.floor(Math.random() * 100)
 
 
 
 

這樣你將得到 0 到 99 之間的整數(shù)，這不是你想要的范圍。你可以在最后一步修復(fù)該問(wèn)題，即在結(jié)果中加 1。瞧！現(xiàn)在，你有一個(gè)（有點(diǎn)）隨機(jī)生成的數(shù)字，介于 1 到 100 之間：

 
 
 
 

  
  
  
  
Math.floor(Math.random() * 100) + 1
 
 
 
 

變量

現(xiàn)在，你需要存儲(chǔ)隨機(jī)生成的數(shù)字，以便可以將其與玩家的猜測(cè)進(jìn)行比較。為此，你可以將其存儲(chǔ)到一個(gè) 變量。

JavaScript 具有不同類(lèi)型的變量，你可以選擇這些類(lèi)型，具體取決于你要如何使用該變量。對(duì)于此游戲，請(qǐng)使用 const 和 let。

• let 用于指示變量在整個(gè)程序中可以改變。
• const 用于指示變量不應(yīng)該被修改。

const 和 let 還有很多要說(shuō)的，但現(xiàn)在知道這些就足夠了。

隨機(jī)數(shù)在游戲中僅生成一次，因此你將使用 const 變量來(lái)保存該值。你想給變量起一個(gè)清楚地表明要存儲(chǔ)什么值的名稱，因此將其命名為 randomNumber：

 
 
 
 

  
  
  
  
const randomNumber
 
 
 
 

有關(guān)命名的注意事項(xiàng)：JavaScript 中的變量和函數(shù)名稱以駝峰形式編寫(xiě)。如果只有一個(gè)單詞，則全部以小寫(xiě)形式書(shū)寫(xiě)。如果有多個(gè)單詞，則第一個(gè)單詞均為小寫(xiě)，其他任何單詞均以大寫(xiě)字母開(kāi)頭，且單詞之間沒(méi)有空格。

打印到控制臺(tái)

通常，你不想向任何人顯示隨機(jī)數(shù)，但是開(kāi)發(fā)人員可能想知道生成的數(shù)字以使用它來(lái)幫助調(diào)試代碼。 使用 JavaScript，你可以使用另一個(gè)內(nèi)置函數(shù) console.log() 將數(shù)字輸出到瀏覽器的控制臺(tái)。

大多數(shù)瀏覽器都包含開(kāi)發(fā)人員工具，你可以通過(guò)按鍵盤(pán)上的 F12 鍵來(lái)打開(kāi)它們。從那里，你應(yīng)該看到一個(gè) 控制臺(tái) 標(biāo)簽。打印到控制臺(tái)的所有信息都將顯示在此處。由于到目前為止編寫(xiě)的代碼將在瀏覽器加載后立即運(yùn)行，因此，如果你查看控制臺(tái)，你應(yīng)該會(huì)看到剛剛生成的隨機(jī)數(shù)！

Javascript game with console

函數(shù)

接下來(lái)，你需要一種方法來(lái)從數(shù)字輸入字段中獲得玩家的猜測(cè)，將其與你剛剛生成的隨機(jī)數(shù)進(jìn)行比較，并向玩家提供反饋，讓他們知道他們是否正確猜到了。為此，編寫(xiě)一個(gè)函數(shù)。 函數(shù) 是執(zhí)行一定任務(wù)的代碼塊。函數(shù)是可以重用的，這意味著如果你需要多次運(yùn)行相同的代碼，則可以調(diào)用函數(shù)，而不必重寫(xiě)執(zhí)行任務(wù)所需的所有步驟。

根據(jù)你使用的 JavaScript 版本，有許多不同的方法來(lái)編寫(xiě)或聲明函數(shù)。由于這是該語(yǔ)言的基礎(chǔ)入門(mén)，因此請(qǐng)使用基本函數(shù)語(yǔ)法聲明函數(shù)。

以關(guān)鍵字 function 開(kāi)頭，然后起一個(gè)函數(shù)名。好的做法是使用一個(gè)描述該函數(shù)的功能的名稱。在這個(gè)例子中，你正在檢查玩家的猜測(cè)的數(shù)，因此此函數(shù)的名字可以是 checkGuess。在函數(shù)名稱之后，寫(xiě)上一組小括號(hào)，然后寫(xiě)上一組花括號(hào)。 你將在以下花括號(hào)之間編寫(xiě)函數(shù)的主體：

 
 
 
 

  
  
  
  
function checkGuess() {}
 
 
 
 

使用 DOM

JavaScript 的目的之一是與網(wǎng)頁(yè)上的 HTML 交互。它通過(guò)文檔對(duì)象模型（DOM）進(jìn)行此操作，DOM 是 JavaScript 用于訪問(wèn)和更改網(wǎng)頁(yè)信息的對(duì)象?，F(xiàn)在，你需要從 HTML 中獲取數(shù)字輸入字段中玩家的猜測(cè)。你可以使用分配給 HTML 元素的 id 屬性（在這種情況下為 guess）來(lái)做到這一點(diǎn)：

JavaScript 可以通過(guò)訪問(wèn)玩家輸入到數(shù)字輸入字段中的數(shù)來(lái)獲取其值。你可以通過(guò)引用元素的 ID 并在末尾添加 .value 來(lái)實(shí)現(xiàn)。這次，使用 let 定義的變量來(lái)保存用戶的猜測(cè)值：

 
 
 
 

  
  
  
  
let myGuess = guess.value
 
 
 
 

玩家在數(shù)字輸入字段中輸入的任何數(shù)字都將被分配給 checkGuess 函數(shù)中的 myGuess 變量。

條件語(yǔ)句

下一步是將玩家的猜測(cè)與游戲產(chǎn)生的隨機(jī)數(shù)進(jìn)行比較。你還想給玩家反饋，讓他們知道他們的猜測(cè)是太高，太低還是正確。

你可以使用一系列條件語(yǔ)句來(lái)決定玩家將收到的反饋。條件語(yǔ)句 在運(yùn)行代碼塊之前檢查是否滿足條件。如果不滿足條件，則代碼停止，繼續(xù)檢查下一個(gè)條件，或者繼續(xù)執(zhí)行其余代碼，而無(wú)需執(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)算符 === 將玩家的猜測(cè)與游戲生成的隨機(jī)數(shù)進(jìn)行比較。比較運(yùn)算符檢查右側(cè)的值，將其與左側(cè)的值進(jìn)行比較，如果匹配則返回布爾值 true，否則返回布爾值 false。

如果數(shù)字匹配（猜對(duì)了！），為了讓玩家知道。通過(guò)將文本添加到具有 id 屬性 feedback 的 

 標(biāo)記中來(lái)操作 DOM。就像上面的 guess.value 一樣，除了不是從 DOM 獲取信息，而是更改其中的信息。

 元素沒(méi)有像  元素那樣的值，而是具有文本，因此請(qǐng)使用 .textContent 訪問(wèn)元素并設(shè)置要顯示的文本：

 
 
 
 

  
  
  
  
feedback.textContent = "You got it right!"
 
 
 
 

當(dāng)然，玩家很有可能在第一次嘗試時(shí)就猜錯(cuò)了，因此，如果 myGuess 和 randomNumber 不匹配，請(qǐng)給玩家一個(gè)線索，以幫助他們縮小猜測(cè)范圍。如果第一個(gè)條件失敗，則代碼將跳過(guò)該 if 語(yǔ)句中的代碼塊，并檢查下一個(gè)條件是否為 true。 這使你進(jìn)入 else if 塊：

 
 
 
 

  
  
  
  
else if(myGuess > randomNumber) {
  
  
  
  
  feedback.textContent = "Your guess was " + myGuess + ". That's too high. Try Again!"
  
  
  
  
}
 
 
 
 

如果你將其作為句子閱讀，則可能是這樣的：“如果玩家的猜測(cè)等于隨機(jī)數(shù)，請(qǐng)讓他們知道他們猜對(duì)了。否則，請(qǐng)檢查玩家的猜測(cè)是否大于 randomNumber，如果是，則顯示玩家的猜測(cè)并告訴他們太高了?！?/p>

最后一種可能性是玩家的猜測(cè)低于隨機(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)聽(tīng)器

如果你看上面的代碼，則會(huì)看到某些代碼在頁(yè)面加載時(shí)自動(dòng)運(yùn)行，但有些則不會(huì)。你想在玩游戲之前生成隨機(jī)數(shù)，但是你不想在玩家將數(shù)字輸入到數(shù)字輸入字段并準(zhǔn)備檢查它之前檢查其猜測(cè)。

生成隨機(jī)數(shù)并將其打印到控制臺(tái)的代碼不在函數(shù)的范圍內(nèi)，因此它將在瀏覽器加載腳本時(shí)自動(dòng)運(yùn)行。 但是，要使函數(shù)內(nèi)部的代碼運(yùn)行，你必須對(duì)其進(jìn)行調(diào)用。

調(diào)用函數(shù)有幾種方法。在此，你希望該函數(shù)在用戶單擊 “Check My Guess” 按鈕時(shí)運(yùn)行。單擊按鈕將創(chuàng)建一個(gè)用戶事件，然后 JavaScript 可以 “監(jiān)聽(tīng)” 這個(gè)事件，以便知道何時(shí)需要運(yùn)行函數(shù)。

代碼的最后一行將事件偵聽(tīng)器添加到按鈕上，以在單擊按鈕時(shí)調(diào)用函數(shù)。當(dāng)它“聽(tīng)到”該事件時(shí)，它將運(yùn)行分配給事件偵聽(tīng)器的函數(shù)：

 
 
 
 

  
  
  
  
submitGuess.addEventListener('click', checkGuess)
 
 
 
 

就像訪問(wèn) DOM 元素的其他實(shí)例一樣，你可以使用按鈕的 ID 告訴 JavaScript 與哪個(gè)元素進(jìn)行交互。 然后，你可以使用內(nèi)置的 addEventListener 函數(shù)來(lái)告訴 JavaScript 要監(jiān)聽(tīng)的事件。

你已經(jīng)看到了帶有參數(shù)的函數(shù)，但花點(diǎn)時(shí)間看一下它是如何工作的。參數(shù)是函數(shù)執(zhí)行其任務(wù)所需的信息。并非所有函數(shù)都需要參數(shù)，但是 addEventListener 函數(shù)需要兩個(gè)參數(shù)。它采用的第一個(gè)參數(shù)是將為其監(jiān)聽(tīng)的用戶事件的名稱。用戶可以通過(guò)多種方式與 DOM 交互，例如鍵入、移動(dòng)鼠標(biāo)，鍵盤(pán)上的 TAB 鍵和粘貼文本。在這種情況下，你正在監(jiān)聽(tīng)的用戶事件是單擊按鈕，因此第一個(gè)參數(shù)將是 click。

addEventListener的第二個(gè)所需的信息是用戶單擊按鈕時(shí)要運(yùn)行的函數(shù)的名稱。 這里我們需要 checkGuess 函數(shù)。

現(xiàn)在，當(dāng)玩家按下 “Check My Guess” 按鈕時(shí)，checkGuess 函數(shù)將獲得他們?cè)跀?shù)字輸入字段中輸入的值，將其與隨機(jī)數(shù)進(jìn)行比較，并在瀏覽器中顯示反饋，以使玩家知道他們猜的怎么樣。 太棒了！你的游戲已準(zhǔn)備就緒。

學(xué)習(xí) JavaScript 以獲取樂(lè)趣和收益

這一點(diǎn)點(diǎn)的平凡無(wú)奇的 JavaScript 只是這個(gè)龐大的生態(tài)系統(tǒng)所提供功能的一小部分。這是一種值得花時(shí)間投入學(xué)習(xí)的語(yǔ)言，我鼓勵(lì)你繼續(xù)挖掘并學(xué)習(xí)更多。

名稱欄目：過(guò)編寫(xiě)一個(gè)簡(jiǎn)單的游戲?qū)W習(xí)JavaScript
本文網(wǎng)址：http://m.5511xx.com/article/coihpci.html