近来掘金举办前端比赛，所以写了一个小游戏参加，而且熟悉一下vue3,写了一下游戏，思来想去就写了一个斗兽棋游戏。

        欢迎去给我加油      点赞评论收藏  ，试玩地址  游戏地址 童年斗兽棋 - 码上掘金

https://code.juejin.cn/pen/7168678657873969160  进入有点击右上方  ‘运行’

   

下面写一下思路

                   斗兽棋上下各八个棋子，一个16位置的格子，本来用一个数组写出来，后来想起需要空位，还有棋子跳转路径规则，所以设置了以下结构

dataList: [
    {
      index: 0,//当前位置
      ruleval: [1, 4],//规则
      carStutas: false,//当前位有牌
    }, {
      index: 1,
      ruleval: [0, 2, 5],
      carStutas: false,//当前位有牌
    },

然后设置每个棋子信息

{
      'id': i,   //每个id
      'Ranking': i, //棋子的权重
      'url': "http://www.jmyuyu.cn/demo/img/b" + i + ".png",//棋子图片
      'rote': false,//是否已经翻牌
      'Belonging': 'blue',//所属蓝方
      'colorStutas': false,//显示选中的图标
    }

然后设置图片 图片为两张图片 第一张为背面 第二张为棋牌

最重要的是css 点击后两张翻转180度   第一张用到了一个 backface-visibility: hidden;，，此为翻转后消失的css.注意背面的棋牌需要先翻转180，这样转过来正好是正面。

然后翻牌

// 判断翻牌
const flop = (item) => {
  if (infor.farstValue == 0) {
    infor.manStutas = item.brandInfor.Belonging
    infor.farstValue++
    infor.flopStutas = infor.manStutas
  }
  infor.dataList.forEach(element => {
    if (element.brandInfor && element.brandInfor.id == item.brandInfor.id) {
      element.brandInfor.rote = true
      infor.clickValue = 0
    }
  });
  infor.flopStutas = infor.flopStutas == 'red' ? 'blue' : 'red'
  hoverStutas(infor.flopStutas)
}

吃牌  实际就是新老两个数组调换一下

//吃牌
const eatBrand = (oldValue, newValue, valstu) => {
  let oldValues = JSON.stringify(oldValue)
  let newValues = JSON.stringify(newValue)
  infor.dataList.forEach(element => {
    if (newValue.index == element.index) {
      if (element.brandInfor.Belonging == 'red') {
        infor.redList.push(JSON.parse(newValues))
      }
      if (element.brandInfor.Belonging == 'blue') {
        infor.blueList.push(JSON.parse(newValues))
      }
      element.brandInfor = oldValue.brandInfor
      element.carStutas = true
      // 平子
      if (valstu) {
        element.brandInfor = {}
        element.carStutas = false
        if (JSON.parse(oldValues).brandInfor.Belonging == 'red') {
          infor.redList.push(JSON.parse(oldValues))
        }
        if (JSON.parse(oldValues).brandInfor.Belonging == 'blue') {
          infor.blueList.push(JSON.parse(oldValues))
        }

      }
    }
  });
  infor.dataList[oldValue.index].brandInfor = {}
  infor.dataList[oldValue.index].carStutas = false
  infor.oldValue = false
  infor.flopStutas = infor.flopStutas == 'red' ? 'blue' : 'red'
  hoverStutas(infor.flopStutas)

  if (infor.redList.length == 8) {
    if (infor.blueList.length == 8) {
      infor.victoryMan = '平局！'
    } else {
      infor.victoryMan = '蓝方胜利！'
    }
    infor.victory = true
  }

  if (infor.blueList.length == 8) {
    if (infor.redList.length == 8) {
      infor.victoryMan = '平局！'
    } else {
      infor.victoryMan = '红方胜利！'
    }
    infor.victory = true
  }

}

这里就不多述了，大家都看得懂，非常简单。

核心就这么多。欢迎大家试玩！！！！