快乐消消乐的 JavaScript 奇幻之旅

前端

2023-12-20 22:31:52

玩过开心消消乐吗？作为消除类游戏爱好者，今天就让我们一起踏上 JavaScript 打造开心消消乐的奇妙旅程，让每一局游戏都充满欢乐和成就感！

一颗神奇种子的诞生

游戏的故事始于一颗从天而降的神奇豌豆种子，它在梦之森林的村长屋附近扎根发芽。这颗种子汲取了森林池塘的神奇能量，茁壮成长为一颗参天豌豆藤。豌豆藤上结满了五颜六色的豌豆，等待着人们前来消除，带来无穷的欢乐。

JavaScript 赋予生命

为了让这颗神奇的豌豆种子在我们的 JavaScript 游戏世界中焕发生命，我们需要一些基本的元素：

游戏画布： 用于渲染游戏元素，比如棋盘和豌豆。
豌豆对象： 代表每个豌豆，包含颜色、位置和状态等属性。
消除检测逻辑： 检查相邻豌豆的颜色是否相同，并消除它们。
分数系统： 记录玩家的消除次数和得分。
用户交互： 处理玩家的鼠标点击或触屏操作，移动或消除豌豆。

代码实现

接下来，让我们编写 JavaScript 代码，让这些元素协同工作，创建我们的开心消消乐游戏：

1. 初始化游戏

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const gridSize = 10; // 棋盘大小
const peas = []; // 豌豆数组

2. 渲染游戏

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      // 根据豌豆状态渲染颜色
      if (peas[i][j]) {
        ctx.fillStyle = peas[i][j].color;
        ctx.fillRect(i * 50, j * 50, 50, 50);
      }
    }
  }
}

3. 消除检测

function checkElimination() {
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      // 检查水平消除
      if (
        peas[i][j] &&
        peas[i + 1][j] &&
        peas[i + 2][j] &&
        peas[i][j].color === peas[i + 1][j].color &&
        peas[i][j].color === peas[i + 2][j].color
      ) {
        peas[i][j] = null;
        peas[i + 1][j] = null;
        peas[i + 2][j] = null;
      }
      // 检查垂直消除
      if (
        peas[i][j] &&
        peas[i][j + 1] &&
        peas[i][j + 2] &&
        peas[i][j].color === peas[i][j + 1].color &&
        peas[i][j].color === peas[i][j + 2].color
      ) {
        peas[i][j] = null;
        peas[i][j + 1] = null;
        peas[i][j + 2] = null;
      }
    }
  }
}

4. 用户交互

canvas.addEventListener("click", (e) => {
  const x = Math.floor(e.clientX / 50);
  const y = Math.floor(e.clientY / 50);
  if (peas[x][y]) {
    // 交换当前豌豆与相邻豌豆
    const temp = peas[x][y];
    peas[x][y] = peas[x + 1][y] || peas[x][y + 1];
    peas[x + 1][y] || peas[x][y + 1] = temp;
    checkElimination();
    render();
  }
});