JavaScript 猜数字游戏实战

目录

• 概述
  • 前置知识
• 案例：构建猜数字游戏
  • 游戏需求
  • 程序设计思路
  • 在 html 文件的底部添加 JavaScript 代码

---

概述

通过开发一个猜数字游戏，学习 JavaScript 基础语法和程序组织方式。

前置知识

• HTML 基础
• CSS 基础
• JavaScript 基本概念

案例：构建猜数字游戏

游戏需求

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

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

程序设计思路

flowchart TD
    A[开始游戏] --> B[生成随机数]
    B --> C[玩家输入]
    C --> D{判断是否正确}
    D -->|正确| E[显示祝贺]
    D -->|错误| F{是否还有机会}
    F -->|是| G[给出提示] --> C
    F -->|否| H[游戏结束]
    E --> I[重新开始?]
    H --> I
    I -->|是| B
    I -->|否| J[结束]

在 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 遍历每个元素并清空文本内容。