p5.js-俄罗斯方块小游戏系列教程之Hello Word

一、如何在乐述云享中使用P5JS组件

乐述云享是一个知识创作平台，采用Markdown作为编辑器语言，由于Markdown是一种纯文本语言，系统会在预览时自动根据标识将纯文本转换成富文本，因此其专为开发人员内置了一门P5JS语言，让我们可以直接在编辑器中按照指定语法编程就能创作出应用软件。

P5JS的编程语言是建立在Javascript基础上的，通过封装好的API，使得程序中的语句更容易被理解，大大提高了开发效率，要想使用P5JS组件，您只需要在文档中使用以下语法即可。

P5JS程序基本结构由setup()和draw()两个函数组成

01 setup()

当页面被加载完毕，P5JS组件会开始执行setup()函数中的程序，该部分只会执行一次。通常在setup()函数中完成P5JS的初始化设置，例如画布大小定义，初始化变量，生成全局对象等操作。

02 draw()

在setup()函数中的程序执行完毕后，P5JS会接着执行draw()函数中的程序。draw()函数是一个死循环，其中的程序会不断地重复运行。通常在draw()函数中完成程序的主要功能，如画布内容更新与展示等。

二、示例程序

乐述云享为我们提供了很多帮助文档与案例，是很好的入门材料。

以下为最简示例程序：

为了在后续教程中直接为大家提供文字版的代码，P5JS组件的标识后续将不再展示。

例：

1. // 启动函数
2. function setup() {
3. // 创建一个500x500的画布
4. createCanvas(500, 500);
5. }
7. // 绘画函数
8. function draw() {
9. // 定义背景色
10. background(200);
11. // 定义文字对齐方式
12. textAlign(CENTER, CENTER);
13. // 在画布指定位置显示文字
14. text('Hello World!', 250, 250);
15. }
17. new p5();

三、运行效果

注意：轻文档支持分页，同页只允许使用一个P5JS组件。