# 前言最近学习数据结构与算法，但是平常自己要么刷题，要么看书，很是无聊。就想着游戏中一般都会运用大量的算法，所以就开始写游戏来锻炼自己算法这方面的小能力。后面还会持续做其他小游戏，并发布说说自己做的过程中的心得体会。 # 一、游戏介绍游戏采用熟悉的回合制斗兽棋，由玩家和电脑进行对战，双方各执16颗动物棋子。其中包括1个龙、2个虎、2个象、2个熊、2个狐、2个鹰、5个猫。基本游戏规则如下： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9ba768fbd10410c8ff8ac17a9c3c6b7~tplv-k3u1fbpfcp-zoom-1.image) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/746b3262c94d49179d32b4f957d9c43d~tplv-k3u1fbpfcp-zoom-1.image) 我们小时候玩的斗兽棋，就是一般的象、狮、虎、豹、狼、狗、猫、鼠这种，我当时感觉儿时的比较简单一点，就没用此套卡牌和规则。而布局跟游戏规则是参考掘金里某位大兄弟的，因为我感觉这布局真的很漂亮，里面我自己也修改了一下，逻辑方面处理以及电脑逻辑处理都是自己跟着游戏规则慢慢啃出来的，其他优化的地方在下面实现里我也会标出来，整体游戏是可以完美运行的。游戏的基本玩法就是，玩家先手，棋牌中分为红蓝两方，玩家第一手翻开什么牌，就会固定双方阵容。后面就是把对方的子吃完，即可获取胜利。 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a61412156182432bae3356bd624a7697~tplv-k3u1fbpfcp-zoom-1.image) # 二、游戏实现 #### 1. 基本游戏布局（都注释了，不细说） ```html ``` ```html ``` #### 2. 定义需要的基本参数 ```javascript // 电脑 player1: { score: 100, camp: '', list: [] } // 玩家 player2: { score: 100, camp: '', list: [] } // 棋子信息 // weight: 权重 // count: 数量 // score: 分数 // camp: 所属阵营（同上） 'red' or 'blue' // isFilp: 是否翻开 // isShow: 是否显示 // isSelected：是否选中 // location: 所在二维数组的位置 // 空地的话，我直接用null表示 chessList: [ {name: '龙', weight: 7, count: 1, score: 19, camp: null, isFilp: false, isShow: true, isSelected: false, location: []}, {name: '虎', weight: 6, count: 2, score: 12, camp: null, isFilp: false, isShow: true, isSelected: false, location: []}, {name: '象', weight: 5, count: 2, score: 10, camp: null, isFilp: false, isShow: true, isSelected: false, location: []}, {name: '熊', weight: 4, count: 2, score: 8, camp: null, isFilp: false, isShow: true, isSelected: false, location: []}, {name: '狐', weight: 3, count: 2, score: 5, camp: null, isFilp: false, isShow: true, isSelected: false, location: []}, {name: '鹰', weight: 2, count: 2, score: 3, camp: null, isFilp: false, isShow: true, isSelected: false, location: []}, {name: '猫', weight: 1, count: 5, score: 1, camp: null, isFilp: false, isShow: true, isSelected: false, location: []}, ], // 地图二维数组 mapList: [], // 选中的棋子 selectChess: null, // 是否开始了，分配阵营 isStart: false, // 当前轮到谁了 0=无 1=玩家 2=电脑 isWho: 0, // 游戏是否开始 0=未开始 1=进行中 2=已结束 isPlay: 0, // 当前游戏谁赢了 0=无 1=玩家 2=电脑 isWin: 0, // 副本数组（相当于复制一份当时棋盘的数据），用来进行广度优先算法 bfsList: [], // 算法每次计算前，都把当前地图重新绘制一遍，0不能走 1可以走 bfsLoadList: [], // AI是否投降 aiLose: false, ``` #### 3. 定义需要用到的公共方法 > 我们一般游戏中都要用到深克隆，防止操作数据时，导致视图也会做变化。 > 还有数组转换，比如一维数组转为多维数组，再多维转一维数组等。 > 其他还有打乱数组，比如数字华容道、斗兽棋等游戏 ```javascript /** * @description 打乱数组 * @param arr */ export const arrayRandom = function(arr = []) { return arr.sort(() => Math.random() - 0.5); } /** * @description 深度克隆多维数组 * @param {Array} arr 需要深度克隆的数组 * @returns {*} 克隆后的数组 */ export const deepcopyArray = function(arr) { var out = [], i = 0, len = arr.length; for (; i < len; i++) { if (arr[i] instanceof Array){ out[i] = deepcopyArray(arr[i]); } else out[i] = arr[i]; } return out; } /** * @description 一维数组转二维数组 * @param arr * @param num */ export const arrayChange = function(arr, num) { if(!Array.isArray(arr)) { return []; } if(Array.isArray(arr) && arr.length <= 1) { return arr; } let a = []; while(arr.length > 0) { a.push(arr.splice(0, num)) } return a; } /** * @description 二维数组转一维数组 * @param * @param */ export const arrTwoToOne = function(arr) { if(!Array.isArray(arr)) { return []; } return [].concat.apply([], arr) } ``` #### 4. 动态生成双方所拥有棋子16颗、棋盘总棋子32颗 > 这里我用了4个list，因为初始化数据包含双方所拥有的棋子，还有棋盘的32颗（16红+16蓝） ```javascript createPlayChess() { let arr1 = []; let arr2 = []; let list1 = JSON.parse(JSON.stringify(this.chessList)); let list2 = JSON.parse(JSON.stringify(this.chessList)); let list3 = JSON.parse(JSON.stringify(this.chessList)); let list4 = JSON.parse(JSON.stringify(this.chessList)); // 电脑的棋子 for (let i = 0; i < list1.length; i++) { this.player1.list.push(list1[i]); } // 玩家的棋子 for (let i = 0; i < list2.length; i++) { this.player2.list.push(list2[i]); } // 棋盘中红色方子 for (let i = 0; i < list3.length; i++) { for(let j = 0; j < list3[i].count; j++) { list3[i].camp = 'red' arr1.push(list3[i]); } } // 棋盘中蓝色方子 for (let i = 0; i < list4.length; i++) { for(let j = 0; j < list4[i].count; j++) { list4[i].camp = 'blue' arr2.push(list4[i]); } } // 因为玩家在界面下面，他的棋子在右边，所以要把数组倒过来，让龙在最下面 this.player2.list.reverse(); // 处理总数据，把一维数组打乱，再转成二维数组 let maplist = JSON.parse(JSON.stringify(this.arrayChange(this.arrayRandom([...arr1, ...arr2]), 4))) // 给每个棋子加上自己所在位置 maplist.forEach((item1, index1) => { item1.forEach((item2, index2) => { item2.location = [index1, index2]; }) }) this.mapList = JSON.parse(JSON.stringify(maplist)) }, ``` #### 5. 定义其他操作（规则、再来一局、游戏输赢等） ```javascript // 按钮 - 我知道了 // 隐藏弹框，开始游戏 onKnow() { this.isPlay = 1; this.isWho = 1; this.$refs.popupRule.close() uni.showToast({title: '玩家先手', icon: 'none'}) }, ``` ```javascript // 再来一局 // 其实就是把所有初始数据初始化，然后重新生成地图数据 onAgainGame() { this.player1.camp = ''; this.player1.score = 100; this.player1.list = []; this.player2.camp = ''; this.player2.score = 100; this.player2.list = []; this.mapList = []; this.selectChess = null; this.isStart = false; this.isWho = 1; this.isPlay = 1; this.isWin = 0; this.aiLose = false; this.createPlayChess(); this.$refs.popupWin.close(); }, ``` 我们还可以根据每次吃完子，无论是电脑还是玩家，来判断双方剩余棋子和当前血量，再判断输赢。当一方的卡牌都没有了，也就是血量为0时，输赢判定。 ```javascript // 处理hp和剩余棋子 chess被吃的那个子 handlePlayer(chess) { if(!chess) return; // 如果chess是电脑的子 if(chess.camp == this.player1.camp) { this.player1.list.forEach(item => { if(item.name == chess.name) { item.count -= 1; this.player1.score -= chess.score; } }) } // 如果chess是玩家的子 if(chess.camp == this.player2.camp) { this.player2.list.forEach(item => { if(item.name == chess.name) { item.count -= 1; this.player2.score -= chess.score; } }) } // 判断输赢 if(this.player1.score <= 0) { this.isPlay = 2; this.isWin = 1; this.$refs.popupWin.open() } if(this.player2.score <= 0) { this.isPlay = 2; this.isWin = 2; this.$refs.popupWin.open() } } ``` 我们在游戏中可以进行吃子，移动到空地的操作，其实就是把指定子的信息赋值给被吃子或者空地的信息，此时需要注意，信息换过去，当前子的location也需要更换，不然表面虽然移动了，实际后续操作，那个子还在原来的地方。 ```javascript // 交换位置 - 移动或者吃子 // position1:需要移动的棋子的位置 position2：目标位置 // 如果是吃子操作，则需要传入第三个参数用来判断是否输赢 handlePosition(position1, position2, whoChess) { let [x1, y1] = position1; let [x2, y2] = position2; let chess = JSON.parse(JSON.stringify(this.mapList[x1][y1])); this.mapList[x2][y2] = chess; this.mapList[x2][y2].location = [x2, y2] this.mapList[x1][y1] = null; this.$forceUpdate() this.handlePlayer(whoChess); // 传入被吃的那个子判断输赢 } ``` #### 6. 玩家操作对于玩家，我们只需要翻牌，然后吃子，移动等操作，比较简单。我们每次点击牌都会把当前牌的信息以及坐标传递过来 > onPlayer( item, x, y ) （1）如果游戏没开始或者还没轮到玩家，则不能进行操作 ```javascript if(this.isWho != 1 || this.isPlay != 1) return; ``` （2）我们开始前，需要先初始化我们需要的操作数据，我们不能直接在主数据上直接判断修改某些子，不然容易导致视图发生改变 ```javascript let list = [].concat.apply([], this.mapList); // 二维数组转一维数组 let list_some = list.some(i => i && i.isSelected); // 有没有选择棋子 let selectChess = list.filter(i => i && i.isSelected)[0]; // 获取选中的棋子信息 ``` （3）没选棋子之前点击空地，是没用的 ```javascript if(!list_some && item == null) return; ``` （4）如果我选了棋子，再去点空地 ```javascript if(list_some && item == null) { let bool = false; // 每次只能移动一格 let x1 = selectChess.location[0]; let y1 = selectChess.location[1]; if( (y1 == y && x1 - 1 == x) || (y1 == y && x1 + 1 == x) || (x1 == x && y1 - 1 == y) || (x1 == x && y1 + 1 == y) ) { bool = true; } if(bool) { // 查看二 -- 5中的方法，交换位置 this.handlePosition(selectChess.location, [x, y]) } else { uni.showToast({title: '不能走！', icon: 'none', duration: 500}) // 如果不能走，则把选择的棋子取消掉 this.mapList.forEach(item1 => { item1.forEach(item2 => item2 ? item2.isSelected = false : '') }) this.$forceUpdate() return; } // 移动完之后，要把选中的棋子初始化 this.mapList.forEach(item1 => { item1.forEach(item2 => item2 ? item2.isSelected = false : '') }) // 移动完轮到电脑 this.onAi() return; } ``` （5）如果我们还没选择自己棋子，是不能点击电脑的棋子的 ```javascript // 如果点的棋子翻开了，并且点击的是对方的牌，并且还没有选择自己的牌时 if(item.isFilp && item.camp != this.player2.camp && !list_some) { uni.showToast({title: '这不是你的棋子', icon: 'none', duration: 500}) return; } ``` （6）这里得记住，我们无论做了什么操作，都要在操作之后清除一下选中状态 ```javascript // 每次点击牌之前清除一下选中状态 this.mapList.forEach(item1 => { item1.forEach(item2 => item2 ? item2.isSelected = false : '') }) ``` （7）如果点的棋子是没翻开的状态，则需要把这个棋子翻开。还要注意游戏刚开始需要区分阵营，也是这时候做的操作 ```javascript // 如果棋子处于没翻转的状态 if(!item.isFilp) { item.isFilp = true // 这里玩家第一次翻开棋子，是为了区分阵营 if(!this.isStart) { this.isStart = true; this.player2.camp = item.camp this.player1.camp = item.camp == 'red' ? 'blue' : 'red' } this.onAi() return; } ``` （8）如果我们点击的牌是自己的话，则选中这个牌 ```javascript // 如果点击的是自己的牌则选中当前牌 if(item.camp == this.player2.camp) { item.isSelected = !item.isSelected; this.$forceUpdate() return; } ``` （9）最后一步，吃子，这时候做吃子操作。如果我选中棋子，并且我又点了电脑的棋子，这时候就需要判断能不能吃了。 ```javascript // 判断选中自己的牌之后，再去选择别人的牌, 说明有吃的意向了 if(selectChess) { // 公共方法，判断两个子是否存在吃与被吃的关系 if(!this.onIsEat(selectChess, item)) { uni.showToast({title: '吃不了！', icon: 'none', duration: 500}) this.selectChess = null; return; } else { // 吃 this.handlePosition(selectChess.location, item.location, item); } this.onAi() return; } ``` （10）如何去判断一颗子是否可以吃另一颗子 ```javascript // 判断animal_1能不能吃animal_2 true=能吃 false=不能吃 onIsEat(animal_1, animal_2) { // 如果传入的两个牌一样或者没翻开，则不能吃 if(!animal_1 || !animal_2 || animal_1.camp == animal_2.camp || !animal_1.isFilp || !animal_2.isFilp) { return false; } // 获取它们的权重和坐标 let aniWeight_1 = animal_1.weight let aniWeight_2 = animal_2.weight let x1 = animal_1.location[0]; let y1 = animal_1.location[1]; let x2 = animal_2.location[0]; let y2 = animal_2.location[1]; // 如果捕食者是鹰，则需要判断上下左右的子中，鹰与被吃者中间是否有一颗子 if(aniWeight_1 == 2) { let bool = false; if((y1 == y2 && x1 - 2 >= x2)) { let num = 0; for (let i = x1 - 1; i > x2; i--) { if(this.mapList[i][y1] != null) num++; } bool = num == 1 ? true : false; } if((y1 == y2 && x1 + 2 <= x2)) { let num = 0; for (let i = x1 + 1; i < x2; i++) { if(this.mapList[i][y1] != null) num++; } bool = num == 1 ? true : false; } if((x1 == x2 && y1 - 2 >= y2)) { let num = 0; for (let i = y1 - 1; i > y2; i--) { if(this.mapList[x1][i] != null) num++; } bool = num == 1 ? true : false; } if((x1 == x2 && y1 + 2 <= y2)) { let num = 0; for (let i = y1 + 1; i < y2; i++) { if(this.mapList[x1][i] != null) num++; } bool = num == 1 ? true : false; } return bool; } // 其他动物，不但要判断权重能否吃，还要判断是否在上下左右方向上 if( ((aniWeight_1 == 7 && [7,6,5,4,3,2].includes(aniWeight_2)) || (aniWeight_1 == 6 && [6,5,4,3,2,1].includes(aniWeight_2)) || (aniWeight_1 == 5 && [5,4,3,2,1].includes(aniWeight_2)) || (aniWeight_1 == 4 && [4,3,2,1].includes(aniWeight_2)) || (aniWeight_1 == 3 && [3,2,1].includes(aniWeight_2)) || (aniWeight_1 == 1 && [1,7].includes(aniWeight_2))) && ((y1 == y2 && x1 - 1 == x2) || (y1 == y2 && x1 + 1 == x2) ||(x1 == x2 && y1 - 1 == y2) || (x1 == x2 && y1 + 1 == y2)) ) { return true; } return false; }, ``` ***此时玩家的操作基本完成。可以正常翻牌、走动、吃子。*** #### 7. 电脑操作 > 基本上就是根据优先级来处理操作： > 首先作为斗兽棋，最重要的就是吃对方子来达到胜利， > 其次是别人吃我时，我要逃跑， > 然后追击对方， > 最后是翻牌操作， > 最后的最后就是投降。（1）不该电脑的时候，电脑不能动，并且刚开始要定义我们需要用到的基本数据 ```javascript if(this.isPlay != 1) return; // 把当前地图数据变成一维数组 let list = [].concat.apply([], this.mapList); // 玩家翻开的棋子 let playerFilpList = list.filter(item => item && item.isFilp && item.camp != this.player1.camp); // 电脑翻开的棋子 let aiFilpList = list.filter(item => item && item.isFilp && item.camp == this.player1.camp); ``` （2）电脑吃子，判断电脑翻开的每个子的周围有没有能吃的棋子 ```javascript let aiEatOwn = []; // 我自己有哪些能吃别人的子 let aiEatList = []; // 我能吃哪些玩家的子 // 判断ai的每个子的周围有没有能吃的棋子 for(let i = 0; i < aiFilpList.length; i++) { let [x, y] = aiFilpList[i].location; // 上 if(x - 1 >= 0 && this.onIsEat(aiFilpList[i], this.mapList[x - 1][y])) { aiEatOwn.push(aiFilpList[i]) aiEatList.push(this.mapList[x - 1][y]) } // 下 if(x + 1 < 8 && this.onIsEat(aiFilpList[i], this.mapList[x + 1][y])) { aiEatOwn.push(aiFilpList[i]) aiEatList.push(this.mapList[x + 1][y]) } // 左 if(y - 1 >= 0 && this.onIsEat(aiFilpList[i], this.mapList[x][y - 1])) { aiEatOwn.push(aiFilpList[i]) aiEatList.push(this.mapList[x][y - 1]) } // 右 if(y + 1 < 4 && this.onIsEat(aiFilpList[i], this.mapList[x][y + 1])) { aiEatOwn.push(aiFilpList[i]) aiEatList.push(this.mapList[x][y + 1]) } // 如果是鹰的情况 for(let a = x - 2; a >= 0; a--) { if(this.onIsEat(aiFilpList[i], this.mapList[a][y])) { aiEatOwn.push(aiFilpList[i]) aiEatList.push(this.mapList[a][y]) } } for(let a = x + 2; a < 8; a++) { if(this.onIsEat(aiFilpList[i], this.mapList[a][y])) { aiEatOwn.push(aiFilpList[i]) aiEatList.push(this.mapList[a][y]) } } for(let a = y - 2; a >= 0; a--) { if(this.onIsEat(aiFilpList[i], this.mapList[x][a])) { aiEatOwn.push(aiFilpList[i]) aiEatList.push(this.mapList[x][a]) } } for(let a = y + 2; a < 4; a++) { if(this.onIsEat(aiFilpList[i], this.mapList[x][a])) { aiEatOwn.push(aiFilpList[i]) aiEatList.push(this.mapList[x][a]) } } } ``` （3）这里我们已经获取到了我们的棋子（捕食者）和玩家的棋子（被捕食者） > 我们每次获取到一个可以吃的子，就会把相应的子加入到数组队列中，就会形成两个数组，他们的值是一一对应的，比如【被吃1，被吃2，被吃3，】 =》【吃1，吃1，吃2】，这时候我们可以在第二个数组中看到，吃1出现两次，说明它可以吃两个，这样我们后面会根据被捕食者的分数排列，这个过程中，他们所对应的数据都需要跟着变，以便后面我们根据分数找到对应的捕食者坐标。 > 电脑吃子的时候还不能乱吃，因为每个子都有分数，我们不能亏。 > 电脑首先要吃分数最高的子，以此类推 > 电脑吃之前还要判断一下，吃完后自己会不会被吃，不然胡乱吃，自己就亏了，比如我的虎吃了玩家的熊，可是玩家的龙给吃了，这就亏了。 > 如果是相同的棋子，则直接吃，不用考虑 > 如果是猫吃龙的情况下，则直接吃，不用考虑 ```javascript if(aiEatList.length > 0) { let scoreList = aiEatList.map(item => item.score); // 提取分数数组 // 冒泡排序，根据分数从大到小排列，再把分数对应的敌方子和对应的我方子进行排列 for (let i = 0; i < scoreList.length; i++) { for (let j = 0; j < scoreList.length - i - 1; j++) { if (scoreList[j] < scoreList[j + 1]) { // 交换分数 let temp1 = scoreList[j]; scoreList[j] = scoreList[j + 1]; scoreList[j + 1] = temp1; // 交换被捕食者 let temp2 = aiEatList[j]; aiEatList[j] = aiEatList[j + 1]; aiEatList[j + 1] = temp2; // 交换捕食者 let temp3 = aiEatOwn[j]; aiEatOwn[j] = aiEatOwn[j + 1]; aiEatOwn[j + 1] = temp3; } } } // 这里我们去循环捕食者数组，从大到小吃查看，是否可以吃对方子， let bool = false; for (let i = 0; i < aiEatOwn.length; i++) { // 这个是我们如果吃过之后的那个棋子的数据，因为我们需要判断吃完以后自己会不会被吃的情况 const afterChess = JSON.parse(JSON.stringify(aiEatOwn[i])); afterChess.location = aiEatList[i].location; // 坐标不需要变化，用吃完之后的棋子坐标 // 这里我们需要判断吃完以后不会被吃，或者自己跟对方的子相等或者猫吃龙的情况， // 则说明可以直接吃 // isDotEat() 方法在下面 if((!this.isDotEat(afterChess)) || (aiEatOwn[i].weight <= aiEatList[i].weight)) { bool = true; this.handlePosition(aiEatOwn[i].location, aiEatList[i].location, aiEatList[i]); break; } } if(bool) { return; } } ``` ***这里我们用了一个isDotEat方法，主要是电脑用来判断某个点是否有被吃的可能 true=会被吃 false=不会被吃*** ```javascript isDotEat(animal) { // 克隆一个副本备用 let list = JSON.parse(JSON.stringify(this.mapList)); // 如果传过来的不是一个动物，则直接会被吃，多一事不如少一事 if(!animal) { return true; } // 拿到当前棋子的坐标 let [x, y] = animal.location; // 判断当前棋子四周相邻有没有能吃自己的 // onIsEat方法判断两个动物是否有吃与被吃的关系，具体请查看【玩家操作】的第10步 if( (x - 1 >= 0 && this.onIsEat(list[x - 1][y], animal)) || (x + 1 <= 7 && this.onIsEat(list[x + 1][y], animal)) || (y - 1 >= 0 && this.onIsEat(list[x][y - 1], animal)) || (y + 1 <= 3 && this.onIsEat(list[x][y + 1], animal)) ) { return true; } // 判断每个子上下左右有没有鹰要吃自己 // 有鹰并且之间有一颗子 // num = 两子之间存在的棋子数 if(x - 2 >= 0) { let num = 0, isHawk = false; for(let a = x - 1; a >= 0; a--) { if(list[a][y] && list[a][y].isFilp && list[a][y].name == '鹰' && list[a][y].camp == this.player2.camp) { isHawk = true; break; } if(list[a][y] != null) { num++; } } if(num == 1 && isHawk) { return true; } } if(x + 2 <= 7) { let num = 0, isHawk = false; for(let a = x + 1; a <= 7; a++) { if(list[a][y] && list[a][y].isFilp && list[a][y].name == '鹰' && list[a][y].camp == this.player2.camp) { isHawk = true; break; } if(list[a][y] != null) { num++; } } if(num == 1 && isHawk) { return true; } } if(y - 2 >= 0) { let num = 0, isHawk = false; for(let a = y - 1; a >= 0; a--) { if(list[x][a] && list[x][a].isFilp && list[x][a].name == '鹰' && list[x][a].camp == this.player2.camp) { isHawk = true; break; } if(list[x][a] != null) { num++; } } if(num == 1 && isHawk) { return true; } } if(y + 2 <= 3) { let num = 0, isHawk = false; for(let a = y + 1; a <= 3; a++) { if(list[x][a] && list[x][a].isFilp && list[x][a].name == '鹰' && list[x][a].camp == this.player2.camp) { isHawk = true; break; } if(list[x][a] != null) { num++; } } if(num == 1 && isHawk) { return true; } } return false; }, ``` （4）逃跑 > 判断每个子被追杀的情况下，周围有没有空地，有则逃跑 > 逃跑的时候，判断空地的周围有没有能吃我的，如果有，则不用跑，如果没有则跑 > 如果自身旁边有比狩猎者等级的我方子，则不用跑，达到一换一的效果首先我们需要找出我们自己的棋子有哪些能被玩家吃 ```javascript for(let i = 0; i < aiFilpList.length; i++) { let a = JSON.parse(JSON.stringify(aiFilpList[i])) if(this.isDotEat(a)) { ownPassList.push(aiFilpList[i]) } } ``` 其次我们需要知道被吃的子周围的空地 ```javascript for(let i = 0; i < ownPassList.length; i++) { let [x, y] = ownPassList[i].location; let arr = [] if(x - 1 >= 0 && this.mapList[x - 1][y] == null) { arr.push([x - 1, y]); } if(x + 1 < 8 && this.mapList[x + 1][y] == null) { arr.push([x + 1, y]) } if(y - 1 >= 0 && this.mapList[x][y - 1] == null){ arr.push([x, y - 1]) } if(y + 1 < 4 && this.mapList[x][y + 1] == null) { arr.push([x, y + 1]) } nullList.push({ parent: [x, y], child: [...arr] }) } ``` 然后让最大权重的棋子先跑，我们需要先获取最大权重的棋子 ```javascript let maxWeightChess = []; // 最大权重棋子的坐标 let maxWeight = 0; // 权重值 let maxChild = []; // 空地 for (let i = 0; i < nullList.length; i++) { let [x, y] = nullList[i].parent if(this.mapList[x][y].weight > maxWeight && nullList[i].child.length > 0) { maxWeight = this.mapList[x][y].weight maxWeightChess = [x, y] maxChild = [...nullList[i].child] } } ``` 最后我们需要判断，如果我们到达周围的空地上，此时有没有能吃我的。如果有，则不用跑，因为跑了也死，不如去翻牌或者追杀玩家的子，如果没有则跑。 ```javascript if(maxWeightChess.length > 0 && maxChild.length > 0) { let [x, y] = maxWeightChess; let goodspace = []; // 确定下来的正确的坐标 for(let i = 0; i < maxChild.length; i++) { let [x1, y1] = maxChild[i]; let a = JSON.parse(JSON.stringify(this.mapList[x][y])); a.location = [x1, y1]; // 在某个空地上能否被吃 if(!this.isDotEat(a)) { goodspace = [...maxChild[i]] break; } } if(goodspace.length > 0) { this.handlePosition(maxWeightChess, goodspace); return; } } ``` （5）乘胜追击 > 查找场上自己的子和对方子，每两个子之间是否能连成一条路线，按照权重从大到小排列。 > 首先用一颗棋子不远万里去吃玩家的子，肯定要找到一条最短并且分值最高的路。 > 而有些情况下每个子肯定有吃多个，这时我们就要记录所有路线。我们在开始之前，先看拿一下BFS（广度优先搜索）算法，它的特点就是可以找出两点之间最短的路径。 > 1. 我们要想从起点到终点，肯定要先从起点开始搜索周围相邻的其他坐标，并且每次搜索一个点之后，都要记录当前点是否被搜索过，每个点只搜索一次，以此类推，找到终点。 > 2. 我们刚开始需要把每个点的信息都初始化，比如第一次搜索（0,0）点，它附近节点nearNodes有两个，而自身是起点，所有自身是没有父节点的。 > 3. 再往下搜索（0,1）点，它的附近节点有两个，一个是起点，一个是（1,1）点，记住它的父节点是起点（0,0），又因为起点是第一个点，是搜索过的，这时候我们只需要去搜索（1,1）点。 > 4. 继续搜索（1,1）点，它有三个邻节点，（0,1）（1,0）因为被搜索过，所以直接搜索（2,1）点，记住此时父节点是（0,1）。 > 5. 继续搜索（2,1），它的父节点（1,1），邻节点（3,1） > 6. 以此类推，最后除了起点和终点，它们的父节点连起来就是一条完整的路径。 > 7. **注：这个算法的特点就是地毯式搜索，不放过任何一个点** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d225d7d9b354b8baabf35ae6efbf230~tplv-k3u1fbpfcp-zoom-1.image) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6e26a9f2e1d442493063957d21580b8~tplv-k3u1fbpfcp-zoom-1.image) 以上就是我对这个算法的理解，可能不太准确，如更深了解，请自行百度。 ```javascript // 基本实现方法 function breadthFirstSearch(root) { // 队列第一个元素就是起点 let queue = [root]; let visited = new Set(); // 从起点开始搜索 while (queue.length > 0) { let node = queue.shift(); visited.add(node); for (let neighbor of node.nearNodes) { if (!visited.has(neighbor)) { queue.push(neighbor); } } } } ``` 接下来我们再看游戏中如何运用：首先我们需要先选出拿出当前场上自己的子和玩家的子（均翻开），再两两搜索路线，取得一个总的路线 ```javascript let allChessLoad = []; if(aiFilpList.length > 0 && playerFilpList.length > 0) { // 我们先用两个for循环来取出每个自己的子和每个玩家的子 for(let i = 0; i < aiFilpList.length; i++) { let aiChess = aiFilpList[i]; // 电脑的子 for(let j = 0; j < playerFilpList.length; j++) { let playerChess = playerFilpList[j]; // 玩家的子 // 注意这里主要判断，电脑的子能不能去吃玩家的子，只有能吃才去搜索路线 if(this.getAiIsEatPlayer(aiChess, playerChess)) { // 此时要注意，如果ai的子能吃玩家的子，此时的以0、1为代表二维数组是需要重新绘制的， // 因为每走一步，棋盘都会变化，就要重新绘制 // 因为此时除了捕食子、被捕食子、空地以外所以节点都为0 // 1=空地/自身子和玩家子 0=未翻开的卡/其他无关的子 this.bfsLoadList = []; // 刚开始定义的副本数组，形式 [ [0,1,0,0], [1,1,0,0]...[] ] for(let a = 0; a < this.mapList.length; a++) { this.bfsLoadList[a] = [] for(let b = 0; b < this.mapList[0].length; b++) { let [x1, y1] = aiChess.location; let [x2, y2] = playerChess.location; if(this.mapList[a][b] === null || (x1 == a && y1 == b) || (x2 == a && y2 == b)) { this.bfsLoadList[a][b] = 1; } else { this.bfsLoadList[a][b] = 0; } } } // 处理一下克隆数组,给每个节点加上我们需要的属性值nearNodes、parent、value等 // nearNodes=邻节点 // parent=父节点 // value = 0 / 1 this.bfsList = []; for(let c = 0; c < this.bfsLoadList.length; c++) { this.bfsList[c] = [] for(let d = 0; d < this.bfsLoadList[0].length; d++) { this.bfsList[c][d] = null; } } // 这一步是初始化每个节点的信息，包括父节点以及邻节点信息 for(let e = 0; e < this.bfsLoadList.length; e++) { for(let f = 0; f < this.bfsLoadList[0].length; f++) { let node = this.getPointNode(e, f); let up = this.getPointNode(e - 1, f) let down = this.getPointNode(e + 1, f) let left = this.getPointNode(e, f - 1) let right = this.getPointNode(e, f + 1) node.nearNodes = [up, down, left, right].filter(item => item && item.value == 1) this.bfsList[e][f] = node } } // 再去计算捕食的最短路径 let arr = this.searchLoad(aiChess.location, playerChess.location); if(arr.length > 1) { // 如果有路，则存下，继续查找下一条路 allChessLoad.push(arr); } } } } } ``` 以上用到的方法包括 getAiIsEatPlayer()、getPointNode()、searchLoad()，下面我们一一讲解 - getAiIsEatPlayer —— 判断电脑的棋子能不能吃玩家的 ```javascript getAiIsEatPlayer(animal_ai, animal_player) { if(!animal_ai || !animal_player || animal_ai.camp == animal_player.camp || !animal_ai.isFilp || !animal_player.isFilp) { return false; } let aniWeight_1 = animal_ai.weight let aniWeight_2 = animal_player.weight if( (aniWeight_1 == 7 && [6,5,4,3,2].includes(aniWeight_2)) || (aniWeight_1 == 6 && [5,4,3,2,1].includes(aniWeight_2)) || (aniWeight_1 == 5 && [4,3,2,1].includes(aniWeight_2)) || (aniWeight_1 == 4 && [3,2,1].includes(aniWeight_2)) || (aniWeight_1 == 3 && [2,1].includes(aniWeight_2)) || // (aniWeight_1 == 2 && [1].includes(aniWeight_2)) || (aniWeight_1 == 1 && [7].includes(aniWeight_2)) ) { return true; } return false; } // 注意上面我忽略了鹰，因为鹰的路径搜索算法过于复杂，它捕食是需要跳子的，所以暂时去除它 ``` - getPointNode —— 给每个点设置我们需要的数据结构 ```javascript getPointNode(x, y) { if (x >= 0 && y >= 0 && x < this.bfsList.length && y < this.bfsList[0].length) { let node = this.bfsList[x] && this.bfsList[x][y]; if(!node) { let val = this.bfsLoadList[x][y]; if(val !== undefined) { node = { x, // 坐标 y, // 坐标 value: val, // 值 1 / 0 checked: false, // 是否搜索过了 parent: null, // 父节点 nearNodes: [] // 邻节点 } this.bfsList[x][y] = node; } } return node; } return null; } ``` - searchLoad —— 主要搜索算法 ```javascript // mapList地图二维数组 aiChess起点 playerChess终点 searchLoad(aiChess, playerChess) { let begin = this.getPointNode(aiChess[0], aiChess[1]); // 起点信息 let end = this.getPointNode(playerChess[0], playerChess[1]); // 目标点信息 let path = []; // 最终路线 let quere = [begin]; // 搜索队列 while(quere.length > 0) { let current = quere.shift() current.checked = true for(let item of current.nearNodes) { if(!item.checked) { item.parent = current; quere.push(item) } } // 把节点以及它的父节点都存在路径里，说明这些节点可用 let patharr = []; let pathNode = current; while(pathNode) { patharr.push(pathNode) pathNode = pathNode.parent } path = patharr; // 如果当前节点就是终点，就跳出 if(current.x == end.x && current.y == end.y) { break; } } // 如果路径数组的第一个元素不是终点坐标，则返回空 // 为什么是第一个元素呢，因为我们取是从队列头部取，然后查找，存是从尾部存，最后终点就会出现在第一个 if(path.length && path[0].x == playerChess[0] && path[0].y == playerChess[1]) { return path; } return []; } ``` > 最后一步，就是拿到所有路线后，我们需要从路线中搜索最完美的一条，进行追击。 > 首先我们需要保证路线的路途中是不会被玩家其他子吃掉的 > 然后再把剩余的路线按照分值从大到小排列，我们就取第一条路线去走 ```javascript // 如果有能行动的路线 if(allChessLoad.length > 0) { let lastPoint = []; // 最终的路线数组 let roadFirst = null; // let handleAllRoad = []; // 根据线路对比出，哪些路能要，哪些不能要 let arrCopy = deepcopyArray(allChessLoad); // 克隆路线数组用来处理路线 // 首先需要判断能吃玩家子的多条路线中，哪些路线半路上就会被玩家吃掉，这样的路线剔除 for(let a = 0; a < arrCopy.length; a++) { // 因为所有路线中是包含起点和终点的，我们得判断这条路是大于2 if(arrCopy[a].length > 2) { let item = arrCopy[a]; let {x, y} = arrCopy[a][item.length - 1]; roadFirst = JSON.parse(JSON.stringify(this.mapList[x][y])) // 这里需要跳过每条路线的头尾，也就是捕食者与被捕食者，只计算路程中 for (let b = item.length - 2; b >= 0; b--) { roadFirst.location = [arrCopy[a][b].x, arrCopy[a][b].y]; // 如果这条路途中会被吃，则设为null if(this.isDotEat(roadFirst)) { arrCopy[a] = null; roadFirst.location = []; break; } } } else { // 如果这条路只包含起、终点，则设为null arrCopy[a] = null; } } // 过滤空数据 handleAllRoad = arrCopy.filter(item => item != null); if(handleAllRoad.length > 0) { // 按照最短路排序短 > 长 handleAllRoad.sort((a, b) => a.length - b.length) // 拿到第一条最短的路径 lastPoint = handleAllRoad[0]; // 让最后第一个坐标走到倒数第二个坐标，则完成追击 this.handlePosition( [lastPoint[lastPoint.length - 1].x, lastPoint[lastPoint.length - 1].y], [lastPoint[lastPoint.length - 2].x, lastPoint[lastPoint.length - 2].y], ) return; } } ``` （6）翻牌 > 到这里说明电脑不能吃，不能跑，不能追，只能翻牌操作 > ***注：翻牌这里有点小技巧，就是如果当前场上有自己的鹰的话，就不要随机翻牌，而是翻鹰上下左右隔一颗子的牌，很大几率前中期就能靠鹰吃不少子*** > 这个我没有做，以后再说 ```javascript // 过滤还没翻的牌，从没翻开的随机翻一张 let noFlipList = list.filter(item => item && !item.isFilp); if(noFlipList.length > 0) { let randomChess = noFlipList[Math.floor(Math.random() * noFlipList.length)]; let [x, y] = randomChess.location; this.mapList[x][y].isFilp = true; return; } ``` （7）投降 —— 不用说了，自己什么都没有啥可干的了，只能投降了，这一步一般是到最后的最后了 ```javascript this.aiLose = true; this.isPlay = 2; this.isWin = 1; this.$refs.popupWin.open() ``` 附上完整代码地址（[https://gitee.com/zhang_meng_lei/uniapp-game-beast](https://gitee.com/zhang_meng_lei/uniapp-game-beast)） # 三、总结整个游戏做下来，还是学到很多的，尤其是广度优先搜索。本想着把这个游戏中的电脑做的更聪明，最起码能跟人不相上下，但是牌类游戏中最难的就是，考虑不到很全面，永远不知道每盘游戏排列组合，以及牌与牌之间的联系，就像中国象棋一样，每一盘都是新的，每一盘都是不固定的走法。所以这方面还是比较费事，其他的慢慢的还是可以啃下来的。最后游戏中更多优化还会留着以后返回来慢慢琢磨，以便把这个电脑算法打造的更厉害一点。最后的最后 —— 谢谢观看！