甘肃龙网

  1. 首页 > 生活 > >

【飞行棋】多人游戏-微信小程序开发流程详解( 三 )

生活百科棋子


要移动棋子前，先投骰子，这部分靠运气，通过概率分配实现，

【飞行棋】多人游戏-微信小程序开发流程详解

文章插图
投骰子的逻辑在组件ctrl-panel中有实现，代码如下
// 取1~6之间的随机数let num = Math.floor(Math.random()*6)+1;
可见Math的一些函数有经常用到
投完骰子后，组件ctrl-panel会传来事件，调用一个方法(e)，
是写到game.js里面的，代码如下，
const { stepNum } = e.detail;//这里记录一下步数this.stepNum = stepNum;//记录玩家在棋盘中的所有棋子idlet indexes = [];//...省略了//定义走下一步的方法let next = () => {//判断有没有派过新飞机，以及棋子有2个以上，让玩家先选择棋子再走if (this.isNewAir != true && indexes.length > 1) {this.setData({isSelectMode: true,//设置选择棋子状态gameToast: `请${current + 1}号玩家选择棋子`});return;}//开始动画 看出棋子移动效果this.startAnimation(false, () => {//动画结束会执行到这里，判断一下是否派过新飞机了，重置一下状态if (this.isNewAir) this.isNewAir = false;});};//获取步数后，判断是否是6点，是的话，让用户选择是否再拿一个棋子（派新飞机）if (stepNum == 6 && this.isNewAir != true && indexes.length > 0) {if (user.chessIndex >= 0) {//...省略了}//下一步next();return;}//没有就继续，下一步next();
2. 移动棋子
获取步数后，就可以移动棋子了，调用的方法(used, )，
需要通过动画实现棋子一步一步走的效果，代码如下
const { current } = this.data;//表示当前的玩家idconst { grids, size, userlist } = this.gameData;//游戏数据this.gameData.preCurrentUid = current;//记录到上一个//省略了...//获取步数let num = this.stepNum;//动画结束方法let end = (index) => {//走完棋子，动画也就结束了，调用此方法处理一下this.endAnimation(chess, index, used, callback);};//下一步移动方法let next = (i) => {//省略了...//棋子位置变了，重新画个棋子this.drawChess(user, d);//如果步数没走完，继续调用下一步方法setTimeout(() => next(i + 1), StepTimeMs);};//获取棋子在地图中指定位置上的格子数据let d = grids[chess.gridIndex];//判断是否到了自己开始升降的位置，nodes是升降点的地图数据if (d.nodes && d.nodes[0].grid.cid == current) {//省略了...this.takeGridChess(user, () => {this.enterNextNode(user, chess, d.nodes, num, chess.nodeIndex);});return;};//调用带走的棋子方法this.takeGridChess(user, () => next(1));
调用移动棋子的方法参数used, 分别是是否使用过，动画结束时会回调，
其中方法()就是把正在移动的棋子拿走，然后重新绘制整个棋子，实现动画效果，
方法()就是在进入升降航道路线时才调用的
还有，动画结束需要处理的方法是(, index, used, )，
这实现了棋子到目标格子上做出反应处理的逻辑，代码如下
const { current } = this.data;const { userlist, grids, size } = this.gameData;const user = userlist[current];const chess = user.chesses[user.chessIndex];const gridIndex = chess.gridIndex;let end = () => {//...省略了//处理结束，更新一下显示数据this.setData({isAnimaging: false,gameToast: `请${uid + 1}号玩家点击投骰子`});//重新绘制所有棋子this.redraw();//需要结束回调时 就回调if (callback instanceof Function) callback();};switch (gridIndex) {case 6:case 19://...{//执行到这里，说明是走到可以直线飞行的格子上，调用控件组件让玩家选择要不要直线飞行this.ctrlPanel.showSelectAirAtLineModal(res => {if (!res.confirm) {//没选择直线飞，就继续判断this.isBeatBackChess(gridIndex,current);end();return;}let i = 0;//直线飞行动画const next = () => {//...省略了i++;if(i>10) {//...省略了this.isBeatBackChess(chess.gridIndex, current, gridIndex + 6);end();return;}//...省略了setTimeout(next, 100);//0.1s移动一次};this.takeGridChess(user, next);});return;}default:{//...省略了//调用判断是否碰到对方的棋子方法this.isBeatBackChess(chess.gridIndex, current);}}end();


上一篇：郑和七下西洋竟有如此不可告人秘密

下一篇：神雕侠侣里的断肠草究竟是什么样的植物