基于Javascript开发连连看游戏小程序

基于 Javascript 开发连连看游戏小程序攻略

准备工作

1. 下载并安装微信开发者工具，并登录微信开发者账号。
2. 创建新的小程序项目，填写项目名称和 AppID。
3. 在项目目录下创建 pages/game/game.js 文件，用于编写游戏逻辑代码。

游戏逻辑

1. 游戏初始化

在 onLoad 函数中，初始化游戏画面和数据。

var size = 7; // 游戏区域大小
var cards = []; // 所有牌的数据
var selectedCards = []; // 选中的牌
var score = 0; // 当前分数

// 初始化牌的数据
for (var i = 0; i < size * size / 2; i++) {
  var type = parseInt(Math.random() * 6); // 牌的类型，随机生成
  cards.push({type: type, deleted: false}); // 每个牌的类型和是否已经被删除
}

// 复制一份牌的数据，得到全部牌的数据
cards = cards.concat(cards);
cards.sort(function() { // 打乱牌的排序顺序
  return Math.random() - 0.5;
});

// 初始化选中的牌数组
for (var i = 0; i < size * size; i++) {
  selectedCards.push(null);
}

this.setData({
  size: size,
  cards: cards,
  selectedCards: selectedCards,
  score: score
});

2. 处理用户点击事件

在 selectCard 函数中，根据用户点击的牌的坐标，更新选中的牌数组和分数。

selectCard: function(e) {
  var x = parseInt(e.currentTarget.dataset.x);
  var y = parseInt(e.currentTarget.dataset.y);
  var index = y * this.data.size + x;
  var selectedCards = this.data.selectedCards.slice();
  selectedCards[index] = {x: x, y: y, type: this.data.cards[index].type};

  // 判断选中的牌是否相同
  if (this.isEqual(selectedCards)) {
    // 相同，删除两张牌
    this.deleteCards(selectedCards);
    // 更新分数
    var score = this.data.score + 10;
    this.setData({
      selectedCards: [],
      score: score
    });
  } else {
    // 不同，取消选中状态
    this.setData({
      selectedCards: selectedCards
    });
  }
},

3. 判断两张牌是否相同

在 isEqual 函数中，根据两张牌的位置和类型，判断它们是否可以消除。

isEqual: function(selectedCards) {
  var card1 = selectedCards[selectedCards.length - 2];
  var card2 = selectedCards[selectedCards.length - 1];

  // 判断位置是否相邻
  if (card1 && card2 &&
      ((card1.x == card2.x && Math.abs(card1.y - card2.y) == 1) ||
       (card1.y == card2.y && Math.abs(card1.x - card2.x) == 1))) {
    // 判断类型是否相同
    if (card1.type == card2.type) {
      return true;
    }
  }

  return false;
},

4. 删除两张牌

在 deleteCards 函数中，根据选中的两张牌的数据，将它们从牌的数组中删除，并更新页面数据。

deleteCards: function(selectedCards) {
  var cards = this.data.cards.slice();
  for (var i = 0; i < selectedCards.length; i++) {
    if (selectedCards[i]) {
      var index = selectedCards[i].y * this.data.size + selectedCards[i].x;
      cards[index].deleted = true;
    }
  }
  this.setData({
    cards: cards
  });
},

示例说明

示例1：修改游戏区域大小

在代码中，游戏区域的大小 size 默认为 7。如果想要修改游戏区域大小，只需要修改 size 的值即可。例如，将游戏区域大小改为 8：

var size = 8; // 修改为 8

示例2：修改牌的类型数量

在代码中，牌的类型数量默认为 6，如果想要修改牌的类型数量，只需要修改下面代码中的数字：

var type = parseInt(Math.random() * 6); // 默认为 6

例如，将牌的类型数量改为 8：

var type = parseInt(Math.random() * 8); // 修改为 8