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

棋盘上各种颜色都是可以替换的，例如到了晚上，背景就显示漆黑的夜空；

文章插图
其中是一个游戏地图对象，在模块文件中有实现绘制地图，能给出坐标，
想想生活中用到的地图导航，作用一样的，
其中的是从开始页面传来的数据，表示有哪些玩家加入游戏
把画好的棋盘生成一个图片数据，设置到背景图片组件中显示，
画出来后，效果如下图
画棋子
地图有了，再把所有棋子画出来，
开始玩的时候，棋子都是放在飞机场上的，每个玩家都有四个棋子，
在调用方法()里面继续写，代码如下，

//给地图设置棋子上的图像，就是飞机图片map.setChessImg('/static/fly.png',()=>{//设置好，就可以绘制棋子了this.redraw();});

然后调用方法()去绘制所有棋子，代码如下

const { canvas, context: ctx } = this.canvasData;//canvas组件的数据const { grids, userlist, size, chessImg } = this.gameData;//游戏的数据const r = size / 2;//棋子半径const { toasts } = this.data;//显示游戏状态的数据//因为这是重绘方法 使用前先清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);//把参与的玩家的棋子全部画出来userlist.forEach((user, uid) => {let chesses = [];//记录可以绘制的棋子user.chesses.forEach((chess, i) => {//这里判断一下棋子的状态，如没有隐藏，且棋子有指向棋盘上的坐标，就可以加到记录中if (chess.isHide!=true && chess.gridIndex >= 0) {//...省略了继续判断逻辑}});//绘制棋子的chesses.forEach((chess, i) => {let g = grids[chess.gridIndex];//...省略了//绘制棋子的方法this.drawChessAtLocation(user, g);//判断棋子的数量，这是在同一个坐标上被叠放的棋子if (chess.count > 1) {let p = {//...};//给棋子画上数量标记ctx.fillText('' + chess.count, p.left, p.top);}});//判断这个玩家是否加入游戏if (user.isJoin) {//绘制玩家飞机场上的棋子user.chesses.forEach(chess => {if (chess.gridIndex < 0) {ctx.drawImage(chessImg, chess.left - r, chess.top - r, size, size);}});//更新玩家的信息toasts[uid] = `${uid + 1}号玩家`;} else {toasts[uid] = ``;}});//更新显示this.setData({toasts})

其中用到了方法(user, g)，这是实现在地图上画棋子的，只传入参数用户数据和格子坐标
把所有棋子画出来后，效果图如下
投骰子
由于绘制投骰子动画会变得复杂，需要写很多代码，不如做一下布局，这样好弄点，省了不少代码吧，
就用控件组件来代替投骰子，控件组件放在棋盘的底部，在文件/pages/game/game.wxml中加上如下布局代码
{{gameToast}}{{gameToast}}
这个组件ctrl-panel是放在别处的，也是自定义组件，需要的时候可以拿来直接用，用这个来选择操作再好不过了，
看看控件在游戏页面的布局显示效果，如下图
这控件不仅仅是用来投骰子哦，还有一些细节待发现
游戏规则
接下来，写到游戏规则了，实现过程会复杂一些，
再理清一下思路，想想应该怎么做才合适呢，
飞行棋的游戏规则大致是这样的，没有玩过的可以了解一下：
按照飞行棋的游戏规则，实现游戏逻辑，觉得难不难呢，可以分三步实现，能把难度降低，
1. 投骰子