Skip to content

Commit fb3a406

Browse files
Chiuyedoradocodes
authored andcommitted
Update organizing-code-with-functions.mdx
1 parent 84db3e9 commit fb3a406

File tree

1 file changed

+11
-7
lines changed

1 file changed

+11
-7
lines changed

src/content/tutorials/zh-Hans/organizing-code-with-functions.mdx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,13 @@ function setup() {
6868

6969
## 定义自定义函数
7070

71-
我们还可以创建自己的函数来将代码分组。在上一个教程[条件语句与交互性](/tutorials/conditionals-and-interactivity)中,你创建了一个[日出动画](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO),其中 `draw()` 中的代码包含用注释标记的天空、太阳和山脉部分。你可以声明自定义函数,为每一部分的相关代码起一个特定的名字,从而将它们分组。
71+
我们还可以创建自己的函数来将代码分组。在上一个教程[条件语句与交互性](/tutorials/conditionals-and-interactivity)中,你创建了一个[日落动画](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO),其中 `draw()` 中的代码包含用注释标记的天空、太阳和山脉部分。你可以声明自定义函数,为每一部分的相关代码起一个特定的名字,从而将它们分组。
7272

7373
### 步骤 1:用注释规划你的函数
7474

75-
- 复制你的日出动画,或[这个示例](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO),并将其命名为“Organized Sunset Animation”。
75+
- 复制你的日落动画,或[这个示例](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO),并将其命名为“Organized Sunset Animation”。
7676

77-
- 在定义自定义函数之前,让我们先从如何重新组织[日出动画](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO)中的一些代码的大纲开始:
77+
- 在定义自定义函数之前,让我们先从如何重新组织[日落动画](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO)中的一些代码的大纲开始:
7878

7979
```js
8080
function setup() {
@@ -318,7 +318,7 @@ function mountains() {
318318

319319
你的函数 `sky()``sun()``mountains()` 在它们的函数声明中都有空的括号,并且在函数调用中也是如此。其他函数,如 `print()``circle()`,在调用它们时需要在括号内放置值。**调用**函数时括号内的值称为**实参**(实际参数)。**实参**以某种方式自定义函数。
320320

321-
![print('hello') 函数调用的语法包括函数名“print”,后跟括起函数实参hello的括号。](../images/introduction/function-call.jpg)
321+
![print('hello') 函数调用的语法包括函数名“print”,后跟括起函数实参hello的括号。](../images/introduction/function-call.jpg)
322322

323323
在上面的代码片段中,`print()` 函数在调用时被传递了一个实参。实参是字符串 `'hello'``print()` 函数在控制台中显示括号中放置的值。我们可以想象 `print` 的函数声明看起来像这样:
324324

@@ -342,7 +342,7 @@ function mountains() {
342342

343343
需要一个或多个参数的函数需要正确数量的实参来匹配其声明中的形参数量,才能成功运行。当一个函数没有接收到足够的实参时,缺少的参数会被赋值为 `undefined`,这可能导致错误并产生奇怪的结果。在[调试入门指南](/tutorials/field-guide-to-debugging)中查看示例 2 和示例 7,了解在函数调用中使用错误数量的参数时可能遇到的错误示例。
344344

345-
让我们通过在我们的日出动画中添加一棵树来看看这是如何工作的
345+
让我们通过在日出动画中添加一棵树来看看这是如何工作的
346346

347347

348348
### 步骤 5:添加带参数的自定义函数
@@ -422,6 +422,10 @@ function draw() {
422422

423423
// 调用山脉函数
424424
mountains();
425+
426+
// 绘制两棵树
427+
tree(150, 320, 10)
428+
tree(210, 320, 10)
425429
}
426430

427431
// 绘制天空的函数
@@ -498,7 +502,7 @@ function tree(x,y,size) {
498502
triangle(210-10*3, 320, 210, 210 + 10*3, 320);
499503
```
500504

501-
- 计算得到的实参结果值用于在画布上绘制形状
505+
- 计算得到的结果作为参数用于在画布上绘制形状
502506

503507
```js
504508
triangle(180, 320, 240, 320);
@@ -512,7 +516,7 @@ function tree(x,y,size) {
512516

513517
- 探索[这个示例](https://editor.p5js.org/Msqcoding/sketches/yqFWzi_5X),了解如何使用数值表达式添加 x 和 y 参数的分步说明,并使用 `mouseX``mouseY` 测试你的函数。
514518

515-
有关包含参数的自定义函数的更多示例,请访问 p5.js 参考页面的 [`function`](/reference/p5/function)
519+
有关包含参数的自定义函数的更多示例,请访问 p5.js 参考页面的 [`函数`](/reference/p5/function)
516520

517521
通过使用同一个 `tree()` 函数创建两棵树,你可以减少草图中的代码量。这使得你的代码更短,因此更容易阅读。代码更少,也更容易调试。
518522

0 commit comments

Comments
 (0)