01 如何描述方塊？

在俄羅斯方塊游戲的經(jīng)典模式中，方塊的基礎(chǔ)類型共有7種，如下圖所示。

通過(guò)對(duì)上圖中俄羅斯方塊的形狀分析，我們可以發(fā)現(xiàn)，無(wú)論是何種類型的方塊，都是在一個(gè)4x4大小的網(wǎng)格內(nèi)進(jìn)行設(shè)計(jì)的，每一個(gè)格子的狀態(tài)又可以分為空白與填充兩種狀態(tài)。通過(guò)填充相應(yīng)的格子，就可以繪制出方塊的形狀。

我們可以使用一維數(shù)組的概念來(lái)描述這個(gè)方塊，例：

此時(shí)方塊可以用[0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0]表示。

由于在設(shè)計(jì)的過(guò)程中還需要用不同的顏色來(lái)表示方塊的類型，因此我們可以將上述方塊描述中的非0數(shù)字，代表顏色類型，例如：1為紅色，2為黃色，3為綠色，4為青色等等，數(shù)字對(duì)應(yīng)哪種顏色不重要，只是用于區(qū)分類型。

02 如何在P5JS中繪制出方塊

（1）首先根據(jù) 教程，編寫(xiě)P5JS基礎(chǔ)函數(shù)；

（2）確定描述方塊的方式；

// 用于描述所有方塊類型，數(shù)組元素描述單個(gè)方塊var = [ [0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0 ]];// 用于描述方塊中每一個(gè)數(shù)字代表的顏色var = [ [255, 255, 255], // 0 代表空 [153, 0, 77],// 1];

若使用 設(shè)計(jì)方塊，可以通過(guò)調(diào)色盤(pán)獲取顏色的RGB值。

（3）如何在P5JS中繪制方塊；

(){ (500, 500);} draw() { (70); // 設(shè)置繪圖工具的填充色 fill(200); // 在(40, 40)這個(gè)坐標(biāo)上繪制一個(gè)長(zhǎng)為40，寬為40的正方形 rect(40, 40, 40, 40);}new p5();

（4）如何在P5JS中繪制網(wǎng)格；

(){ (500, 500);} draw() { (70); fill(200); rect(40, 40, 40, 40); rect(80, 40, 40, 40); rect(120, 40, 40, 40); rect(160, 40, 40, 40); rect(40, 80, 40, 40); rect(80, 80, 40, 40); rect(120, 80, 40, 40); rect(160, 80, 40, 40); rect(40, 120, 40, 40); rect(80, 120, 40, 40); rect(120, 120, 40, 40); rect(160, 120, 40, 40); rect(40, 160, 40, 40); rect(80, 160, 40, 40); rect(120, 160, 40, 40); rect(160, 160, 40, 40);}new p5();

上面這段就是傳說(shuō)中的屎山代碼，雖然確實(shí)能夠?qū)崿F(xiàn)效果，但是毫無(wú)算法可言，如果希望能夠提升編程思維，就一定要學(xué)習(xí)算法來(lái)進(jìn)行表達(dá)。

迭代01：

(){ (500, 500);} draw() { (70); fill(200); // 使用嵌套循環(huán)可以描述二維數(shù)組（即網(wǎng)格） for(var i = 0;i < 4;i++) {for(var j = 0;j < 4;j++) {rect((j*40+40), (i*40+40), 40, 40);} }}new p5();

迭代02：

(){ (500, 500);} draw() { (70); // 學(xué)會(huì)將一段完整的算法定義為函數(shù)，并提取關(guān)鍵參數(shù)，以控制函數(shù)最終的實(shí)現(xiàn)效果 this.(8, 8, 40);}// row：行數(shù)，col：列數(shù)，size：網(wǎng)格大小 (row, col, size) { fill(200); for(var i = 0;i < row;i++) {for(var j = 0;j < col;j++) {rect((j*size+size), (i*size+size), size, size);} }}new p5();

嘗試修改函數(shù)實(shí)參，可以看到要更改網(wǎng)格效果，就容易很多了，而無(wú)需考慮每一個(gè)格子的起點(diǎn)在哪個(gè)坐標(biāo)上。

(){ (500, 500);} draw() { (70); // 學(xué)會(huì)將一段完整的算法定義為函數(shù)，并提取關(guān)鍵參數(shù)，以控制函數(shù)最終的實(shí)現(xiàn)效果 this.(4, 8, 30);}// row：行數(shù)，col：列數(shù)，size：網(wǎng)格大小 (row, col, size) { fill(200); for(var i = 0;i < row;i++) {for(var j = 0;j < col;j++) {rect((j*size+size), (i*size+size), size, size);} }}new p5();

（5）解析方塊描述。

// 用于描述所有方塊類型，數(shù)組元素描述單個(gè)方塊var = [ [0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0 ]];// 用于描述方塊中每一個(gè)數(shù)字代表的顏色var = [ [255, 255, 255], // 0 代表空 [153, 0, 77],// 1]; (){ (500, 500);} draw() { (70); // 學(xué)會(huì)將一段完整的算法定義為函數(shù)，并提取關(guān)鍵參數(shù)，以控制函數(shù)最終的實(shí)現(xiàn)效果 this.(4, 4, 40); this.([0], 40);}// row：行數(shù)，col：列數(shù)，size：網(wǎng)格大小 (row, col, size) { fill(200); for(var i = 0;i < row;i++) {for(var j = 0;j < col;j++) {rect((j*size+size), (i*size+size), size, size);} }}// ：方塊描述 (, size) { for(var i = 0;i < 4;i++) {for(var j = 0;j < 4;j++) {// 方塊填充的顏色，需要由確定，但是方塊描述采用的是一維數(shù)組表示，因此需要通過(guò)算法，將二維數(shù)組中的位置，用算法轉(zhuǎn)為一維數(shù)組中的位置。var = [j+i*4];if( != 0) {var rgb = [];fill(rgb[0], rgb[1], rgb[2]);rect((j*size+size), (i*size+size), size, size);}} }}new p5();

方塊描述就學(xué)習(xí)到這里，給大家留一個(gè)作業(yè)，定義第二個(gè)方塊類型，并嘗試使用P5JS繪制出來(lái)。