JavaScript编写2D俄罗斯方块浏览器无显示问题求助

嗨，我帮你排查了代码里的几个小错误，正是这些问题导致页面完全空白的，咱们一个个来修正：

1. 画布填充代码的语法错误 #

你写的填充画布代码完全写错了——fillRect是Canvas上下文的直接调用方法，不需要额外加getContext；而且你已经用context.scale(20,20)做了缩放，填充的尺寸要对应缩放后的比例才对：

错误代码：

context.fillRect.getContext(0, 0 , context.width, context.height);

修正后：

// 画布原始宽240/缩放20=12，高400/缩放20=20，对应缩放后的坐标尺寸
context.fillRect(0, 0, canvas.width / 20, canvas.height / 20);

2. 数组遍历方法的拼写错误 #

你把forEach写成了forEarch，这个拼写失误会导致遍历代码直接报错，方块自然画不出来：

错误代码：

row.forEarch((value, x) => {

修正后：

row.forEach((value, x) => {

3. 函数参数不匹配 #

你定义drawMatrix函数的时候没设置参数，但调用的时候却传了matrix，这样函数内部根本拿不到要绘制的矩阵数据：

错误代码：

function drawMatrix(){

修正后：

function drawMatrix(matrix){

完整修正后的JavaScript代码 #

const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');

context.scale(20,20);
context.fillStyle = 'black';
// 修正填充画布的代码
context.fillRect(0, 0, canvas.width / 20, canvas.height / 20);

const matrix = [
  [0, 0, 0],
  [1, 1, 1],
  [0, 1, 0]
];

// 给函数加上参数
function drawMatrix(matrix){
  matrix.forEach((row, y) => {
    // 修正forEach的拼写
    row.forEach((value, x) => {
      if (value != 0) {
        context.fillStyle = 'red';
        context.fillRect(x, y, 1, 1);
      }
    });
  });
}

drawMatrix(matrix);

现在把修正后的JS代码替换原来的文件，刷新浏览器就能看到黑色画布上的红色T型方块啦！

内容的提问来源于stack exchange，提问作者jmin22