Update Chinese translation for conditionals-and-interactivity

Author: SihongShen

src/content/tutorials/zh-Hans/conditionals-and-interactivity.mdx

@@ -33,7 +33,7 @@ import Video from "../../../components/Video/index.astro"
 - 递增与递减
 - 基于鼠标点击和鼠标位置的交互
 
-控制程序的流程是计算机强大功能的核心，也是在p5.js中创作激动人心的动画和游戏的关键。通常情况下，代码是按行的顺序来执行的。在之前的教程中，你已经了解了如何使用[`draw()`](/reference/p5/draw)函数是如何从上至下反复地运行代码的。这让重叠图形和“翻页”动画得以实现。
+控制程序的流程是计算机强大功能的核心，也是在p5.js中创作激动人心的动画和游戏的关键。通常情况下，代码是按行的顺序来执行的。在之前的教程中，你已经了解了[`draw()`](/reference/p5/draw)函数是如何从上至下反复地运行代码的。这让重叠图形和“翻页”动画得以实现。
 
 
 ### 前置要求
@@ -45,12 +45,12 @@ import Video from "../../../components/Video/index.astro"
 在开始之前，你应该能够：
 
 - 在画布上使用p5.js添加和自定义形状与文本
-  - [`circle()`](/reference/p5/circle) 、 [`rect()`](/reference/p5/rect) 、 [`ellipse()`](/reference/p5/ellipse) 、 [`triangle()`](/reference/p5/triangle) 、 [`line()`](/reference/p5/line)
-  - [`fill()`](/reference/p5/fill)、 [`stroke()`](/reference/p5/stroke)、 [`text()`](/reference/p5/text)、 [`textSize()`](/reference/p5/textSize)
+  - [`circle()`](/reference/p5/circle) | [`rect()`](/reference/p5/rect) | [`ellipse()`](/reference/p5/ellipse) | [`triangle()`](/reference/p5/triangle) | [`line()`](/reference/p5/line)
+  - [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), [`text()`](/reference/p5/text), [`textSize()`](/reference/p5/textSize)
 - 使用包括 [`mouseX`](/reference/p5/mouseX) 和 [`mouseY`](/reference/p5/mouseY) 等在内的内置变量
-- 使用 `let` 和 [赋值运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment) 来声明，初始化，使用和更新自定义变量
+- 使用 `let` 和 [赋值运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment) 来声明、初始化、使用和更新自定义变量
 - 通过使用 [`random()`](/reference/p5/random)、[`frameRate()`](/reference/p5/frameRate) 和 [`frameCount`](/reference/p5/frameCount)，同时实现线性运动和随机运动
-- 添加代码注释并处理错误信息 - 要了解更多关于错误信息和调试的信息，请阅读 [调试实战指南](/tutorials/field-guide-to-debugging)
+- 添加代码注释并处理错误信息 - 要了解更多关于错误信息和调试的信息，请阅读[调试实战指南](/tutorials/field-guide-to-debugging)
 
 
 ## 第一部分：可交互太阳
@@ -62,7 +62,7 @@ import Video from "../../../components/Video/index.astro"
 
 ### IF语句（条件语句）
 
-[*条件语句*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals) 控制特定代码行执行的时机。例如，在太阳升起前天空是黑色的。一旦太阳升起，天亮后天空颜色就会变浅。你可以编写一个*条件语句*（也称为*if语句*）来根据太阳的位置改变天空的颜色。如果太阳位置高，天空应该是浅色的；否则，天空应该是深色的。if 语句可以检查太阳的位置，并根据太阳在天空中的位置来控制执行的代码。
+[*条件语句*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals) 控制特定代码行执行的时机。例如，在太阳升起前天空是黑色的。一旦太阳升起，时间来到白天，天空颜色就会变浅。你可以编写一个*条件语句*（也称为*if语句*）来根据太阳的位置改变天空的颜色。如果太阳位置高，天空应该是浅色的；否则，天空应该是深色的。if 语句可以检查太阳的位置，并根据太阳在天空中的位置来控制执行的代码。
 
 在我们使用检查太阳位置的条件语句之前，我们可以添加自定义变量来帮助我们在鼠标指针划过画布时更新太阳的位置。
 
