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

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

1. App.jsx

javascript 复制代码

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：库组件，用于显示游戏胜利的彩带特效。

初始化状态和引用

javascript 复制代码

export default function App(){

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

dice：管理 10 个骰子的数组状态。初始值通过 generateAllNewDice 函数生成。

buttonRef：引用按钮 DOM 元素，用于在胜利时自动聚焦。

游戏胜利条件

javascript 复制代码

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

游戏胜利的条件：

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

处理副作用

javascript 复制代码

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

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

生成新的骰子数组

javascript 复制代码

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) 的完整过程：

调用 Math.random() 生成一个随机数，例如 0.45。
将该随机数乘以 6，结果是 2.7。
用 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。

掷骰子逻辑

javascript 复制代码

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

游戏未胜利时：

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

游戏胜利时：

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

切换冻结状态

javascript 复制代码

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

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

显示骰子

javascript 复制代码

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

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

渲染 UI

javascript 复制代码

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

javascript 复制代码

export default function Die(props) {


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

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

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

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

javascript 复制代码

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. 通用选择器 `*`**

css 复制代码

* {
  box-sizing: border-box;
}

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

2. `body` 样式

css 复制代码

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` 样式

css 复制代码

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

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

4. `main` 样式

css 复制代码

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` 样式

css 复制代码

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

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

6. `.instructions` 样式

css 复制代码

.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` 样式

css 复制代码

.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. 通用按钮样式

css 复制代码

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

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

9. `.dice-container button` 样式

css 复制代码

.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` 按钮样式

css 复制代码

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（水平）。
无边框，并带有圆角。

css 复制代码

.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）。
视觉细节：通过颜色、圆角、阴影和间距提升用户体验。

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

1. App.jsx

初始化状态和引用

游戏胜利条件

处理副作用

生成新的骰子数组

Math.random()

Math.random() * 6

Math.ceil()

综合步骤

返回结果

掷骰子逻辑

切换冻结状态

显示骰子

渲染 UI

代码的核心逻辑总结

2. Die.jsx

代码的核心功能

3. index.css

1. 通用选择器 *

2. body 样式

3. div#root 样式

4. main 样式

5. .title 样式

6. .instructions 样式

7. .dice-container 样式

8. 通用按钮样式

9. .dice-container button 样式

10. .roll-dice 按钮样式

11. .sr-only 样式

总结

**1. 通用选择器 `*`**

2. `body` 样式

3. `div#root` 样式

4. `main` 样式

5. `.title` 样式

6. `.instructions` 样式

7. `.dice-container` 样式

9. `.dice-container button` 样式

10. `.roll-dice` 按钮样式

11. `.sr-only` 样式