如何在p5.js中旋转俄罗斯方块？

在p5.js中旋转俄罗斯方块，可以通过以下步骤实现：

首先，需要定义一个二维数组来表示俄罗斯方块的形状。每个方块可以用一个数字来表示，例如0表示空白，1表示方块。
创建一个函数来绘制俄罗斯方块的形状。可以使用p5.js的rect函数来绘制方块，根据二维数组的值确定方块的位置和颜色。
定义一个变量来表示当前方块的位置和形状。可以使用一个对象来保存方块的坐标和形状信息。
创建一个函数来旋转方块。可以通过改变方块的形状数组来实现旋转。可以使用p5.js的rotate函数来旋转方块。
在p5.js的draw函数中，使用一个定时器来控制方块的下落速度。在每次绘制之前，检查方块是否可以继续下落，如果可以则更新方块的位置，否则将方块固定在当前位置，并生成一个新的方块。

下面是一个简单的示例代码：

let block;
let grid;
let blockSize = 30;

function setup() {
  createCanvas(300, 600);
  grid = createGrid(10, 20);
  block = createBlock();
}

function draw() {
  background(220);
  drawGrid();
  drawBlock();
  
  if (canMoveDown()) {
    moveDown();
  } else {
    lockBlock();
    block = createBlock();
  }
}

function keyPressed() {
  if (keyCode === LEFT_ARROW && canMoveLeft()) {
    moveLeft();
  } else if (keyCode === RIGHT_ARROW && canMoveRight()) {
    moveRight();
  } else if (keyCode === UP_ARROW) {
    rotateBlock();
  } else if (keyCode === DOWN_ARROW && canMoveDown()) {
    moveDown();
  }
}

function createGrid(cols, rows) {
  let grid = [];
  for (let i = 0; i < rows; i++) {
    grid.push(Array(cols).fill(0));
  }
  return grid;
}

function drawGrid() {
  for (let i = 0; i < grid.length; i++) {
    for (let j = 0; j < grid[i].length; j++) {
      if (grid[i][j] === 1) {
        fill(0);
      } else {
        fill(255);
      }
      rect(j * blockSize, i * blockSize, blockSize, blockSize);
    }
  }
}

function createBlock() {
  let block = {};
  block.shape = [
    [1, 1],
    [1, 1]
  ];
  block.x = floor(grid[0].length / 2) - 1;
  block.y = 0;
  return block;
}

function drawBlock() {
  for (let i = 0; i < block.shape.length; i++) {
    for (let j = 0; j < block.shape[i].length; j++) {
      if (block.shape[i][j] === 1) {
        fill(0);
        rect((block.x + j) * blockSize, (block.y + i) * blockSize, blockSize, blockSize);
      }
    }
  }
}

function canMoveDown() {
  for (let i = 0; i < block.shape.length; i++) {
    for (let j = 0; j < block.shape[i].length; j++) {
      if (block.shape[i][j] === 1) {
        let nextRow = block.y + i + 1;
        if (nextRow >= grid.length || grid[nextRow][block.x + j] === 1) {
          return false;
        }
      }
    }
  }
  return true;
}

function moveDown() {
  block.y++;
}

function lockBlock() {
  for (let i = 0; i < block.shape.length; i++) {
    for (let j = 0; j < block.shape[i].length; j++) {
      if (block.shape[i][j] === 1) {
        grid[block.y + i][block.x + j] = 1;
      }
    }
  }
}

function canMoveLeft() {
  for (let i = 0; i < block.shape.length; i++) {
    for (let j = 0; j < block.shape[i].length; j++) {
      if (block.shape[i][j] === 1) {
        let nextCol = block.x + j - 1;
        if (nextCol < 0 || grid[block.y + i][nextCol] === 1) {
          return false;
        }
      }
    }
  }
  return true;
}

function moveLeft() {
  block.x--;
}

function canMoveRight() {
  for (let i = 0; i < block.shape.length; i++) {
    for (let j = 0; j < block.shape[i].length; j++) {
      if (block.shape[i][j] === 1) {
        let nextCol = block.x + j + 1;
        if (nextCol >= grid[0].length || grid[block.y + i][nextCol] === 1) {
          return false;
        }
      }
    }
  }
  return true;
}

function moveRight() {
  block.x++;
}

function rotateBlock() {
  let newShape = [];
  for (let j = 0; j < block.shape[0].length; j++) {
    let newRow = [];
    for (let i = block.shape.length - 1; i >= 0; i--) {
      newRow.push(block.shape[i][j]);
    }
    newShape.push(newRow);
  }
  block.shape = newShape;
}

这个示例代码实现了一个简单的俄罗斯方块游戏，使用p5.js库进行绘制和交互。在这个示例中，方块可以通过左右箭头键进行水平移动，上箭头键进行旋转，下箭头键进行加速下落。方块在触底或碰到其他方块时会固定在当前位置，并生成一个新的方块。

这个示例中使用了p5.js的rect函数来绘制方块，使用了二维数组来表示方块的形状和游戏区域。通过判断方块的位置和形状与游戏区域的碰撞情况，来确定方块是否可以进行移动和旋转。

这个示例只是一个简单的实现，可以根据需求进行扩展和优化。如果需要更多的功能，可以考虑添加消行、计分、游戏结束等功能。