javascript实现俄罗斯方块游戏的思路和方法

实现俄罗斯方块游戏一般需要以下几个步骤：

1. 界面搭建

首先需要在页面上创建一个游戏画布，使用 canvas 标签元素可以很好地实现这一效果。然后需要设置画布的宽高，并使用一个二维数组来代表游戏的网格。每个网格可以对应一个小方块。

示例代码：

<canvas id="canvas" width="400" height="600"></canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ROW_COUNT = 20; // 行数
var COLUMN_COUNT = 10; // 列数
var GRID_SIZE = 30; // 网格大小
var grid = []; // 代表游戏网格的二维数组
for (var i = 0; i < ROW_COUNT; i++) {
  grid[i] = [];
  for (var j = 0; j < COLUMN_COUNT; j++) {
    grid[i][j] = 0;
  }
}

2. 方块生成

游戏中需要随机生成七种方块中的一种，每种方块可以由四个小方块组成。可以使用一个对象数组来表示所有的方块，每个对象包含方块的类型、颜色和四个小方块的相对位置。

示例代码：

var BLOCKS = [
  {
    type: "I",
    color: "#0099cc",
    cells: [
      {r: -1, c: 0},
      {r: 0, c: 0},
      {r: 1, c: 0},
      {r: 2, c: 0}
    ]
  },
  {
    type: "J",
    color: "#336699",
    cells: [
      {r: -1, c: -1},
      {r: -1, c: 0},
      {r: 0, c: 0},
      {r: 1, c: 0},
    ]
  },
  ...
];
var currentBlock = null; // 当前正在操作的方块
var nextBlock = null; // 下一次要生成的方块
...
/**
 * 生成随机方块
 */
function generateBlock() {
  var index = Math.floor(Math.random() * BLOCKS.length);
  var block = BLOCKS[index];
  nextBlock = {
    type: block.type,
    color: block.color
  };
  currentBlock = {
    type: block.type,
    color: block.color,
    cells: []
  };
  for (var i = 0; i < block.cells.length; i++) {
    var cell = block.cells[i];
    var r = cell.r + 1;
    var c = cell.c + Math.floor(COLUMN_COUNT / 2) - 1;
    currentBlock.cells.push({r: r, c: c});
    if (grid[r][c] === 1) {
      console.log("game over");
    }
  }
}

3. 方块移动

当玩家按下方向键时，可以改变方块的位置。每次移动需要根据方向键的方向对方块进行调整。如果方块移动到了画布的边缘或者碰到了其他方块，就不能再移动。

示例代码：

document.addEventListener("keydown", function(event) {
  switch(event.keyCode) {
    case 37: // left
      moveLeft();
      break;
    case 38: // up
      rotate();
      break;
    case 39: // right
      moveRight();
      break;
    case 40: // down
      moveDown();
      break;
  }
});
/**
 * 方块向左移动一格
 */
function moveLeft() {
  for (var i = 0; i < currentBlock.cells.length; i++) {
    var cell = currentBlock.cells[i];
    var r = cell.r;
    var c = cell.c - 1;
    if (c < 0 || grid[r][c] === 1) {
      return;
    }
  }
  for (var i = 0; i < currentBlock.cells.length; i++) {
    var cell = currentBlock.cells[i];
    cell.c--;
  }
}
/**
 * 方块向右移动一格
 */
function moveRight() {
  for (var i = 0; i < currentBlock.cells.length; i++) {
    var cell = currentBlock.cells[i];
    var r = cell.r;
    var c = cell.c + 1;
    if (c >= COLUMN_COUNT || grid[r][c] === 1) {
      return;
    }
  }
  for (var i = 0; i < currentBlock.cells.length; i++) {
    var cell = currentBlock.cells[i];
    cell.c++;
  }
}
/**
 * 方块向下移动一格
 */
function moveDown() {
  for (var i = 0; i < currentBlock.cells.length; i++) {
    var cell = currentBlock.cells[i];
    var r = cell.r + 1;
    var c = cell.c;
    if (r >= ROW_COUNT || grid[r][c] === 1) {
      fixBlock();
      return;
    }
  }
  for (var i = 0; i < currentBlock.cells.length; i++) {
    var cell = currentBlock.cells[i];
    cell.r++;
  }
}
/**
 * 顺时针旋转方块
 */
function rotate() {
  ...
}

4. 方块固定

当方块不能再向下移动时，需要把方块固定在网格中。固定时需要把网格中对应位置的值设置为 1 ，表示该位置已经被占用。然后需要生成一个新的方块，并检查当前是否有一行被填满，如果有，则需要消除该行，并将上面的所有行下移一格。

示例代码：

/**
 * 固定方块
 */
function fixBlock() {
  for (var i = 0; i < currentBlock.cells.length; i++) {
    var cell = currentBlock.cells[i];
    var r = cell.r;
    var c = cell.c;
    grid[r][c] = 1;
  }
  checkRows();
  generateBlock();
}
/**
 * 检查并消除已填满的行
 */
function checkRows() {
  for (var i = ROW_COUNT - 1; i >= 0; i--) {
    var full = true;
    for (var j = 0; j < COLUMN_COUNT; j++) {
      if (grid[i][j] !== 1) {
        full = false;
        break;
      }
    }
    if (full) {
      for (var k = i; k > 0; k--) {
        for (var j = 0; j < COLUMN_COUNT; j++) {
          grid[k][j] = grid[k - 1][j];
        }
      }
      i++;
    }
  }
}

以上就是实现俄罗斯方块游戏的基本思路和方法。在具体实现中还需要考虑许多细节问题，例如方块的颜色、画布的边框样式、计分系统等等。

以下是一个完整的示例代码：https://codepen.io/muhang/pen/xxZBOWq