新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

過編寫一個(gè)簡(jiǎn)單的游戲?qū)W習(xí)JavaScript

通過使用一個(gè)簡(jiǎn)單的游戲來練習(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)頁制作以及古城網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(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)輻射到古城省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

現(xiàn)在有很多東西要學(xué)習(xí)，開始學(xué)習(xí)這種流行語言的好方法是編寫一個(gè)簡(jiǎn)單的應(yīng)用程序以熟悉某些概念。最近，一些人寫了關(guān)于如何通過編寫簡(jiǎ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)建供玩家使用的簡(jiǎn)單界面。如果你不清楚，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)題、玩法說明，供玩家用來輸入和提交其猜測(cè)的交互式元素以及用于向玩家提供反饋的占位符：

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

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

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

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

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

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

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

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

JavaScript中的 Math 具有處理和數(shù)學(xué)相關(guān)的屬性和功能。你將使用兩個(gè)數(shù)學(xué)函數(shù)來生成隨機(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ù)。至此，你將需要其他步驟來解決這個(gè)問題。

現(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ù)該問題，即在結(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 具有不同類型的變量，你可以選擇這些類型，具體取決于你要如何使用該變量。對(duì)于此游戲，請(qǐng)使用 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ù)字輸入字段中獲得玩家的猜測(cè)，將其與你剛剛生成的隨機(jī)數(shù)進(jìn)行比較，并向玩家提供反饋，讓他們知道他們是否正確猜到了。為此，編寫一個(gè)函數(shù)。 函數(shù) 是執(zhí)行一定任務(wù)的代碼塊。函數(shù)是可以重用的，這意味著如果你需要多次運(yùn)行相同的代碼，則可以調(diào)用函數(shù)，而不必重寫執(zhí)行任務(wù)所需的所有步驟。

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

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

 
 
 
 
  
  
  
  function checkGuess() {}

使用 DOM

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

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

 
 
 
 
  
  
  
  let myGuess = guess.value

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

條件語句

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

你可以使用一系列條件語句來決定玩家將收到的反饋。條件語句 在運(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)算符 === 將玩家的猜測(cè)與游戲生成的隨機(jī)數(shù)進(jìn)行比較。比較運(yùn)算符檢查右側(cè)的值，將其與左側(cè)的值進(jìn)行比較，如果匹配則返回布爾值 true，否則返回布爾值 false。

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

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

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

 
 
 
 
  
  
  
  feedback.textContent = "You got it right!"

當(dāng)然，玩家很有可能在第一次嘗試時(shí)就猜錯(cuò)了，因此，如果 myGuess 和 randomNumber 不匹配，請(qǐng)給玩家一個(gè)線索，以幫助他們縮小猜測(cè)范圍。如果第一個(gè)條件失敗，則代碼將跳過該 if 語句中的代碼塊，并檢查下一個(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)聽器

如果你看上面的代碼，則會(huì)看到某些代碼在頁面加載時(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)聽” 這個(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ù)將獲得他們?cè)跀?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í)更多。

當(dāng)前名稱：過編寫一個(gè)簡(jiǎn)單的游戲?qū)W習(xí)JavaScript
當(dāng)前鏈接：http://fisionsoft.com.cn/article/coihpci.html