canvas实现俄罗斯方块的方法示例

好久没使用canvas了，于是通过写小游戏“俄罗斯方块”再次熟悉下canvas，如果有一定的canvas基础，要实现还是不难的。

原理详解

看游戏最终界面，可知需要实现以下关键功能：

游戏面板，也就是12 * 20的方格，以及是否填充了方块信息；
运动方块，方块需要实现移动，变形的功能。
 

界面的实现

整个面板就是以左上角（0,0）为原点的坐标系，右上角（12,0）左下角（0,20）右下角（12,20），每个点的坐标位置都可以确定。是否已经填充方块，我们可以将每个方格看成一个数组元素，0表示没有，1表示已经填充。12 * 20 的面板使用两层数组，即用20个长度为12的数组实现。

var maps = [[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,1,0], ...];

画出面板的代码，用最基础的canvas的api就能实现

//格子
for(var i=0;i<12;i++){
for(var j=0;j<20;j++){
ctx.fillRect(i*40,j*40,40,40);
ctx.strokeRect(i*40,j*40,40,40);
if(this.maps[j][i]==1){//方格已经有填充内容
ctx.save();
ctx.lineWidth=4;
ctx.fillStyle='hsla(200,100%,50%,.5)';
ctx.strokeStyle='hsla(200,100%,50%,.9)';
ctx.fillRect(i*40,j*40,40,40);
ctx.strokeRect(i*40+2,j*40+2,38,38);
ctx.restore();
}
}
}
 //边框
ctx.lineWidth=4;
ctx.strokeStyle='hsla(0,100%,0%,.3)';
ctx.moveTo(0,0);
ctx.lineTo(0,20*40);
ctx.lineTo(12*40,20*40);
ctx.lineTo(12*40,0);
ctx.stroke();
ctx.restore();

方块的实现

游戏中用到以下 7 种图形

结合上面介绍的坐标系，数组 [x1, y1, x2, y2, x3, y3, x4, y4] 就是上面图形中4个点坐标的数据表现形式，7 种图形的坐标分别如下：

var Arr = [[4,0,4,1,5,1,6,1],[4,1,5,1,6,1,6,0],[4,0,5,0,5,1,6,1],[4,1,5,0,5,1,6,0],
[5,0,4,1,5,1,6,1],[4,0,5,0,6,0,7,0],[5,0,6,0,5,1,6,1]];

方块的移动，遍历整个数组，加上位移向量就行，非常简单

class Shape {
constructor(m){
this.m = Object.assign([],m);
}
move(x,y){ // 位移
var m = this.m,
l = m.length;
y = y||0;
 for (var i=0;i<l;i=i+2){
m[i]+=x;
m[i+1]+=y;
}
return this;
}

方块的旋转，俄罗斯方块里面方块除了左右和上下运动，还会旋转，不是吗？稍微思考下就知道，这不过就是矩阵变换而已，也就是每次图形绕中心点旋转90度。我这里用数组第三个点作为图形变换的中心点，当然这样处理不够完善。