p5.js-俄罗斯方块小游戏系列教程之游戏界面设计

目录

一、标题区

二、玩法区

三、得分区

四、预览区

五、游戏画面区

---

上一篇教程，我们学习了如何使用P5JS绘制方块，如果大家有认真完成作业，那P5JS的基本用法，你应该已经掌握了，请注意，本系列课程具有连续性特点，应尽可能掌握前一节课程内容后，再学习本章节。

上图为俄罗斯方块游戏的界面布局图，我们将通过学习P5JS的text()函数以及和文字格式相关的函数来完善游戏界面。

一、标题区

1. function setup() {
2. createCanvas(550, 550);
3. }
5. function draw() {
6. background(49);
7. // 标题区文本，以居中方式显示
8. // 第一个参数为水平对齐，可选参数：LEFT / CENTER / RIGHT
9. // 第二个参数为垂直对齐，可选参数：TOP / BOTTOM / CENTER / BASELINE
10. textAlign(CENTER, CENTER);
11. // 无描边
12. noStroke();
13. // 指定字体大小
14. textSize(24);
15. // 指定字体颜色
16. fill(200);
17. // 文本及定位信息
18. text("消失的方块", 460, 50);
20. textSize(12);
21. fill(96);
22. text("P5学院", 460, 50 + 32);
23. }
25. new p5();

二、玩法区

1. function setup() {
2. createCanvas(550, 550);
3. }
5. function draw() {
6. background(49);
8. //将静态信息定义成函数，尽可能让draw()函数结构清晰。
9. // 绘制标题区
10. this.drawTitle();
12. // 绘制玩法区
13. this.drawDesc();
14. }
16. function drawTitle() {
17. // 标题区文本，以居中方式显示
18. // 第一个参数为水平对齐，可选参数：LEFT / CENTER / RIGHT
19. // 第二个参数为垂直对齐，可选参数：TOP / BOTTOM / CENTER / BASELINE
20. textAlign(CENTER, CENTER);
21. // 无描边
22. noStroke();
23. // 指定字体大小
24. textSize(24);
25. // 指定字体颜色
26. fill(200);
27. // 文本及定位信息
28. text("消失的方块", 460, 50);
30. textSize(12);
31. fill(96);
32. text("P5学院", 460, 50 + 32);
33. }
35. function drawDesc() {
36. // 对齐方式：左对齐
37. textAlign(LEFT);
38. noStroke();
39. textSize(12);
40. fill(96);
41. text("w / W" ,420, 400); text("- 旋转" , 465, 400);
42. text("a / A" ,420, 430); text("- 左移" , 465, 430);
43. text("d / D" ,420, 460); text("- 右