使用React构建一个掷骰子的小游戏

这是一个用 React 构建的小游戏应用，名为 Tenzies，目标是掷骰子，直到所有骰子的值相同。玩家可以“冻结”某些骰子，使它们在后续掷骰中保持不变。

1. App.jsx

import Die from "../public/components/Die"
import { useState, useRef, useEffect } from "react"
import { nanoid } from "nanoid"
import Confetti from "react-confetti"

• Die：自定义组件，用于显示单个骰子。
• useState、useRef、useEffect：React hooks，用于管理状态、DOM引用和副作用。
• nanoid：用于生成唯一 ID 的库，确保每个骰子有唯一标识符。
• Confetti：库组件，用于显示游戏胜利的彩带特效。

初始化状态和引用

export default function App(){

  const [dice, setDice] = useState(() => generateAllNewDice())
  const buttonRef = useRef(null)

dice：管理 10 个骰子的数组状态。初始值通过 generateAllNewDice 函数生成。
buttonRef：引用按钮 DOM 元素，用于在胜利时自动聚焦。

游戏胜利条件

const gameWon = dice.every(die => die.isHeld) && 
  dice.every(die => die.value === dice[0].value)

游戏胜利的条件：

• 所有骰子的 isHeld 属性为 true（即冻结）。
• 所有骰子的值相同。

处理副作用

useEffect(() => {
  if (gameWon) {
    buttonRef.current.focus()
  }
}, [gameWon])

当 gameWon 为 true 时，自动让“新游戏”按钮获得焦点，提升可用性。

生成新的骰子数组

function generateAllNewDice() {
  return new Array(10).fill(0).map(() => ({
    value: Math.ceil(Math.random() * 6),
    isHeld: false,
    id: nanoid()
  }))
}

创建 10 个骰子对象，每个骰子有：

• value：1 到 6 的随机数。
• isHeld：初始为 false，表示未冻结。
• id：唯一标识符，使用 nanoid 生成。

Math.ceil(Math.random() * 6) 是 JavaScript 中生成随机整数的常见方法之一。下面逐步解释其工作原理：

Math.random()

• 作用：生成一个 0（包含）到 1（不包含） 的随机浮点数。
• 范围：[0, 1)。
  • 例如：可能的结果是 0.2345, 0.9876, 0.0012 等。

Math.random() * 6

• 作用：将生成的随机数放大至 0 到 6（不包含 6） 的范围。
• 范围：[0, 6)。
  • 示例：
    • 如果 Math.random() 返回 0.2，则 0.2 * 6 = 1.2。
    • 如果 Math.random() 返回 0.9，则 0.9 * 6 = 5.4。

Math.ceil()

• 作用：对数字向上取整，返回大于等于该数的最小整数。
• 例如：
  • Math.ceil(1.2) 返回 2。
  • Math.ceil(5.4) 返回 6。
  • Math.ceil(0) 返回 0。

综合步骤

Math.ceil(Math.random() * 6) 的完整过程：

1. 调用 Math.random() 生成一个随机数，例如 0.45。
2. 将该随机数乘以 6，结果是 2.7。
3. 用 Math.ceil() 对结果向上取整，得到 3。

返回结果

最终的返回值是一个 1 到 6 的随机整数：

• 范围：[1, 6]。
• 为何能覆盖 1 到 6？
  • Math.random() 取值为 0 时，Math.random() * 6 = 0，取整后为 1。
  • Math.random() 接近 1 时，Math.random() * 6 接近 6，取整后为 6。

掷骰子逻辑

function rollDice() {
  if (!gameWon) {
    setDice(oldDice => oldDice.map(die => 
      die.isHeld ?
        die :
        {...die, value: Math.ceil(Math.random() * 6)}
    ))
  } else {
    setDice(generateAllNewDice())
  }
}

游戏未胜利时：

• 对未冻结的骰子重新生成随机值。

游戏胜利时：

• 重置游戏，生成新的骰子数组。

切换冻结状态

function hold(id) {
  setDice(oldDice => oldDice.map(die =>
    die.id === id ?
      {...die, isHeld: !die.isHeld} :
      die
  ))
}

根据点击的骰子 id，切换对应骰子的 isHeld 状态。

显示骰子

const diceElements = dice.map(dieObj => 
  (<Die 
    key={dieObj.id} 
    value={dieObj.value} 
    isHeld={dieObj.isHeld}
    hold={() => hold(dieObj.id)}
  />)
)

• 使用 map 遍历 dice 状态，为每个骰子生成一个 Die 组件。
• hold 函数传递给每个骰子，用于处理点击事件。

渲染 UI

return (
  <main>
    {gameWon && <Confetti />}
    <div aria-live="polite" className="sr-only">
        {gameWon && <p>Congratulations! You won! Press "New Game" to start again.</p>}
    </div>
    <h1 className="title">Tenzies</h1>
    <p className="instructions">Roll until all dice are the same. Click each die to freeze it at its current value between rolls.</p>
    <div className="dice-container">
      {diceElements}
    </div>
    <button ref={buttonRef} className="roll-dice" onClick={rollDice}>
      {gameWon ? "New Game" : "Roll"}
    </button>
  </main>
)

• 胜利时显示彩带效果：通过 Confetti 组件。
• 无障碍支持：aria-live 提供游戏状态描述。
• 骰子容器：动态显示所有 Die 组件。
• 按钮文本：胜利时为“New Game”，否则为“Roll”。

代码的核心逻辑总结

• 初始状态下生成 10 个随机骰子。
• 用户点击骰子时，可冻结当前骰子值。
• 点击按钮：
  – 若游戏未胜利，则重新掷未冻结的骰子。
  – 若游戏胜利，则重置游戏。
• 实现游戏胜利条件检测和 UI 提示（如彩带效果、自动聚焦按钮）。

2. Die.jsx

export default function Die(props) {


    const styles = {
        backgroundColor: props.isHeld ? "#59E391" : "white"
    }

styles 是一个动态样式对象，用于控制按钮的背景颜色：

• 如果 props.isHeld 为 true（表示该骰子被冻结），背景颜色为绿色 (#59E391)。
• 如果 props.isHeld 为 false（表示未冻结），背景颜色为白色。

样式切换使用户能够直观地看到冻结状态。

return (
    <button 
        style={styles}
        onClick={props.hold}
        aria-pressed={props.isHeld}
        aria-label={`Die with value ${props.value}, 
        ${props.isHeld ? "held" : "not held"}`}
    >
        {props.value}
    </button>
)

style={styles}

• 将动态样式对象 styles 应用到按钮的 style 属性，调整按钮的背景颜色。

onClick={props.hold}

• 定义按钮的点击事件处理函数。
• props.hold 是从父组件传递的函数，当用户点击按钮时会触发这个函数。
• 通常，props.hold 用于切换 isHeld 状态，冻结或解冻当前骰子。

aria-pressed={props.isHeld}

• 用于无障碍支持。
• 指定按钮的按下状态：
• true：表示当前骰子已被“按下”或冻结。
• false：表示当前骰子未被按下。
• 帮助屏幕阅读器用户了解当前状态。

aria-label={Die with value ${props.value}, ${props.isHeld ? “held” : “not held”}}

• 用于描述按钮的详细信息，提升无障碍性。
• 动态生成描述，例如：
• Die with value 4, held：骰子的值为 4，已冻结。
• Die with value 6, not held：骰子的值为 6，未冻结。

代码的核心功能

• 动态显示骰子的值。
• 提供交互功能，点击按钮会调用 props.hold，切换冻结状态。
• 通过动态样式反映骰子的状态（冻结或未冻结）。
• 提供无障碍支持，便于屏幕阅读器识别和描述按钮状态。

3. index.css

1. 通用选择器 *

* {
  box-sizing: border-box;
}

• 作用：将所有元素的 box-sizing 设置为 border-box。
• box-sizing: border-box;：
  • 包括内容、内边距 (padding) 和边框 (border) 的宽度和高度在 width 和 height 的计算中。
  • 效果：简化布局调整，避免意外的尺寸增大。

2. body 样式

body {
  font-family: Karla, sans-serif;
  margin: 0;
  background-color: #0B2434;
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

• 字体：font-family: Karla, sans-serif; 使用 Karla 字体，不支持时回退到无衬线字体。
• 背景颜色：深蓝色背景 (#0B2434)。
• 布局：
  • display: flex;：将 body 设为弹性容器。
  • flex-direction: column;：子元素垂直排列。
  • justify-content: center;：子元素在垂直方向上居中。
  • align-items: center;：子元素在水平方向上居中。
• 高度：100vh 使 body 占据整个视口高度。
• 内边距：20px，用于给内容留出额外空间。

3. div#root 样式

div#root {
  height: 100%;
  width: 100%;
  max-height: 400px;
  max-width: 400px;
}

• 高度和宽度：默认占据父容器的全部空间。
• 最大尺寸限制：max-height 和 max-width 分别限制为 400px。
  • 效果：即使父容器较大，#root 的尺寸也不会超过 400 像素。

4. main 样式

main {
  background-color: #F5F5F5;
  height: 100%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

• 背景颜色：浅灰色 (#F5F5F5)。
• 圆角：border-radius: 5px; 使容器的边角圆滑。
• 布局：
  • 弹性布局，子元素垂直排列。
  • justify-content: space-evenly;：在主轴上均匀分布子元素，间隔相等。
  • align-items: center;：子元素在交叉轴（水平方向）上居中。

5. .title 样式

.title {
  font-size: 40px;
  margin: 0;
}

• 字体大小：40px。
• 边距：margin: 0; 去除外边距。

6. .instructions 样式

.instructions {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  margin-top: 0;
  text-align: center;
}

• 字体：优先使用 Inter 字体。
• 字体粗细：普通粗细 (font-weight: 400)。
• 文本对齐：居中对齐 (text-align: center)。

7. .dice-container 样式

.dice-container {
  display: grid;
  grid-template: auto auto / repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

• 布局：CSS 网格布局。
  • grid-template：
    • 行模板：auto auto（两行，每行高度自适应内容）。
    • 列模板：repeat(5, 1fr)（5 列，每列宽度相等）。
  • gap: 20px;：网格单元之间的间距。
• 底部边距：margin-bottom: 40px;。

8. 通用按钮样式

button {
  font-family: Karla, sans-serif;
  cursor: pointer;
}

• 字体：Karla。
• 鼠标样式：cursor: pointer; 鼠标悬停时显示手型图标。

9. .dice-container button 样式

.dice-container button {
  height: 50px;
  width: 50px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  border: none;
  background-color: white;
  font-size: 1.75rem;
  font-weight: bold;
}

• 按钮尺寸：固定宽高 50px。
• 阴影：box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); 添加轻微的阴影效果。
• 圆角：border-radius: 10px;。
• 无边框：border: none;。
• 背景颜色：白色。
• 字体样式：
  • font-size: 1.75rem; 大号字体。
  • font-weight: bold; 加粗。

10. .roll-dice 按钮样式

button.roll-dice {
  height: 50px;
  white-space: nowrap;
  width: auto;
  padding: 6px 21px;
  border: none;
  border-radius: 6px;
  background-color: #5035FF;
  color: white;
  font-size: 1.2rem;
}

• 尺寸：高度固定为 50px，宽度根据内容调整。
• 背景颜色：深蓝色 (#5035FF)。
• 字体颜色：白色。
• 内边距：6px（垂直）和 21px（水平）。
• 无边框，并带有圆角。

11. .sr-only 样式

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

• 作用：隐藏元素，但保留给屏幕阅读器使用。
• 关键属性：
  • position: absolute;：从文档流中移除。
  • width 和 height 设置为 1px。
  • 使用 clip 和 overflow 确保内容不可见。
  • 提供无障碍支持，例如为视觉障碍用户提供额外的语音描述。

总结

这段 CSS 代码：

• 设计布局：通过弹性盒布局和网格布局组织内容。
• 样式统一性：使用动态样式、字体和交互效果。
• 无障碍支持：添加屏幕阅读器友好的隐藏元素（.sr-only）。
• 视觉细节：通过颜色、圆角、阴影和间距提升用户体验。