Canvas连连看

2023-10-20 00:33:09

前言

连连看是一款风靡全球的益智游戏，规则简单，操作便捷，深受各个年龄段玩家的喜爱。今天，我们将结合Canvas和JavaScript技术，从头开始构建一个有趣的连连看游戏，让玩家在轻松愉悦的氛围中训练自己的眼力、反应力和逻辑思维。

创建游戏画布

首先，我们需要创建一个HTML5画布元素来作为游戏画布。在HTML代码中添加如下代码：

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

然后，在JavaScript代码中获取画布元素并获取其上下文：

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

绘制游戏区域

接下来，我们将使用Canvas的绘图API在画布上绘制游戏区域。游戏区域通常由一个矩形网格组成，每个网格单元可以放置一个游戏元素（如动物、水果、几何图形等）。

// 定义游戏区域的网格尺寸
const gridWidth = 10;
const gridHeight = 8;

// 绘制网格线
for (let i = 0; i <= gridWidth; i++) {
  context.moveTo(i * 60, 0);
  context.lineTo(i * 60, gridHeight * 60);
}

for (let j = 0; j <= gridHeight; j++) {
  context.moveTo(0, j * 60);
  context.lineTo(gridWidth * 60, j * 60);
}

context.stroke();

放置游戏元素

在游戏区域绘制完成后，我们可以开始放置游戏元素。我们使用随机数生成器在每个网格单元中放置一个游戏元素。

const elements = [
  '🍎', '🍐', '🍌', '🍇', '🍓',
  '🐶', '🐱', '🐭', '🐹', '🐰'
];

for (let i = 0; i < gridWidth; i++) {
  for (let j = 0; j < gridHeight; j++) {
    const randomIndex = Math.floor(Math.random() * elements.length);
    context.fillText(elements[randomIndex], i * 60 + 30, j * 60 + 30);
  }
}

游戏逻辑

连连看游戏的核心在于玩家需要将两个相同的元素连接起来，然后消除。连接的条件是两个元素必须在同一行或同一列，并且中间没有其他元素阻隔。

// 监听鼠标点击事件
canvas.addEventListener('click', (e) => {
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;

  // 计算点击的网格单元
  const i = Math.floor(x / 60);
  const j = Math.floor(y / 60);

  // 获取点击的元素
  const element = context.fillText(i * 60 + 30, j * 60 + 30);

  // 如果是第一次点击，则存储点击的元素和位置
  if (!firstElement) {
    firstElement = element;
    firstI = i;
    firstJ = j;
  } else {
    // 如果是第二次点击，则判断是否可以消除元素
    if (element === firstElement && (i === firstI || j === firstJ) && !isBlocked(i, j, firstI, firstJ)) {
      // 消除元素
      context.clearRect(i * 60, j * 60, 60, 60);
      context.clearRect(firstI * 60, firstJ * 60, 60, 60);

      // 更新游戏状态
      score += 1;
      updateScore();
    }

    // 重置第一次点击的状态
    firstElement = null;
    firstI = null;
    firstJ = null;
  }
});

游戏结束条件

连连看游戏通常会设置一个游戏结束条件，例如当玩家消除所有元素时游戏结束。我们可以在JavaScript代码中实现这个条件：

// 检查是否所有元素都被消除
const isGameOver = () => {
  for (let i = 0; i < gridWidth; i++) {
    for (let j = 0; j < gridHeight; j++) {
      if (context.fillText(i * 60 + 30, j * 60 + 30)) {
        return false;
      }
    }
  }

  return true;
};

// 游戏结束时显示游戏结束信息
const gameOver = () => {
  context.fillStyle = 'red';
  context.font = 'bold 48px Arial';
  context.fillText('游戏结束', 200, 200);
};