JS+Canvas实现的俄罗斯方块游戏完整实例

JS+Canvas实现的俄罗斯方块游戏完整实例攻略

1. 实现思路

俄罗斯方块游戏由方块组成，玩家需要操控方块进行堆积。本实例的实现思路如下：

• 使用HTML5的Canvas元素绘制游戏界面和游戏元素（包括方块和游戏背景）；
• 使用JavaScript实现游戏逻辑及方块的控制移动；
• 使用CSS控制游戏界面的样式布局；
• 使用定时器控制游戏的刷新速度和难度；

2. 实现步骤

2.1 创建HTML页面

在HTML文件中，创建Canvas元素及相关容器元素，布局样式。例如：

<div id="tetris-canvas-container">
  <canvas id="tetris-canvas"></canvas>
  <div id="tetris-score">Score: </div>
</div>

2.2 设置CSS样式

CSS样式主要用于游戏界面的美化及布局。例如：

#tetris-canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#tetris-canvas {
  border: 1px solid #000;
  background-color: #eee;
}

#tetris-score {
  margin-top: 20px;
  font-size: 24px;
  text-align: center;
}

2.3 实现游戏绘画

在JavaScript文件中，使用Canvas API绘制游戏界面和游戏元素。例如：

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

// 绘制游戏背景
context.fillStyle = '#eee';
context.fillRect(0, 0, canvas.width, canvas.height);

// 绘制游戏区域
context.strokeStyle = '#000';
context.strokeRect(0, 0, canvas.width, canvas.height);

2.4 实现方块控制移动

使用JavaScript实现游戏逻辑，包括方块的控制移动和游戏规则的判断。例如：

// 方块移动的处理函数
function moveBlock() {
  if (hasCollisions()) {
    freezeBlock(); // 当方块碰撞到底部时，固定在当前位置
    removeCompleteRows(); // 移除填满的行
    addBlock(); // 添加新方块
  } else {
    currentBlock.y += 1; // 当前方块向下移动一格
  }
}

// 检查当前方块是否与边缘或已有方块发生碰撞
function hasCollisions() {
  for (let i = 0; i < currentBlock.shape.length; i++) {
    for (let j = 0; j < currentBlock.shape[i].length; j++) {
      if (!currentBlock.shape[i][j]) {
        continue; // 当前位置为空，不用判断碰撞
      }
      const x = currentBlock.x + j; // 方块的X坐标
      const y = currentBlock.y + i; // 方块的Y坐标
      if (x < 0 || x >= board[0].length || y >= board.length) {
        return true; // 方块碰到屏幕边缘
      }
      if (y < 0) {
        continue; // 方块还没到下边界，跳过
      }
      if (board[y][x]) {
        return true; // 方块与已有方块发生碰撞
      }
    }
  }
  return false;
}

2.5 实现定时器

使用setInterval或requestAnimationFrame控制游戏刷新速度和难度。例如：

function gameLoop() {
  moveBlock(); // 方块移动
  draw(); // 绘制游戏界面
  runsID = requestAnimationFrame(gameLoop); // 递归调用游戏循环函数，进行持续的刷新
}

3. 示例说明

示例1：绘制方块

// 方块的类型定义
const blockTypes = [
  [
    [1, 1],
    [1, 1],
  ],
  [
    [0, 1, 0],
    [0, 1, 0],
    [0, 1, 1],
  ],
  // ...
];

// 方块的样式定义
const blockColors = ['purple', 'yellow', 'orange', 'blue', 'green'];

// 绘制方块
function drawBlock() {
  for (let i = 0; i < currentBlock.shape.length; i++) {
    for (let j = 0; j < currentBlock.shape[i].length; j++) {
      if (currentBlock.shape[i][j]) {
        // 绘制实心方块
        context.fillStyle = blockColors[currentBlock.type];
        context.fillRect(
          canvasX + (currentBlock.x + j) * blockSize,
          canvasY + (currentBlock.y + i) * blockSize,
          blockSize,
          blockSize
        );

        // 绘制方块边框
        context.strokeStyle = 'black';
        context.strokeRect(
          canvasX + (currentBlock.x + j) * blockSize,
          canvasY + (currentBlock.y + i) * blockSize,
          blockSize,
          blockSize
        );
      }
    }
  }
}

示例2：添加新方块

// 添加新方块
function addBlock() {
  const randomBlockType = Math.floor(Math.random() * blockTypes.length);
  currentBlock = {
    type: randomBlockType,
    shape: blockTypes[randomBlockType],
    x: Math.floor((board[0].length - blockTypes[randomBlockType][0].length) / 2),
    y: 0,
  };
}