龙空技术网

俄罗斯方块游戏中的核心元素-方块

乐述云享 140

前言:

目前朋友们对“俄罗斯方块说明”大体比较讲究,各位老铁们都想要剖析一些“俄罗斯方块说明”的相关文章。那么小编同时在网摘上搜集了一些关于“俄罗斯方块说明””的相关内容,希望你们能喜欢,小伙伴们快快来学习一下吧!

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)确定描述方块的方式;

// cubeList用于描述所有方块类型,数组元素描述单个方块var cubeList = [[0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0]];

// pallette用于描述方块中每一个数字代表的颜色var pallette = [[255, 255, 255], // 0 代表空[153, 0, 77], // 1];

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

(3)如何在P5JS中绘制方块;

function setup(){createCanvas(500, 500);}

function draw() {background(70);// 设置绘图工具的填充色fill(200);// 在(40, 40)这个坐标上绘制一个长为40,宽为40的正方形rect(40, 40, 40, 40);}

new p5();

(4)如何在P5JS中绘制网格;

function setup(){createCanvas(500, 500);}

function draw() {background(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();

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

迭代01:

function setup(){createCanvas(500, 500);}

function draw() {background(70);fill(200);// 使用嵌套循环可以描述二维数组(即网格)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:

function setup(){createCanvas(500, 500);}

function draw() {background(70);// 学会将一段完整的算法定义为函数,并提取关键参数,以控制函数最终的实现效果this.drawGrid(8, 8, 40);}

// row:行数,col:列数,size:网格大小function drawGrid(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();

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

function setup(){createCanvas(500, 500);}

function draw() {background(70);// 学会将一段完整的算法定义为函数,并提取关键参数,以控制函数最终的实现效果this.drawGrid(4, 8, 30);}

// row:行数,col:列数,size:网格大小function drawGrid(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)解析方块描述。

// cubeList用于描述所有方块类型,数组元素描述单个方块var cubeList = [[0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0]];

// pallette用于描述方块中每一个数字代表的颜色var pallette = [[255, 255, 255], // 0 代表空[153, 0, 77], // 1];

function setup(){createCanvas(500, 500);}

function draw() {background(70);// 学会将一段完整的算法定义为函数,并提取关键参数,以控制函数最终的实现效果this.drawGrid(4, 4, 40);this.drawCube(cubeList[0], 40);}

// row:行数,col:列数,size:网格大小function drawGrid(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);}}}

// shape:方块描述function drawCube(shape, size) {

for(var i = 0;i < 4;i++) {for(var j = 0;j < 4;j++) {// 方块填充的颜色,需要由pallette确定,但是方块描述采用的是一维数组表示,因此需要通过算法,将二维数组中的位置,用算法转为一维数组中的位置。var cubeIndex = shape[j+i*4];if(cubeIndex != 0) {var rgb = pallette[cubeIndex];fill(rgb[0], rgb[1], rgb[2]);rect((j*size+size), (i*size+size), size, size);}}}}

new p5();

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

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

标签: #俄罗斯方块说明