JavaScript 猜数字游戏实战

概述

通过开发一个猜数字游戏，我们将学习 JavaScript 的基本概念和编程思维。

学习目标

掌握 JavaScript 基础语法
学习程序设计思维
理解代码组织方式

前置知识

HTML 基础
CSS 基础
JavaScript 基本概念

案例：构建猜数字游戏

游戏需求

开发一个猜数字游戏，具有以下功能：

随机生成 1-100 的数字
玩家有 10 次猜测机会
每次猜测后给出提示：
- 猜对了：显示祝贺信息
- 猜错了：提示数字偏大或偏小
显示历史猜测记录
游戏结束后可以重新开始

程序设计思路

在 html 文件的底部添加 JavaScript 代码

完整代码：数字游戏html

添加变量保存数据

<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector(".guesses")
const lastResult = document.querySelector(".lastResult")
const lowOrHi = document.querySelector(".lowOrhi")

const guessSubmit = document.querySelector(".guessSubmit")
const guessField = document.querySelector(".guessField")

let guessCount = 1
let resetButton

</script>

函数

function checkGuess(){
    alert('检查猜测结果')
}

运算符

JavaScript 支持多种运算符：

运算符	名称	实例
`+`	加	1 + 1
`-`	减	1 - 1
`*`	乘	1 * 1
`===`	全等	1 === 1
`!==`	不等于	1 !== 1
`>`	大于	1 > 1
`<`	小于	1 < 1

条件语句

function checkGuess(){
    const userGuess = Number(guessField.value)
    if(guessCount === 1){
      guesses.textContent = "Previous guesses: "
    }
    guesses.textContent += userGuess + " "

    if (userGuess === randomNumber) {
      lastResult.textContent = "Congratulations! You got it right!"
      lastResult.style.backgroundColor = "green"
      lowOrHi.textContent = ""
      setGameOver()
    } else if (guessCount === 10) {
      lastResult.textContent = "!!!GAME OVER!!!";
      lowOrHi.textContent = "";
      setGameOver();
    } else {
      lastResult.textContent = "Wrong!";
      lastResult.style.backgroundColor = "red";
      if (userGuess < randomNumber) {
        lowOrHi.textContent = "Last guess was too low!";
      } else if (userGuess > randomNumber) {
        lowOrHi.textContent = "Last guess was too high!";
      }
    }

    guessCount++;
    guessField.value = "";
    guessField.focus();
  }

事件(Event)

事件是实现交互的核心机制：

事件：浏览器中发生的动作（点击、加载等）
事件监听器：监听事件发生的代码
事件处理器：响应事件的具体代码

添加事件监听器：

guessSubmit.addEventListener("click", checkGuess)

注意：
事件处理函数不要加括号
addEventListener 需要两个参数：事件类型和处理函数

补全游戏功能

游戏结束处理：

function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement("button");
    resetButton.textContent = "Start new game";
    document.body.append(resetButton);
    resetButton.addEventListener("click", resetGame)
}

重置游戏功能：

function resetGame() {
    guessCount = 1
    const resetParas = document.querySelectorAll(".resultParas p")
    for (const restPara of resetParas) {
      resetPara.textContent=""
    }
    resetButton.parentNode.removeChild(resetButton)

    guessField.disabled = false
    guessSubmit.disabled = false
    guessField.value = ""
    guessField.focus()

    lastResult.style.backgroundColor='white'
    randomNumber = Math.floor(Math.random() * 100 ) + 1
}

循环 Loop

for...of 循环用于遍历可迭代对象：

const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
  console.log(fruit)
}

在游戏中的应用：

const resetParas = document.querySelectorAll(".resultParas p")

for (const restPara of resetParas) {
  resetPara.textContent=""
}

说明：
querySelectorAll 返回所有匹配的元素
for...of 循环遍历每个元素
清空每个元素的文本内容