@@ -129,7 +129,7 @@ function draw() {
   - 在 [`draw()`](/reference/p5/draw) 函数内添加以下代码:
 
     ```js
-    // 绘制一条线段作为地平线
+    //绘制一条线段作为地平线
     stroke("green");
     line(0,horizon,400,horizon);
     ```
@@ -162,7 +162,7 @@ function draw() {
 
 当鼠标在画布上垂直移动时，太阳会跟随鼠标指针。这是因为我们在 `circle(200, sunHeight, 100)` 中使用了 `sunHeight` 作为圆心 y 坐标的参数。画布上绘制的地平线则使用 `horizon` 作为两个端点 y 坐标 `y1, y2` 的参数。地平线在画布上的位置标记将用于后续改变背景颜色的逻辑。
 
-访问 p5.js 参考手册的 [2D shapes](/reference#Shape), [color](/reference#Color), [foundations](/reference#Foundation) 和 [mouse events](/reference#Mouse) 页面来了解更多关于形状和变量的信息。你也可以阅读 [调试实战指南](/tutorials/field-guide-to-debugging)（示例 1 & 2）来获取常见错误的帮助。
+访问 p5.js 参考手册的[2D基础形状](/reference#Shape), [颜色](/reference#Color), [基础](/reference#Foundation)和[鼠标事件](/reference#Mouse)页面来了解更多关于形状和变量的信息。你也可以阅读[调试实战指南](/tutorials/field-guide-to-debugging)（示例 1 & 2）来获取常见错误的帮助。
 
 
 #### 第三步：使用带有布尔表达式的条件语句来改变背景颜色
@@ -210,9 +210,9 @@ function draw() {
 
 运行代码，并尝试用鼠标移动太阳！
 
-在以上代码中，背景默认是黑色，因为 `draw()` 函数中读取的第一条语句是 `background(0)` 。当太阳在地平线以下时，背景保持黑色，因为 if 语句跳过了花括号内的*代码块*：`background("lightblue")` 。当太阳移到地平线以上时，花括号内的*代码块*开始运行，这会将默认的黑色重置为浅蓝色。
+在以上代码中，背景默认是黑色，因为 `draw()` 函数中读取的第一条语句是 `background(0)` 。当太阳在地平线以下时，背景保持黑色，这是因为 if 语句跳过了花括号内的*代码块*：`background("lightblue")` 。当太阳移到地平线以上时，花括号内的*代码块*开始运行，这会将默认的黑色重置为浅蓝色。
 
-在这里，你正在控制 `background(0)` 和 `background("lightblue")`运行的时机。*条件语句*（或*if语句）是一种控制特定代码行何时运行的方式。它可以改变草图中发生的事。
+在这里，你正在控制 `background(0)` 和 `background("lightblue")`运行的时机。*条件语句*（或*if语句*）是一种控制特定代码行何时运行的方式。它可以改变草图中发生的事。
 
 
 #### IF 语句语法
@@ -239,27 +239,27 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
   <Fragment slot="block">Code block</Fragment>
 </AnnotatedLine>
 
-*布尔表达式*是计算结果为*布尔值*的语句。*布尔*值只能是`true`（真）或`false`（假）。与数字（numbers）和字符串（strings）不同，布尔值只有这两个。*布尔表达式*可以帮助我们检查条件是否为`true`（真）或`false`（假）。因此，它们需要被称为*比较运算符（comparison operators）*的符号。*比较运算符（comparison operators）*是用于比较两个值的特殊符号（见下表）。
+*布尔表达式*是计算结果为*布尔值*的语句。*布尔*值只能是`true`（真）或`false`（假）。与数字（numbers）和字符串（strings）不同，布尔值只有这两个。*布尔表达式*可以帮助我们检查条件是否为`true`（真）或`false`（假）。因此，它们需要被称为 *比较运算符（comparison operators）* 的符号。 *比较运算符（comparison operators）* 是用于比较两个值的特殊符号（见下表）。
 
 你可以用来创建布尔表达式的[*比较运算符*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)包括：
 
 <table>
 
 <tr>
 
-<th align="center">
+<th>
 
 符号
 
 </th>
 
-<th align="center">
+<th>
 
 含义（p5.js参考链接）
 
 </th>
 
-<th align="center">
+<th>
 
 示例
 
@@ -269,19 +269,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td align="center">
+<td>
 
 `<`
 
 </td>
 
-<td align="center">
+<td>
 
 [小于](/reference/p5/lt)
 
 </td>
 
-<td align="center">
+<td>
 
 `x < 5`
 
@@ -291,19 +291,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td align="center">
+<td>
 
 `<=`
 
 </td>
 
-<td align="center">
+<td>
 
 [小于或等于](/reference/p5/lte)
 
 </td>
 
-<td align="center">
+<td>
 
 `x <= 5`
 
@@ -313,19 +313,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td align="center">
+<td>
 
 `>`
 
 </td>
 
-<td align="center">
+<td>
 
 [大于](/reference/p5/gt)
 
 </td>
 
-<td align="center">
+<td>
 
 `x > 5`
 
@@ -335,19 +335,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td align="center">
+<td>
 
 `>=`
 
 </td>
 
-<td align="center">
+<td>
 
 [大于或等于](/reference/p5/gte)
 
 </td>
 
-<td align="center">
+<td>
 
 `x >= 5`
 
@@ -357,19 +357,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td align="center">
+<td>
 
 `===`
 
 </td>
 
-<td align="center">
+<td>
 
 严格相等 (意味着不同类型的值会被视为不相等)
 
 </td>
 
-<td align="center">
+<td>
 
 `x === 5`
 
@@ -379,19 +379,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td align="center">
+<td>
 
 `!==`
 
 </td>
 
-<td align="center">
+<td>
 
 不等于
 
 </td>
 
-<td align="center">
+<td>
 
 `x !== 5`
 
@@ -403,7 +403,7 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 访问MDN参考资料来了解更多有关[表达式与运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)的信息。
 
-你可以将*布尔表达式*想象成计算机在提问。在第三步添加的代码中，布尔表达式是 `sunHeight < horizon` 。它在询问：变量 `sunHeight` 的值是否小于变量 `horizon` 的值。如果问题的答案是 `true` （真），那么代码块就会运行。如果答案为否，那么代码块则会被跳过。
+你可以将*布尔表达式*想象成是计算机在提问。在第三步添加的代码中，布尔表达式是 `sunHeight < horizon` 。它在询问：变量 `sunHeight` 的值是否小于变量 `horizon` 的值。如果问题的答案是 `true` （真），那么代码块就会运行。如果答案为否，那么代码块则会被跳过。
 
 我们可以通过在 [`draw()`](/reference/p5/draw) 函数中的 `sunHeight = mouseY` 之后添加 `console.log(sunHeight < horizon)` 以在控制台（console）中查看该表达式的值。当你移动鼠标划过画布时，观察控制台打印的值是如何在 `true` 和 `false` 之间切换的：当太阳在地平线以下时，值为 `false` ；当太阳在地平线以上时，值为 `true` 。参考[这个草图](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m)里的示例。
 
@@ -594,7 +594,7 @@ function draw() {
 }
 ```
 
-在这一步中，你创建了变量 `redVal`,` greenVal`,` `和`  sunHeight  `来储存程序中将要使用的数值。`sunHeight` 的初始值是一个位于地平线以下的点，而 `redVal` 和 `greenVal` 的初始值则表示黑色。这些设置了动画开始时太阳的位置和天空的颜色。它们被称为动画的*初始条件（initial conditions）*。现在，这些变量已经可以用来改变画布上的效果了。
+在这一步中，你创建了变量 `redVal`,`greenVal`,` `和`sunHeight`来储存程序中将要使用的数值。`sunHeight` 的初始值是一个位于地平线以下的点，而 `redVal` 和 `greenVal` 的初始值则表示黑色。这些设置了动画开始时太阳的位置和天空的颜色。它们被称为动画的*初始条件（initial conditions）*。现在，这些变量已经可以用来改变画布上的效果了。
 
 
 #### 第二步：使用自定义变量绘制景观
@@ -774,7 +774,7 @@ function draw() {
 
 这样当草图运行时，太阳就会自动移动了！这是因为每次 [`draw()`](/reference/p5/draw) 运行时，变量 `sunHeight` 的值都会减少2。一旦if 语句中的布尔表达式 `sunHeight > 130` 变为 `false`，变量 `sunHeight` 就不再减少了。
 
-当一个变量的值减少时，这被称为*递减*，使用*减法赋值*符号 `-= ` 表示。当变量的值增加时，这被称为*递增*，使用*加法赋值*符号 `+=` 表示。每当一个变量递增或递减时，存储在该变量中的值都会发生改变，存入新值。
+当一个变量的值减少时，这被称为*递减*，使用*减法赋值*符号 `-=` 表示。当变量的值增加时，这被称为*递增*，使用*加法赋值*符号 `+=` 表示。每当一个变量递增或递减时，存储在该变量中的值都会发生改变，存入新值。
 
 访问以下运算符的 MDN 参考资料以了解更多信息：[`=`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment) | [`+=`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition_assignment) | [`-=`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment)
 
@@ -810,7 +810,7 @@ if (sunHeight > 130) {
 }
 ```
 
-这里，`sunHeight ` 会在每次 [`draw()`](/reference/p5/draw) 运行时减少2，直到 `sunHeight ` 小于或等于130。当 `sunHeight ` 小于或等于130时，布尔表达式 `sunHeight > 130` 的值变为 `false`，因此代码块 `sunHeight -= 2` 不再运行了。这让太阳在其 y 坐标达到130或更小时停止移动。
+这里，`sunHeight` 会在每次 [`draw()`](/reference/p5/draw) 运行时减少2，直到 `sunHeight` 小于或等于130。当 `sunHeight ` 小于或等于130时，布尔表达式 `sunHeight > 130` 的值变为 `false`，因此代码块 `sunHeight -= 2` 不再运行了。这让太阳在其 y 坐标达到130或更小时停止移动。
 
 
 ### 嵌套条件语句
@@ -868,7 +868,7 @@ if (mouseIsPressed == true && sunHeight === 130) {
 
 ### 布尔变量: `mouseIsPressed` 和 `keyIsPressed`
 
-`mouseIsPressed` 和 `keyIsPressed ` 是p5.js内置的包含布尔值的特殊变量。当鼠标按键被按下时，`mouseIsPressed ` 是 `true`，否则为 `false`。当键盘上的任意键被按下时，`keyIsPressed `是 `true` ；否则是`false`。
+`mouseIsPressed` 和 `keyIsPressed` 是p5.js内置的包含布尔值的特殊变量。当鼠标按键被按下时，`mouseIsPressed` 是 `true`，否则为 `false`。当键盘上的任意键被按下时，`keyIsPressed `是 `true` ；否则是`false`。
 
 查看[这个示例](https://editor.p5js.org/Msqcoding/sketches/CnKfDeaBG)观察当鼠标按键按下时，`mouseIsPressed` 的值在控制台中是如何变化的。