俄罗斯方块游戏界面设计

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

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

1. function setup() {
2. createCanvas(550, 550);
3. }
4. 
   
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);
19. 
    
20. textSize(12);
21. fill(96);
22. text("P5学院", 460, 50 32);
23. }
24. 
    
25. new p5();

1. function setup() {
2. createCanvas(550, 550);
3. }
4. 
   
5. function draw() {
6. background(49);
7. 
   
8. //将静态信息定义成函数，尽可能让draw()函数结构清晰。
9. // 绘制标题区
10. this.drawTitle();
11. 
    
12. // 绘制玩法区
13. this.drawDesc();
14. }
15. 
    
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);
29. 
    
30. textSize(12);
31. fill(96);
32. text("P5学院", 460, 50 32);
33. }
34. 
    
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. }
46. 
    
47. new p5();

1. function setup() {
2. createCanvas(550, 550);
3. }
4. 
   
5. function draw() {
6. background(49);
7. 
   
8. //将静态信息定义成函数，尽可能让draw()函数结构清晰。
9. // 绘制标题区
10. this.drawTitle();
11. 
    
12. // 绘制玩法区
13. this.drawDesc();
14. 
    
15. // 绘制得分区
16. this.drawScore(1, 0, 0);
17. }
18. 
    
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);
32. 
    
33. textSize(12);
34. fill(96);
35. text("P5学院", 460, 50 32);
36. }
37. 
    
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. }
49. 
    
50. function drawScore(level, lines, scores) {
51. textAlign(CENTER, CENTER);
52. noStroke();
53. 
    
54. textSize(18);
55. fill(200);
56. text( "LEVEL " level, 460, 140);
57. 
    
58. textSize(12);
59. fill(96);
60. text("LINES " lines "/10", 460, 140 32);
61. text("SCORES " scores, 460, 140 32 18);
62. }
63. 
    
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. ];
10. 
    
11. // pallette用于描述方块中每一个数字代表的颜色
12. var pallette = [
13. [255, 255, 255], // 0 代表空
14. [153, 0, 77], // 1
15. ];
16. 
    
17. function setup() {
18. createCanvas(550, 550);
19. }
20. 
    
21. function draw() {
22. background(49);
23. 
    
24. //将静态信息定义成函数，尽可能让draw()函数结构清晰。
25. // 绘制标题区
26. this.drawTitle();
27. 
    
28. // 绘制玩法区
29. this.drawDesc();
30. 
    
31. // 绘制得分区
32. this.drawScore(1, 0, 0);
33. 
    
34. // 绘制预览区（下一个生成的方块） - 由于当前还没有设计算法，所以我们先给一个指定的形状
35. this.drawPreview(cubeList[0]);
36. }
37. 
    
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);
51. 
    
52. textSize(12);
53. fill(96);
54. text("P5学院", 460, 50 32);
55. }
56. 
    
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. }
68. 
    
69. function drawScore(level, lines, scores) {
70. textAlign(CENTER, CENTER);
71. noStroke();
72. 
    
73. textSize(18);
74. fill(200);
75. text( "LEVEL " level, 460, 140);
76. 
    
77. textSize(12);
78. fill(96);
79. text("LINES " lines "/10", 460, 140 32);
80. text("SCORES " scores, 460, 140 32 18);
81. }
82. 
    
83. function drawPreview(shape) {
84. // 这部分如果看不懂的话，可以去前一个教程学习
85. drawGrid(4, 4, 18);
86. drawCube(shape, 18);
87. }
88. 
    
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. }
99. 
    
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. }
115. 
     
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. ];
10. 
    
11. // pallette用于描述方块中每一个数字代表的颜色
12. var pallette = [
13. [255, 255, 255], // 0 代表空
14. [153, 0, 77], // 1
15. ];
16. 
    
17. function setup() {
18. createCanvas(550, 550);
19. }
20. 
    
21. function draw() {
22. background(49);
23. 
    
24. //将静态信息定义成函数，尽可能让draw()函数结构清晰。
25. // 绘制标题区
26. this.drawTitle();
27. 
    
28. // 绘制玩法区
29. this.drawDesc();
30. 
    
31. // 绘制得分区
32. this.drawScore(1, 0, 0);
33. 
    
34. // 绘制预览区（下一个生成的方块） - 由于当前还没有设计算法，所以我们先给一个指定的形状
35. this.drawPreview(cubeList[0]);
36. 
    
37. // 绘制游戏画面区 - 由于当前还没有设计方块在画面中的更新与现实函数，所以我们先画背景图
38. this.drawGame();
39. }
40. 
    
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. }
50. 
    
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);
64. 
    
65. textSize(12);
66. fill(96);
67. text("P5学院", 460, 50 32);
68. }
69. 
    
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. }
81. 
    
82. function drawScore(level, lines, scores) {
83. textAlign(CENTER, CENTER);
84. noStroke();
85. 
    
86. textSize(18);
87. fill(200);
88. text( "LEVEL " level, 460, 140);
89. 
    
90. textSize(12);
91. fill(96);
92. text("LINES " lines "/10", 460, 140 32);
93. text("SCORES " scores, 460, 140 32 18);
94. }
95. 
    
96. function drawPreview(shape) {
97. // 这部分如果看不懂的话，可以去前一个教程学习
98. drawGrid(4, 4, 18);
99. drawCube(shape, 18);
100. }
101. 
     
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. }
112. 
     
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. }
128. 
     
129. new p5();