可曾记得小时候玩过的飞行棋游戏，是90后的都有玩过吧，现在重温一下，这是一个可以二到四个人参与的游戏，通过投骰子走棋，一开始靠运气，后面还靠自己选择，谁抢占先机才能赢，还可以和小伙伴们一起玩，狭路相逢勇者胜，可谓趣味多多 。
文章目录测试游戏关于项目
创建小程序
打开电脑上的微信开发工具，如下图所示，新建一个小程序项目
例如，项目名称为-chess，依次选择
开始页面
新建的项目中，系统有自动创建的第一个页面，文件在/pages/index/index.wxml，就在这里添加布局，
考虑到游戏可视情况选择几人玩，要在布局里添加表单组件，让用户选择，
然后点击开始游戏即可，显示结果如下图所示
在对应的index.js逻辑文件里，添加开始游戏按钮点击事件，
在事件方法里写上代码调用系统的API如下，可打开游戏页面：
wx.({ url:"/pages/game/game", ... }) 还需要把用户选择的数据传过去；
游戏页面
接下来，新建一个文件夹game，建一个游戏页面，文件名都是game，
在文件/pages/game/game.wxml中，添加游戏页面的布局，代码如下
{{item}}
游戏页面上只用了一个画布组件，一个背景图片，一个float-panel类的视图层显示数据，都是层层叠放显示的
游戏逻辑
就在game.js文件里写游戏逻辑，当页面加载渲染完成时，系统会调用其中的方法()，就在这里开始写，先获取组件的数据，
画棋盘
实现画棋盘的逻辑并不复杂的，可以这么做，先用绘制好网格，然后在对应的格子上绘制各种图案就可以，
就像平时用电脑办公的表格制作软件Excel，单元格可以合并的，如下图所示，
画棋盘的代码放在项目里的一个/utils/game-map.js文件中，作为模块来用
需要用模块的时候，用导入一下这个模块文件，看如下代码
import GameMap from '../../utils/game-map.js';Page({/*** 页面的初始数据*/data: {bgImg: '',//显示背景图片isAnimaging: false,//是否在动画中isNewAir: false,//是否再加棋子（派新飞机）toasts: ['x4', 'x4', 'x4', 'x4'],//飞机场显示的信息current: 0,//允许哪个玩家操作，默认第一个玩家（1号）currentColor: 'none',//设置游戏地图底部的控件背景颜色isSelectMode: false,//如果一个玩家派出多个棋子，会进入选择棋子状态isEndGame: false,//是否结束游戏},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {//获取canvas组件的数据wx.createSelectorQuery().select('#canv').fields({size: true,node: true}, res => {//...省略了//这里设置canvas组件的节点和绘制APIthis.canvasData = http://www.kingceram.com/post/{canvas: res.node,context: res.node.getContext('2d')};//获取底部控件对象 组件 将用来操作this.ctrlPanel = this.selectComponent('#ctrl-panel');//初始化棋盘this.initChessPanel();//...省略了}).exec()},
从上面代码看出来了，调用方法()就可以绘制游戏地图，来看看怎么实现的呢
//设置初始游戏数据const initGameData = http://www.kingceram.com/post/{bgColor: '#55A3FF',//棋盘背景色preCurrentUid: -1,//上一个玩家id，-1表示没有};//用不同的四个颜色分别表示四个玩家的棋子const initUserList = ['#E60116', '#FFC700', '#0277A8', '#08983F'].map((color, i) => {return {chessColor: color,//棋子颜色isJoin: this.joinUsers.indexOf(i) >= 0,//是否加入};});//这里调用模块文件game-map.js的GameMap地图对象，把上面的配置数据传入即可const map = new GameMap(this.canvasData, initUserList, initGameData);//调用地图对象的绘制地图上所有格子的方法，格子就是棋子的位置，生成图片数据let bgImg = map.drawMapGrids();let current = this.data.current;//设置好地图数据，将来用到this.gameData = http://www.kingceram.com/post/map.gameData;//更新显示到页面this.setData({bgImg,//把地图显示到背景中currentColor: this.gameData.userlist[current].chessColor,gameToast: `请${current + 1}号玩家点击投骰子`});//省略了...