Update Chinese translation for conditionals-and-interactivity

Author: SihongShen

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

@@ -4,7 +4,7 @@ description: 一个关于如何使用条件语句和创建可交互草图（sket
 category: introduction
 categoryIndex: 3
 featuredImage: ../images/featured/ConditionalsA.png
-featuredImageAlt: 条件语句与交互性教程作品的预览，是一个日出动画。
+featuredImageAlt: 用作条件语句与交互创建教学的日出动画的预览图像。
 relatedContent:
   examples:
     - en/11_3d/06_framebuffer_blur/description
@@ -45,11 +45,11 @@ 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) 来声明，初始化，使用和更新自定义变量
-- 通过使用 [`random()`](/reference/p5/random) ，[`frameRate()`](/reference/p5/frameRate) 和 [`frameCount`](/reference/p5/frameCount)，同时实现线性运动和随机运动
+- 通过使用 [`random()`](/reference/p5/random)、[`frameRate()`](/reference/p5/frameRate) 和 [`frameCount`](/reference/p5/frameCount)，同时实现线性运动和随机运动
 - 添加代码注释并处理错误信息 - 要了解更多关于错误信息和调试的信息，请阅读 [调试实战指南](/tutorials/field-guide-to-debugging)
 
 
@@ -71,7 +71,7 @@ import Video from "../../../components/Video/index.astro"
 
 - 打开一个新的p5.js项目，命名为 “Interactive Sun”，并保存该草图（sketch）。
 
-- 声明一个名为 `sunHeight` 的自定义变量，用于表示太阳的 y 坐标 和一个声明一个名为 `horizon` 的自定义变量，用于表示地平线的 y 坐标。将 horizon 变量初始化为 200。
+- 声明一个名为 `sunHeight` 的自定义变量用于表示太阳的 y 坐标，和一个名为 `horizon` 的自定义变量用于表示地平线的 y 坐标。将 horizon 变量初始化为 200。
 
   - 在 [`setup()`](/reference/p5/setup) 函数之前，将以下代码添加到你的草图中：
 
