var的定义及算法

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基础函数；

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

10. 
    

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. }

4. 
   

5. function draw() {

6. background(70);

7. // 设置绘图工具的填充色

8. fill(200);

9. // 在(40, 40)这个坐标上绘制一个长为40，宽为40的正方形

10. rect(40, 40, 40, 40);

11. }

12. 
    

13. new p5();

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

1. function setup(){

2. createCanvas(500, 500);

3. }

4. 
   

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. }

25. 
    

26. new p5();

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

迭代01：

1. function setup(){

2. createCanvas(500, 500);

3. }

4. 
   

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. }

15. 
    

16. new p5();

迭代02：

1. function setup(){

2. createCanvas(500, 500);

3. }

4. 
   

5. function draw() {

6. background(70);

7. // 学会将一段完整的算法定义为函数，并提取关键参数，以控制函数最终的实现效果

8. this.drawGrid(8, 8, 40);

9. }

10. 
    

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. }

20. 
    

21. new p5();

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

1. function setup(){

2. createCanvas(500, 500);

3. }

4. 
   

5. function draw() {

6. background(70);

7. // 学会将一段完整的算法定义为函数，并提取关键参数，以控制函数最终的实现效果

8. this.drawGrid(4, 8, 30);

9. }

10. 
    

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. }

20. 
    

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

10. 
    

11. // pallette用于描述方块中每一个数字代表的颜色

12. var pallette = [

13. [255, 255, 255], // 0 代表空

14. [153, 0, 77], // 1

15. ];

16. 
    

17. function setup(){

18. createCanvas(500, 500);

19. }

20. 
    

21. function draw() {

22. background(70);

23. // 学会将一段完整的算法定义为函数，并提取关键参数，以控制函数最终的实现效果

24. this.drawGrid(4, 4, 40);

25. this.drawCube(cubeList[0], 40);

26. }

27. 
    

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. }

37. 
    

38. // shape：方块描述

39. function drawCube(shape, size) {

40. 
    

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. }

53. 
    

54. new p5();

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

想要了解更多相关资讯可以关注并私信我哟！！~~

赵雷宝3934一道小学奥数甲乙两种商品成本共200元,甲商品按30%的利润定价
家砖沾15760545258 ______ 设甲商品的成本是x元,那么乙商品的成本就是(200-x)元 [x(1+30%)+(200-x)(1+20%)]*0.9=200+27.7 解得x=130 200-130=70元 答:甲乙两种商品的成本各是130和70元.

赵雷宝39341乘3等于3等于2的2次方减1;3乘5等于15等于4的2次方..?
家砖沾15760545258 ______ (n+1)*(n-1) =(n+1)*n-(n+1)*1 =(n*n+n)-(n+1) =n*n+n-n-1 =n*n-1 =n^2-1 即得: (n+1)*(n-1)=n^2-1 基中N为自然数

赵雷宝3934给男孩留的小辫子,是有什么说法么?请妈妈们指教
家砖沾15760545258 ______ 留的时候千万不能剪,据说如果要剪就一定要让全活人儿(好像意思是家里老人全部建在的人)给剪,要不对孩子 ... 要是对孩子不好,那就不留了

赵雷宝3934粤语怎么说好姑娘?好姑娘,我也是这样觉得,粤语怎么说
家砖沾15760545258 ______ 我系一个好女仔. 需要发音的话可追问.

赵雷宝3934什么是汽轮机的寿命?
家砖沾15760545258 ______ 在高温下长期运行的汽轮机,其零部件的材料性能发生 很大的变化,使其强度下降,以至出现裂纹.汽轮机的寿命是指 从初次投人运行到转子出现第一条宏观裂纹期间的总工作时间. 对于宏观裂纹的尺寸一般认为长度为0. 2〜0. 5mm.

赵雷宝3934教堂旁边的那个敲钟人用5颗星星换一个地牢的钥匙,那里面有什么东西?
家砖沾15760545258 ______ 热气球设计图!

赵雷宝3934宝丽雅风繁体字怎么?宝丽雅风繁体字怎么写
家砖沾15760545258 ______ 这样写:宝丽雅风.

赵雷宝3934货币兑换里的CNY人民币中的CNY是什么意思?AUD澳大利亚元C
家砖沾15760545258 ______ 前2位是国家名称的编写,后一位是该国家货币名称的缩写. 如CNY,CN是CHINA的缩写,Y是YUANG的缩写. GRP,GR是GREAT BRITIAN 大不列颠王国 P是镑

赵雷宝3934JavaScript如何定义函数,它与Java中的方法有哪些不同? -
家砖沾15760545258 ______ <script type=＂text/javascript＂> function 函数名(参数) { 具体算法 }</script> js和java虽然看起来很像,不过实际上关系不大的..连制作公司都不同,要说JS函数和java的方法有相似之处的话也就是都是先定义再调用,可以传递参数

赵雷宝3934求初等数论的基本概念,基本理论和定理等,越全越好,多谢了! -
家砖沾15760545258 ______ 第一章 有关数论的算法1.1 最大公约数与最小公倍数1.2 有关素数的算法1.3 方程ax+by=c的整数解及应用1.4 求a^b mod n1.1最大公约数与最小公倍数 1.算法1: 欧几里德算法求a,b的最大公约数 function gcd(a,b:longint):longint; begin if b=0 then ...