在网页中编写俄罗斯方块游戏

编写俄罗斯方块游戏可以使用 HTML、CSS 和 JavaScript。

首先，在 HTML 中创建一个游戏板块的容器，用来显示游戏区域和游戏状态。例如：

<div class="game-container">
  <div class="game-area"></div>
  <div class="game-status">
    <span class="score">0</span>
    <button class="start">开始游戏</button>
  </div>
</div>

接下来，使用 CSS 设置游戏区域和游戏状态的样式，例如：

.game-container {
  width: 300px;
  height: 600px;
  border: 1px solid #ccc;
  margin: 0 auto;
}

.game-area {
  width: 200px;
  height: 400px;
  background-color: #fff;
  margin: 20px auto;
}

.game-status {
  text-align: center;
  margin-top: 20px;
}

.score {
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
}

.start {
  font-size: 18px;
  padding: 5px 20px;
}

最后，在 JavaScript 中编写游戏逻辑。可以使用 Canvas 来绘制游戏区域和方块，使用定时器来控制方块的下落和移动。例如：

const gameArea = document.querySelector('.game-area');
const score = document.querySelector('.score');
const startButton = document.querySelector('.start');

const blockWidth = 20;
const blockHeight = 20;

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

let shape;
let x, y;
let scoreValue = 0;
let gameInterval;

function init() {
  shape = getRandomShape();
  x = Math.floor(gameArea.clientWidth / 2 / blockWidth) * blockWidth;
  y = 0;
  scoreValue = 0;
  score.textContent = scoreValue;
  updateGameArea();
}

function getRandomShape() {
  const index = Math.floor(Math.random() * shapes.length);
  return shapes[index];
}

function updateGameArea() {
  gameArea.innerHTML = '';
  drawShape();
  drawGrid();
}

function drawShape() {
  shape.forEach((row, i) => {
    row.forEach((cell, j) => {
      if (cell) {
        const block = document.createElement('div');
        block.classList.add('block');
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
        block.style.top = (y + i * blockHeight) + 'px';
        block.style.left = (x + j * blockWidth) + 'px';
        gameArea.appendChild(block);
      }
    });
  });
}

function drawGrid() {
  for (let i = 0; i < gameArea.clientHeight / blockHeight; i++) {
    const row = document.createElement('div');
    row.classList.add('row');
    row.style.height = blockHeight + 'px';
    gameArea.appendChild(row);
    for (let j = 0; j < gameArea.clientWidth / blockWidth; j++) {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      cell.style.width = blockWidth + 'px';
      cell.style.height = blockHeight + 'px';
      row.appendChild(cell);
    }
  }
}

function moveDown() {
  y += blockHeight;
  if (isCollision()) {
    y -= blockHeight;
    freeze();
  }
  updateGameArea();
}

function moveLeft() {
  x -= blockWidth;
  if (isCollision()) {
    x += blockWidth;
  }
  updateGameArea();
}

function moveRight() {
  x += blockWidth;
  if (isCollision()) {
    x -= blockWidth;
  }
  updateGameArea();
}

function rotate() {
  const newShape = [];
  for (let j = 0; j < shape[0].length; j++) {
    const row = [];
    for (let i = shape.length - 1; i >= 0; i--) {
      row.push(shape[i][j]);
    }
    newShape.push(row);
  }
  if (!isCollision(newShape)) {
    shape = newShape;
    updateGameArea();
  }
}

function isCollision(newShape) {
  const currentShape = newShape || shape;
  for (let i = 0; i < currentShape.length; i++) {
    for (let j = 0; j < currentShape[0].length; j++) {
      if (currentShape[i][j]) {
        const row = Math.floor((y + i * blockHeight) / blockHeight);
        const col = Math.floor((x + j * blockWidth) / blockWidth);
        if (row < 0 || col < 0 || row >= gameArea.clientHeight / blockHeight || col >= gameArea.clientWidth / blockWidth) {
          return true;
        }
        const block = gameArea.querySelector(`.row:nth-child(${row + 1}) .cell:nth-child(${col + 1}) .block`);
        if (block) {
          return true;
        }
      }
    }
  }
  return false;
}

function freeze() {
  shape.forEach((row, i) => {
    row.forEach((cell, j) => {
      if (cell) {
        const block = document.createElement('div');
        block.classList.add('block');
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
        block.style.top = (y + i * blockHeight) + 'px';
        block.style.left = (x + j * blockWidth) + 'px';
        gameArea.appendChild(block);
      }
    });
  });
  removeFullRows();
  shape = getRandomShape();
  x = Math.floor(gameArea.clientWidth / 2 / blockWidth) * blockWidth;
  y = 0;
  if (isCollision()) {
    clearInterval(gameInterval);
    alert('游戏结束！');
  }
  updateGameArea();
}

function removeFullRows() {
  const rows = gameArea.querySelectorAll('.row');
  for (let i = rows.length - 1; i >= 0; i--) {
    const blocks = rows[i].querySelectorAll('.block');
    if (blocks.length === rows[i].childElementCount) {
      blocks.forEach(block => block.remove());
      const newRow = document.createElement('div');
      newRow.classList.add('row');
      newRow.style.height = blockHeight + 'px';
      gameArea.insertBefore(newRow, rows[i]);
      scoreValue += 10;
      score.textContent = scoreValue;
    }
  }
}

startButton.addEventListener('click', () => {
  init();
  gameInterval = setInterval(() => {
    moveDown();
  }, 1000);
});

document.addEventListener('keydown', event => {
  switch (event.code) {
    case 'ArrowLeft':
      moveLeft();
      break;
    case 'ArrowRight':
      moveRight();
      break;
    case 'ArrowUp':
      rotate();
      break;
    case 'ArrowDown':
      moveDown();
      break;
  }
});

这样，一个简单的俄罗斯方块游戏就完成了。可以尝试在浏览器中运行一下。