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("- 右移", 465, 460);
44. text("s / S" ,420, 490); text("- 下降" , 465, 490);
45. }
47. 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();
15. // 绘制得分区
16. this.drawScore(1, 0, 0);
17. }
19. function drawTitle() {
20. // 标题区文本，以居中方式显示
21. // 第一个参数为水平对齐，可选参数：LEFT / CENTER / RIGHT
22. // 第二个参数为垂直对齐，可选参数：TOP / BOTTOM / CENTER / BASELINE
23. textAlign(CENTER, CENTER);
24. // 无描边
25. noStroke();
26. // 指定字体大小
27. textSize(24);
28. // 指定字体颜色
29. fill(200);
30. // 文本及定位信息
31. text("消失的方块", 460, 50);
33. textSize(12);
34. fill(96);
35. text("P5学院", 460, 50 + 32);
36. }
38. function drawDesc() {
39. // 对齐方式：左对齐
40. textAlign(LEFT);
41. noStroke();
42. textSize(12);
43. fill(96);
44. text("w / W" ,420, 400); text("- 旋转" , 465, 400);
45. text("a / A" ,420, 430); text("- 左移" , 465, 430);
46. text("d / D" ,420, 460); text("- 右移", 465, 460);
47. text("s / S" ,420, 490); text("- 下降" , 465, 490);
48. }
50. function drawScore(level, lines, scores) {
51. textAlign(CENTER, CENTER);
52. noStroke();
54. textSize(18);
55. fill(200);
56. text( "LEVEL "+level, 460, 140);
58. textSize(12);
59. fill(96);
60. text("LINES "+lines+"/10", 460, 140 + 32);
61. text("SCORES "+scores, 460, 140 + 32 + 18);
62. }
64. new p5();

四、预览区

1. // cubeList用于描述所有方块类型，数组元素描述单个方块
2. var cubeList = [
3. [
4. 0,0,0,0,
5. 0,1,0,0,
6. 0,1,1,1,
7. 0,0,0,0
8. ]
9. ];
11. // pallette用于描述方块中每一个数字代表的颜色
12. var pallette = [
13. [255, 255, 255], // 0 代表空
14. [153, 0, 77], // 1
15. ];
17. function setup() {
18. createCanvas(550, 550);
19. }
21. function draw() {
22. background(49);
24. //将静态信息定义成函数，尽可能让draw()函数结构清晰。
25. // 绘制标题区
26. this.drawTitle();
28. // 绘制玩法区
29. this.drawDesc();
31. // 绘制得分区
32. this.drawScore(1, 0, 0);
34. // 绘制预览区（下一个生成的方块） - 由于当前还没有设计算法，所以我们先给一个指定的形状
35. this.drawPreview(cubeList[0]);
36. }
38. function drawTitle() {
39. // 标题区文本，以居中方式显示
40. // 第一个参数为水平对齐，可选参数：LEFT / CENTER / RIGHT
41. // 第二个参数为垂直对齐，可选参数：TOP / BOTTOM / CENTER / BASELINE
42. textAlign(CENTER, CENTER);
43. // 无描边
44. noStroke();
45. // 指定字体大小
46. textSize(24);
47. // 指定字体颜色
48. fill(200);
49. // 文本及定位信息
50. text("消失的方块", 460, 50);
52. textSize(12);
53. fill(96);
54. text("P5学院", 460, 50 + 32);
55. }
57. function drawDesc() {
58. // 对齐方式：左对齐
59. textAlign(LEFT);
60. noStroke();
61. textSize(12);
62. fill(96);
63. text("w / W" ,420, 400); text("- 旋转" , 465, 400);
64. text("a / A" ,420, 430); text("- 左移" , 465, 430);
65. text("d / D" ,420, 460); text("- 右移", 465, 460);
66. text("s / S" ,420, 490); text("- 下降" , 465, 490);
67. }
69. function drawScore(level, lines, scores) {
70. textAlign(CENTER, CENTER);
71. noStroke();
73. textSize(18);
74. fill(200);
75. text( "LEVEL "+level, 460, 140);
77. textSize(12);
78. fill(96);
79. text("LINES "+lines+"/10", 460, 140 + 32);
80. text("SCORES "+scores, 460, 140 + 32 + 18);
81. }
83. function drawPreview(shape) {
84. // 这部分如果看不懂的话，可以去前一个教程学习
85. drawGrid(4, 4, 18);
86. drawCube(shape, 18);
87. }
89. // row：行数，col：列数，size：网格大小
90. function drawGrid(row, col, size) {
91. stroke(145);
92. fill(49);
93. for(var i = 0;i < row;i++) {
94. for(var j = 0;j < col;j++) {
95. rect((j*size+425), (i*size+250), size, size);
96. }
97. }
98. }
100. // shape：方块描述
101. function drawCube(shape, size) {
102. stroke(145);
103. for(var i = 0;i < 4;i++) {
104. for(var j = 0;j < 4;j++) {
105. // 方块填充的颜色，需要由pallette确定，但是方块描述采用的是一维数组表示，因此需要通过算法，将二维数组中的位置，用算法转为一维数组中的位置。
106. var cubeIndex = shape[j+i*4];
107. if(cubeIndex != 0) {
108. var rgb = pallette[cubeIndex];
109. fill(rgb[0], rgb[1], rgb[2]);
110. rect((j*size+425), (i*size+250), size, size);
111. }
112. }
113. }
114. }
116. new p5();

