原生JS成就卡片消除游戏，再现“植物大战僵尸”经典玩法

前端

2023-09-28 07:26:02

用原生JS打造卡片消除游戏，重温“植物大战僵尸”的经典玩法。让我们踏上这段技术之旅，一探究竟！

技术栈

原生JavaScript
HTML5
CSS3

玩法简介

卡片消除游戏是一种休闲益智游戏，目标是通过匹配相同颜色的卡片来消除它们。玩家在棋盘上移动卡片，创建水平或垂直的组合。消除的卡片越多，获得的分数就越高。

JS实现

1. 初始化游戏环境

// 创建棋盘
const grid = document.querySelector('#grid');

// 初始化卡片数据
const cards = [];

// 生成卡片
for (let i = 0; i < 100; i++) {
  const card = document.createElement('div');
  card.classList.add('card');
  card.setAttribute('data-color', getRandomColor());
  cards.push(card);
}

2. 移动卡片

// 添加点击事件监听器
cards.forEach(card => {
  card.addEventListener('click', () => {
    // 获取卡片位置
    const cardIndex = cards.indexOf(card);

    // 检查是否可以移动
    const canMove = canMoveCard(cardIndex);

    // 如果可以移动，则移动卡片
    if (canMove) {
      moveCard(cardIndex);
    }
  });
});

3. 消除卡片

// 检查是否消除
function checkElimination() {
  for (let i = 0; i < cards.length; i++) {
    // 获取卡片位置
    const cardIndex = cards.indexOf(cards[i]);

    // 检查水平匹配
    if (isHorizontalElimination(cardIndex)) {
      eliminateCards(cardIndex);
    }

    // 检查垂直匹配
    if (isVerticalElimination(cardIndex)) {
      eliminateCards(cardIndex);
    }
  }
}