# 什么是 FizzBuzz？

欢迎你加入第一个训练副本，项目很简单，这是一个简单的猜数字游戏。

想象你是个小学 5 年级的学生，现在还有 5 分钟就要下课，数学老师带全班同学玩一个小游戏。他会用手指挨个指向每个学生，被指着的学生就要依次报数：

**第一个被指着的学生说“1”，**

**第二个被指着的学生说“2”，**

**以此类推。**

呃……并不完全“以此类推”……如果一个学生被指着的时候，应该报的数是 3 的倍数，那么他就不能说这个数，而是要说“Fizz”。

同样的道理，5 的倍数也不能被说出来，而是要说“Buzz”。

于是游戏开始了，老师的手指向一个个同学，他们开心地喊着：“1！”，“2！”，“Fizz！”，“4！”，“Buzz！”……

终于，老师指向了你，时间仿佛静止，你的嘴发干，你的掌心在出汗，你仔细计算，然后终于喊出“Fizz！”。运气不错，你躲过了一劫，游戏继续进行。

## 项目需求

为了避免在自己这儿失败，我们想了一个“作弊”的法子：

![计算器](/files/-M0CKuJgnmFo5PYKC-9I)

假如说你有一个“神奇”的计算器，每次只需要告诉它一个数字，就能自动算出报数的结果，这样到你这儿的时候，就马上知道该说什么了。

全班有 33 个同学，游戏可能会玩 2 到 3 轮。

现在，赶紧去写代码吧！

![](/files/-M0CGYL6tn5OJnkMdQUr)

## 任务分解

让我们先来拆解一下任务：

### 任务描述：

写一个简单的计算器，

可以通过点击按键输入任意的数字，

遇到数字为 3 的倍数的时候，计算结果为“Fizz”，

遇到数字为 5 的倍数的时候，计算结果为“Buzz”，

既能被 3 整除、又能被 5 整除的数，则输出结果为“FizzBuzz”。

页面 UI 交互部分的逻辑还包括点击 `C` 键对计算器进行清零，点击 `=` 键计算结果。

当然，别忘了 UI 样式。

### 画图（纸和笔）

![Tasking FizzBuzz](/files/-LqvJKroLl74ewj-Td19)

### 实例化需求

| number: Int | result: String |
| ----------- | -------------- |
| 1           | '1'            |
| 3           | 'Fizz'         |
| 5           | 'Buzz'         |
| 15          | 'FizzBuzz'     |

**示例输出：**

![](/files/-M0CKuJgnmFo5PYKC-9I)

## 第二阶段：需求变更

**当你开发完毕，这时候 PM 来了，他告诉你：需求变了。**

1. 如果一个数能被 3 整除，或者包含数字 3，那么这个数就是“Fizz”；
2. 如果一个数能被 5 整除，或者包含数字 5，那么这个数就是“Buzz”。
3. 当然，如果既是 3 的倍数又是 5 的倍数，或包含数字 3 又包含数字 5，那么这个数就是“FizzBuzz”。

这时，你该怎么办？

![](/files/-M1kIqUx2LrQITkcVyjA)

## 任务目标

1. 掌握测试驱动开发基本节奏
2. 至少练习 3 遍 FizzBuzz 题目
3. 能在 10 分钟内完成 FizzBuzz 题目

## 学习周期

| 总时长 | 任务 0   | 任务 1    | 任务 2 | 任务 3 |
| --- | ------ | ------- | ---- | ---- |
| 任务  | 练功前的热身 | TDD 初体验 | 先利其器 | 再撸一遍 |
| 4h  | 1h     | 1h      | 1h   | 1h   |

## 额外推荐资料

* Kent Beck 的《测试驱动开发》，可以只读第 1 章


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-fizzbuzz/01-what-is-fizzbuzz.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.