目录
上一篇教程,我们学习了如何使用P5JS绘制方块,如果大家有认真完成作业,那P5JS的基本用法,你应该已经掌握了,请注意,本系列课程具有连续性特点,应尽可能掌握前一节课程内容后,再学习本章节。
上图为俄罗斯方块游戏的界面布局图,我们将通过学习P5JS的text()函数以及和文字格式相关的函数来完善游戏界面。
一、标题区
function setup() {
createCanvas(550, 550);
}
function draw() {
background(49);
// 标题区文本,以居中方式显示
// 第一个参数为水平对齐,可选参数:LEFT / CENTER / RIGHT
// 第二个参数为垂直对齐,可选参数:TOP / BOTTOM / CENTER / BASELINE
textAlign(CENTER, CENTER);
// 无描边
noStroke();
// 指定字体大小
textSize(24);
// 指定字体颜色
fill(200);
// 文本及定位信息
text("消失的方块", 460, 50);
textSize(12);
fill(96);
text("P5学院", 460, 50 + 32);
}
new p5();
二、玩法区
function setup() {
createCanvas(550, 550);
}
function draw() {
background(49);
//将静态信息定义成函数,尽可能让draw()函数结构清晰。
// 绘制标题区
this.drawTitle();
// 绘制玩法区
this.drawDesc();
}
function drawTitle() {
// 标题区文本,以居中方式显示
// 第一个参数为水平对齐,可选参数:LEFT / CENTER / RIGHT
// 第二个参数为垂直对齐,可选参数:TOP / BOTTOM / CENTER / BASELINE
textAlign(CENTER, CENTER);
// 无描边
noStroke();
// 指定字体大小
textSize(24);
// 指定字体颜色
fill(200);
// 文本及定位信息
text("消失的方块", 460, 50);
textSize(12);
fill(96);
text("P5学院", 460, 50 + 32);
}
function drawDesc() {
// 对齐方式:左对齐
textAlign(LEFT);
noStroke();
textSize(12);
fill(96);
text("w / W" ,420, 400); text("- 旋转" , 465, 400);
text("a / A" ,420, 430); text("- 左移" , 465, 430);
text("d / D" ,420, 460); text("- 右移", 465, 460);
text("s / S" ,420, 490); text("- 下降" , 465, 490);
}
new p5();
三、得分区
function setup() {
createCanvas(550, 550);
}
function draw() {
background(49);
//将静态信息定义成函数,尽可能让draw()函数结构清晰。
// 绘制标题区
this.drawTitle();
// 绘制玩法区
this.drawDesc();
// 绘制得分区
this.drawScore(1, 0, 0);
}
function drawTitle() {
// 标题区文本,以居中方式显示
// 第一个参数为水平对齐,可选参数:LEFT / CENTER / RIGHT
// 第二个参数为垂直对齐,可选参数:TOP / BOTTOM / CENTER / BASELINE
textAlign(CENTER, CENTER);
// 无描边
noStroke();
// 指定字体大小
textSize(24);
// 指定字体颜色
fill(200);
// 文本及定位信息
text("消失的方块", 460, 50);
textSize(12);
fill(96);
text("P5学院", 460, 50 + 32);
}
function drawDesc() {
// 对齐方式:左对齐
textAlign(LEFT);
noStroke();
textSize(12);
fill(96);
text("w / W" ,420, 400); text("- 旋转" , 465, 400);
text("a / A" ,420, 430); text("- 左移" , 465, 430);
text("d / D" ,420, 460); text("- 右移", 465, 460);
text("s / S" ,420, 490); text("- 下降" , 465, 490);
}
function drawScore(level, lines, scores) {
textAlign(CENTER, CENTER);
noStroke();
textSize(18);
fill(200);
text( "LEVEL "+level, 460, 140);
textSize(12);
fill(96);
text("LINES "+lines+"/10", 460, 140 + 32);
text("SCORES "+scores, 460, 140 + 32 + 18);
}
new p5();
四、预览区
// 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(550, 550);
}
function draw() {
background(49);
//将静态信息定义成函数,尽可能让draw()函数结构清晰。
// 绘制标题区
this.drawTitle();
// 绘制玩法区
this.drawDesc();
// 绘制得分区
this.drawScore(1, 0, 0);
// 绘制预览区(下一个生成的方块) - 由于当前还没有设计算法,所以我们先给一个指定的形状
this.drawPreview(cubeList[0]);
}
function drawTitle() {
// 标题区文本,以居中方式显示
// 第一个参数为水平对齐,可选参数:LEFT / CENTER / RIGHT
// 第二个参数为垂直对齐,可选参数:TOP / BOTTOM / CENTER / BASELINE
textAlign(CENTER, CENTER);
// 无描边
noStroke();
// 指定字体大小
textSize(24);
// 指定字体颜色
fill(200);
// 文本及定位信息
text("消失的方块", 460, 50);
textSize(12);
fill(96);
text("P5学院", 460, 50 + 32);
}
function drawDesc() {
// 对齐方式:左对齐
textAlign(LEFT);
noStroke();
textSize(12);
fill(96);
text("w / W" ,420, 400); text("- 旋转" , 465, 400);
text("a / A" ,420, 430); text("- 左移" , 465, 430);
text("d / D" ,420, 460); text("- 右移", 465, 460);
text("s / S" ,420, 490); text("- 下降" , 465, 490);
}
function drawScore(level, lines, scores) {
textAlign(CENTER, CENTER);
noStroke();
textSize(18);
fill(200);
text( "LEVEL "+level, 460, 140);
textSize(12);
fill(96);
text("LINES "+lines+"/10", 460, 140 + 32);
text("SCORES "+scores, 460, 140 + 32 + 18);
}
function drawPreview(shape) {
// 这部分如果看不懂的话,可以去前一个教程学习
drawGrid(4, 4, 18);
drawCube(shape, 18);
}
// row:行数,col:列数,size:网格大小
function drawGrid(row, col, size) {
stroke(145);
fill(49);
for(var i = 0;i < row;i++) {
for(var j = 0;j < col;j++) {
rect((j*size+425), (i*size+250), size, size);
}
}
}
// shape:方块描述
function drawCube(shape, size) {
stroke(145);
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+425), (i*size+250), size, size);
}
}
}
}
new p5();
五、游戏画面区
// 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(550, 550);
}
function draw() {
background(49);
//将静态信息定义成函数,尽可能让draw()函数结构清晰。
// 绘制标题区
this.drawTitle();
// 绘制玩法区
this.drawDesc();
// 绘制得分区
this.drawScore(1, 0, 0);
// 绘制预览区(下一个生成的方块) - 由于当前还没有设计算法,所以我们先给一个指定的形状
this.drawPreview(cubeList[0]);
// 绘制游戏画面区 - 由于当前还没有设计方块在画面中的更新与现实函数,所以我们先画背景图
this.drawGame();
}
function drawGame() {
stroke(100);
fill(60);
for(var i = 0;i < 36;i++) {
for(var j = 0;j < 16;j++) {
rect((j*14+100), (i*14+20), 14, 14);
}
}
}
function drawTitle() {
// 标题区文本,以居中方式显示
// 第一个参数为水平对齐,可选参数:LEFT / CENTER / RIGHT
// 第二个参数为垂直对齐,可选参数:TOP / BOTTOM / CENTER / BASELINE
textAlign(CENTER, CENTER);
// 无描边
noStroke();
// 指定字体大小
textSize(24);
// 指定字体颜色
fill(200);
// 文本及定位信息
text("消失的方块", 460, 50);
textSize(12);
fill(96);
text("P5学院", 460, 50 + 32);
}
function drawDesc() {
// 对齐方式:左对齐
textAlign(LEFT);
noStroke();
textSize(12);
fill(96);
text("w / W" ,420, 400); text("- 旋转" , 465, 400);
text("a / A" ,420, 430); text("- 左移" , 465, 430);
text("d / D" ,420, 460); text("- 右移", 465, 460);
text("s / S" ,420, 490); text("- 下降" , 465, 490);
}
function drawScore(level, lines, scores) {
textAlign(CENTER, CENTER);
noStroke();
textSize(18);
fill(200);
text( "LEVEL "+level, 460, 140);
textSize(12);
fill(96);
text("LINES "+lines+"/10", 460, 140 + 32);
text("SCORES "+scores, 460, 140 + 32 + 18);
}
function drawPreview(shape) {
// 这部分如果看不懂的话,可以去前一个教程学习
drawGrid(4, 4, 18);
drawCube(shape, 18);
}
// row:行数,col:列数,size:网格大小
function drawGrid(row, col, size) {
stroke(145);
fill(49);
for(var i = 0;i < row;i++) {
for(var j = 0;j < col;j++) {
rect((j*size+425), (i*size+250), size, size);
}
}
}
// shape:方块描述
function drawCube(shape, size) {
stroke(145);
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+425), (i*size+250), size, size);
}
}
}
}
new p5();