p5.js-俄罗斯方块小游戏系列教程之核心元素-方块

01 如何描述方块？

在俄罗斯方块游戏的经典模式中，方块的基础类型共有7种，如下图所示。

通过对上图中俄罗斯方块的形状分析，我们可以发现，无论是何种类型的方块，都是在一个4x4大小的网格内进行设计的，每一个格子的状态又可以分为空白与填充两种状态。通过填充相应的格子，就可以绘制出方块的形状。

我们可以使用一维数组的概念来描述这个方块，例：

此时方块可以用[0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0]表示。

由于在设计的过程中还需要用不同的颜色来表示方块的类型，因此我们可以将上述方块描述中的非0数字，代表颜色类型，例如：1为红色，2为黄色，3为绿色，4为青色等等，数字对应哪种颜色不重要，只是用于区分类型。

02 如何在P5JS中绘制出方块

（1）首先根据Hello World教程，编写P5JS基础函数；

Hello World

（2）确定描述方块的方式；

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. ];

若使用Aleshu DrawIO设计方块，可以通过调色盘获取颜色的RGB值。

（3）如何在P5JS中绘制方块；

1. function setup(){
2. createCanvas(500, 500);
3. }
5. function draw() {
6. background(70);
7. // 设置绘图工具的填充色
8. fill(200);
9. // 在(40, 40)这个坐标上绘制一个长为40，宽为40的正方形
10. rect(40, 40, 40, 40);
11. }
13. new p5();

（4）如何在P5JS中绘制网格；

1. function setup(){
2. createCanvas(500, 500);
3. }
5. function draw() {
6. background(70);
7. fill(200);
8. rect(40, 40, 40, 40);
9. rect(80, 40, 40, 40);
10. rect(120, 40, 40, 40);
11. rect(160, 40, 40, 40);
12. rect(40, 80, 40, 40);
13. rect(80, 80, 40, 40);
14. rect(120, 80, 40, 40);
15. rect(160, 80, 40, 40);
16. rect(40, 120, 40, 40);
17. rect(80, 120, 40, 40);
18. rect(120, 120, 40, 40);
19. rect(160, 120, 40, 40);
20. rect(40, 160, 40, 40);
21. rect(80, 160, 40, 40);
22. rect(120, 160, 40, 40);
23. rect(160, 160, 40, 40);
24. }
26. new p5();

上面这段就是传说中的屎山代码，虽然确实能够实现效果，但是毫无算法可言，如果希望能够提升编程思维，就一定要学习算法来进行表达。

迭代01：

1. function setup(){
2. createCanvas(500, 500);
3. }
5. function draw() {
6. background(70);
7. fill(200);
8. // 使用嵌套循环可以描述二维数组（即网格）
9. for(var i = 0;i < 4;i++) {
10. for(var j = 0;j < 4;j++) {
11. rect((j*40+40), (i*40+40), 40, 40);
12. }
13. }
14. }
16. new p5();

迭代02：

1. function setup(){
2. createCanvas(500, 500);
3. }
5. function draw() {
6. background(70);
7. // 学会将一段完整的算法定义为函数，并提取关键参数，以控制函数最终的实现效果
8. this.drawGrid(8, 8, 40);
9. }
11. // row：行数，col：列数，size：网格大小
12. function drawGrid(row, col, size) {
13. fill(200);
14. for(var i = 0;i < row;i++) {
15. for(var j = 0;j < col;j++) {
16. rect((j*size+size), (i*size+size), size, size);
17. }
18. }
19. }
21. new p5();

尝试修改函数实参，可以看到要更改网格效果，就容易很多了，而无需考虑每一个格子的起点在哪个坐标上。

1. function setup(){
2. createCanvas(500, 500);
3. }
5. function draw() {
6. background(70);
7. // 学会将一段完整的算法定义为函数，并提取关键参数，以控制函数最终的实现效果
8. this.drawGrid(4, 8, 30);
9. }
11. // row：行数，col：列数，size：网格大小
12. function drawGrid(row, col, size) {
13. fill(200);
14. for(var i = 0;i < row;i++) {
15. for(var j = 0;j < col;j++) {
16. rect((j*size+size), (i*size+size), size, size);
17. }
18. }
19. }
21. new p5();

（5）解析方块描述。

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(500, 500);
19. }
21. function draw() {
22. background(70);
23. // 学会将一段完整的算法定义为函数，并提取关键参数，以控制函数最终的实现效果
24. this.drawGrid(4, 4, 40);
25. this.drawCube(cubeList[0], 40);
26. }
28. // row：行数，col：列数，size：网格大小
29. function drawGrid(row, col, size) {
30. fill(200);
31. for(var i = 0;i < row;i++) {
32. for(var j = 0;j < col;j++) {
33. rect((j*size+size), (i*size+size), size, size);
34. }
35. }
36. }
38. // shape：方块描述
39. function drawCube(shape, size) {
41. for(var i = 0;i < 4;i++) {
42. for(var j = 0;j < 4;j++) {
43. // 方块填充的颜色，需要由pallette确定，但是方块描述采用的是一维数组表示，因此需要通过算法，将二维数组中的位置，用算法转为一维数组中的位置。
44. var cubeIndex = shape[j+i*4];
45. if(cubeIndex != 0) {
46. var rgb = pallette[cubeIndex];
47. fill(rgb[0], rgb[1], rgb[2]);
48. rect((j*size+size), (i*size+size), size, size);
49. }
50. }
51. }
52. }
54. new p5();

方块描述就学习到这里，给大家留一个作业，定义第二个方块类型，并尝试使用P5JS绘制出来