用js怎么写俄罗斯方块

用JavaScript写俄罗斯方块

用JavaScript编写俄罗斯方块需要实现以下核心功能：游戏初始化、生成方块、方块移动与旋转、碰撞检测、消除行、游戏结束检测。 其中，方块移动与旋转是最复杂和核心的部分，因为它涉及到各种边界条件和碰撞检测。下面将详细描述如何实现这些功能。

一、游戏初始化

游戏初始化包括创建游戏画布、设置初始参数和定义游戏状态。

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const rows = 20;
const cols = 10;
const blockSize = 30;
const emptyColor = 'white';
const borderColor = 'black';
let board = Array.from({ length: rows }, () => Array(cols).fill(emptyColor));
let currentPiece;
let gameOver = false;

二、生成方块

方块可以用二维数组表示，分别定义各种形状。

const pieces = [
  { shape: [[1, 1, 1], [0, 1, 0]], color: 'cyan' },
  { shape: [[0, 1, 1], [1, 1, 0]], color: 'blue' },
  { shape: [[1, 1, 0], [0, 1, 1]], color: 'orange' },
  { shape: [[1, 1, 1, 1]], color: 'yellow' },
  { shape: [[1, 1], [1, 1]], color: 'green' },
  { shape: [[0, 1, 0], [1, 1, 1]], color: 'purple' },
  { shape: [[1, 1, 1], [1, 0, 0]], color: 'red' }
];
function randomPiece() {
  const piece = pieces[Math.floor(Math.random() * pieces.length)];
  return {
    shape: piece.shape,
    color: piece.color,
    x: Math.floor(cols / 2) - Math.ceil(piece.shape[0].length / 2),
    y: 0
  };
}
currentPiece = randomPiece();

三、方块移动与旋转

方块的移动与旋转需要不断更新方块的坐标，并检查是否与边界或其他方块发生碰撞。

function movePiece(dx, dy) {
  if (!collision(currentPiece.x + dx, currentPiece.y + dy, currentPiece.shape)) {
    currentPiece.x += dx;
    currentPiece.y += dy;
  }
}
function rotatePiece() {
  const rotatedShape = currentPiece.shape[0].map((_, index) =>
    currentPiece.shape.map(row => row[index])
  ).reverse();
  if (!collision(currentPiece.x, currentPiece.y, rotatedShape)) {
    currentPiece.shape = rotatedShape;
  }
}
function collision(x, y, shape) {
  for (let row = 0; row < shape.length; row++) {
    for (let col = 0; col < shape[row].length; col++) {
      if (shape[row][col] && (
        x + col < 0 || x + col >= cols || y + row >= rows || board[y + row][x + col] !== emptyColor)) {
        return true;
      }
    }
  }
  return false;
}

四、碰撞检测与消除行

当方块触底或与其他方块碰撞时，需要将方块固定在游戏板上，并检测是否有行需要消除。

function lockPiece() {
  currentPiece.shape.forEach((row, y) => {
    row.forEach((value, x) => {
      if (value) {
        board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;
      }
    });
  });
}
function clearLines() {
  for (let row = rows - 1; row >= 0; row--) {
    if (board[row].every(cell => cell !== emptyColor)) {
      board.splice(row, 1);
      board.unshift(Array(cols).fill(emptyColor));
    }
  }
}

五、游戏结束检测

当新的方块生成时如果立即发生碰撞，则游戏结束。

function checkGameOver() {
  if (collision(currentPiece.x, currentPiece.y, currentPiece.shape)) {
    gameOver = true;
    alert('Game Over');
  }
}

六、游戏循环与用户输入

通过设置定时器控制游戏节奏，并监听用户键盘输入来移动和旋转方块。

function gameLoop() {
  if (!gameOver) {
    movePiece(0, 1);
    if (collision(currentPiece.x, currentPiece.y, currentPiece.shape)) {
      movePiece(0, -1);
      lockPiece();
      clearLines();
      currentPiece = randomPiece();
      checkGameOver();
    }
    drawBoard();
    drawPiece();
    setTimeout(gameLoop, 500);
  }
}
document.addEventListener('keydown', event => {
  switch (event.key) {
    case 'ArrowLeft':
      movePiece(-1, 0);
      break;
    case 'ArrowRight':
      movePiece(1, 0);
      break;
    case 'ArrowDown':
      movePiece(0, 1);
      break;
    case 'ArrowUp':
      rotatePiece();
      break;
  }
});
function drawBoard() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  board.forEach((row, y) => {
    row.forEach((color, x) => {
      context.fillStyle = color;
      context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
      context.strokeStyle = borderColor;
      context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
    });
  });
}
function drawPiece() {
  currentPiece.shape.forEach((row, y) => {
    row.forEach((value, x) => {
      if (value) {
        context.fillStyle = currentPiece.color;
        context.fillRect((currentPiece.x + x) * blockSize, (currentPiece.y + y) * blockSize, blockSize, blockSize);
        context.strokeStyle = borderColor;
        context.strokeRect((currentPiece.x + x) * blockSize, (currentPiece.y + y) * blockSize, blockSize, blockSize);
      }
    });
  });
}
gameLoop();

总结

通过上述步骤，我们实现了一个基本的俄罗斯方块游戏。游戏初始化、生成方块、方块移动与旋转、碰撞检测、消除行、游戏结束检测是实现俄罗斯方块游戏的核心环节。每一个环节都需要仔细处理各种边界情况，确保游戏的流畅和稳定。

为了进一步优化和扩展，可以考虑添加以下功能：

难度增加机制：随着时间推移，逐渐加快方块下落速度。
高级旋转机制：实现“墙踢”（wall kick）和“地踢”（floor kick）来增强旋转的灵活性。
排行榜：记录和显示玩家的最高得分。
多种模式：例如无尽模式、限时模式等。
音效和动画：增加游戏的趣味性和视觉效果。

通过这些扩展功能，俄罗斯方块游戏将变得更加丰富和有趣。同时，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理和协作开发项目，以提高效率和团队协作能力。