五、游戏画面区

1. // cubeList用于描述所有方块类型，数组元素描述单个方块
2. var cubeList = [
3. [
4. 0,0,0,0,
5. 0,1,0,0,
6. 0,1,1,1,
7. 0,0,0,0
8. ]
9. ];
11. // pallette用于描述方块中每一个数字代表的颜色
12. var pallette = [
13. [255, 255, 255], // 0 代表空
14. [153, 0, 77], // 1
15. ];
17. function setup() {
18. createCanvas(550, 550);
19. }
21. function draw() {
22. background(49);
24. //将静态信息定义成函数，尽可能让draw()函数结构清晰。
25. // 绘制标题区
26. this.drawTitle();
28. // 绘制玩法区
29. this.drawDesc();
31. // 绘制得分区
32. this.drawScore(1, 0, 0);
34. // 绘制预览区（下一个生成的方块） - 由于当前还没有设计算法，所以我们先给一个指定的形状
35. this.drawPreview(cubeList[0]);
37. // 绘制游戏画面区 - 由于当前还没有设计方块在画面中的更新与现实函数，所以我们先画背景图
38. this.drawGame();
39. }
41. function drawGame() {
42. stroke(100);
43. fill(60);
44. for(var i = 0;i < 36;i++) {
45. for(var j = 0;j < 16;j++) {
46. rect((j*14+100), (i*14+20), 14, 14);
47. }
48. }
49. }
51. function drawTitle() {
52. // 标题区文本，以居中方式显示
53. // 第一个参数为水平对齐，可选参数：LEFT / CENTER / RIGHT
54. // 第二个参数为垂直对齐，可选参数：TOP / BOTTOM / CENTER / BASELINE
55. textAlign(CENTER, CENTER);
56. // 无描边
57. noStroke();
58. // 指定字体大小
59. textSize(24);
60. // 指定字体颜色
61. fill(200);
62. // 文本及定位信息
63. text("消失的方块", 460, 50);
65. textSize(12);
66. fill(96);
67. text("P5学院", 460, 50 + 32);
68. }
70. function drawDesc() {
71. // 对齐方式：左对齐
72. textAlign(LEFT);
73. noStroke();
74. textSize(12);
75. fill(96);
76. text("w / W" ,420, 400); text("- 旋转" , 465, 400);
77. text("a / A" ,420, 430); text("- 左移" , 465, 430);
78. text("d / D" ,420, 460); text("- 右移", 465, 460);
79. text("s / S" ,420, 490); text("- 下降" , 465, 490);
80. }
82. function drawScore(level, lines, scores) {
83. textAlign(CENTER, CENTER);
84. noStroke();
86. textSize(18);
87. fill(200);
88. text( "LEVEL "+level, 460, 140);
90. textSize(12);
91. fill(96);
92. text("LINES "+lines+"/10", 460, 140 + 32);
93. text("SCORES "+scores, 460, 140 + 32 + 18);
94. }
96. function drawPreview(shape) {
97. // 这部分如果看不懂的话，可以去前一个教程学习
98. drawGrid(4, 4, 18);
99. drawCube(shape, 18);
100. }
102. // row：行数，col：列数，size：网格大小
103. function drawGrid(row, col, size) {
104. stroke(145);
105. fill(49);
106. for(var i = 0;i < row;i++) {
107. for(var j = 0;j < col;j++) {
108. rect((j*size+425), (i*size+250), size, size);
109. }
110. }
111. }
113. // shape：方块描述
114. function drawCube(shape, size) {
115. stroke(145);
116. for(var i = 0;i < 4;i++) {
117. for(var j = 0;j < 4;j++) {
118. // 方块填充的颜色，需要由pallette确定，但是方块描述采用的是一维数组表示，因此需要通过算法，将二维数组中的位置，用算法转为一维数组中的位置。
119. var cubeIndex = shape[j+i*4];
120. if(cubeIndex != 0) {
121. var rgb = pallette[cubeIndex];
122. fill(rgb[0], rgb[1], rgb[2]);
123. rect((j*size+425), (i*size+250), size, size);
124. }
125. }
126. }
127. }
129. new p5();