近来掘金举办前端比赛，所以写了一个小游戏参加，而且熟悉一下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.Belonginginfor.farstValue++infor.flopStutas = infor.manStutas}infor.dataList.forEach(element => {if (element.brandInfor && element.brandInfor.id == item.brandInfor.id) {element.brandInfor.rote = trueinfor.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.brandInforelement.carStutas = true// 平子if (valstu) {element.brandInfor = {}element.carStutas = falseif (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 = falseinfor.oldValue = falseinfor.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}}

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

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