@@ -107,7 +107,7 @@ function draw() {
 }
 ```
 
-由于太阳的高度是变化的，我们将鼠标的 y 坐标 （`mouseY`）在变量 `sunHeight` 中。在函数 `draw()` 中执行此操作可以保证每次 `draw()` 运行时，`sunHeight` 都会持续更新。虽然地平线的位置保持不变，但为它设置一个自定义变量可以作为参考点，并提高代码的可读性。
+由于太阳的高度是变化的，我们将鼠标的 y 坐标 （`mouseY`）储存在变量 `sunHeight` 中。在函数 `draw()` 中执行此操作可以保证每次 `draw()` 运行时，`sunHeight` 都会持续更新。虽然地平线的位置保持不变，但为它设置一个自定义变量可以作为参考点，并提高代码的可读性。
 
 访问 p5.js 参考手册以获取更多关于 [`mouseY`](/reference/p5/mouseY) 和 [`let`](/reference/p5/let)的信息。
 
@@ -247,19 +247,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<th>
+<th align="center">
 
 符号
 
 </th>
 
-<th>
+<th align="center">
 
 含义（p5.js参考链接）
 
 </th>
 
-<th>
+<th align="center">
 
 示例
 
@@ -269,19 +269,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td>
+<td align="center">
 
 `<`
 
 </td>
 
-<td>
+<td align="center">
 
 [小于](/reference/p5/lt)
 
 </td>
 
-<td>
+<td align="center">
 
 `x < 5`
 
@@ -291,19 +291,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td>
+<td align="center">
 
 `<=`
 
 </td>
 
-<td>
+<td align="center">
 
 [小于或等于](/reference/p5/lte)
 
 </td>
 
-<td>
+<td align="center">
 
 `x <= 5`
 
@@ -313,19 +313,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td>
+<td align="center">
 
 `>`
 
 </td>
 
-<td>
+<td align="center">
 
 [大于](/reference/p5/gt)
 
 </td>
 
-<td>
+<td align="center">
 
 `x > 5`
 
@@ -335,19 +335,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td>
+<td align="center">
 
 `>=`
 
 </td>
 
-<td>
+<td align="center">
 
 [大于或等于](/reference/p5/gte)
 
 </td>
 
-<td>
+<td align="center">
 
 `x >= 5`
 
@@ -357,19 +357,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td>
+<td align="center">
 
 `===`
 
 </td>
 
-<td>
+<td align="center">
 
 严格相等 (意味着不同类型的值会被视为不相等)
 
 </td>
 
-<td>
+<td align="center">
 
 `x === 5`
 
@@ -379,19 +379,19 @@ if (${bottom('bool', 'sunHeight < horizon')}) {
 
 <tr>
 
-<td>
+<td align="center">
 
 `!==`
 
 </td>
 
-<td>
+<td align="center">
 
 不等于
 
 </td>
 
-<td>
+<td align="center">
 
 `x !== 5`
 
@@ -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)
 
@@ -784,9 +784,9 @@ function draw() {
 [示例](https://editor.p5js.org/gbenedis@gmail.com/sketches/IHAcGOxNz)
 </Callout>
 
-天空颜色的改变是因为 `redVal` 和 `greenVal` 的值在逐渐改变。根据第二个条件语句中的布尔表达式，当 `sunHeight` 小于 480 时，颜色变量开始改变：`redVal` 每次增加4，`greenVal` 每次增加1。 每次 [`draw()`](/reference/p5/draw) 运行时，`redVal` 和 `greenVal` 的值都会增加，并且在下一次运行时被用来改变背景颜色。这就创造了一个动画的日出效果。
+天空颜色的改变是因为 `redVal` 和 `greenVal` 的值在逐渐改变。根据第二个条件语句中的布尔表达式，当 `sunHeight` 小于 480 时，颜色变量开始改变：`redVal` 每次增加4，`greenVal` 每次增加1。 每次 [`draw()`](/reference/p5/draw) 运行时，`redVal` 和 `greenVal` 的值都会增加，并且在下一次运行时被用来改变背景颜色。这就创造了一个动画日出效果。
 
-语句 `redVal += 4` 也可以写成 `greenVal++`。`++` 被称为**递增运算符**，而 `--` 被称为**递减运算符**。
+语句 `greenVal += 4` 也可以写成 `greenVal++`。`++` 被称为**递增运算符**，而 `--` 被称为**递减运算符**。
 
 以下语句具有相同的效果：
 
@@ -872,7 +872,7 @@ if (mouseIsPressed == true && sunHeight === 130) {
 
 查看[这个示例](https://editor.p5js.org/Msqcoding/sketches/CnKfDeaBG)观察当鼠标按键按下时，`mouseIsPressed` 的值在控制台中是如何变化的。
 
-在“试试这个！”挑战中，当 `sunHeight` 等于 130 *且* 鼠标按键被按下时，天空变暗了。也许它展示了一个日食！
+在“试试这个！”挑战中，当 `sunHeight` 等于 130 *且* 鼠标按键被按下时，天空变暗了。这或许模拟了日食！
 
 我们甚至可以在 if 语句中单独使用 `mouseIsPressed`：
 
@@ -882,7 +882,7 @@ if (mouseIsPressed && sunHeight === 130) {
 }
 ```
 
-由于 `mouseIsPressed` 已经存储了 `true` 或 `false` 的值，我们就不需要使用比较运算符来创建一个布尔表达式。布尔表达式的结果是布尔值，而布尔变量储存布尔值。条件语句只需要布尔值。条件语句只需要布尔值为 `true` 时才会运行代码。如果 `mouseIsPressed` 是 `true`，条件语句的代码块就会运行。
+由于 `mouseIsPressed` 已经存储了 `true` 或 `false` 的值，我们就不需要使用比较运算符来创建一个布尔表达式。布尔表达式的结果是布尔值，而布尔变量储存布尔值。条件语句只需要布尔值为 `true` 时才会运行代码。如果 `mouseIsPressed` 是 `true`，条件语句的代码块就会运行。
 
 探索这些使用了 `mouseIsPressed` 和 `keyIsPressed` 的示例：