这篇文章讨论如何在基于Babylon.js的WebGL场景中，建立棋盘状的地块和多个可选择的棋子对象，在点选棋子时显示棋子的移动范围，并且在点击移动范围内的空白地块时向目标地块移动棋子。在这一过程中要考虑不同棋子的移动力和影响范围不同，以及不同地块的移动力消耗不同。
一、显示效果：
1、访问https://ljzc002.github.io/CardSimulate/HTML/TEST3tiled.html查看“棋盘测试页面”：
场景中是一个20*20的棋盘，地块随机为草地、土地、雪地，棋盘中央是四个“棋子”（用卡牌网格对象客串）。使用鼠标和wasd、Shift、空格键控制相机网格对象在场景中漫游，4个棋子会努力让自己面朝相机。
2、点击一个棋子或棋子所在的地块，棋子将被选中并显示棋子的可移动范围和影响范围：
棋子可以到达的地块覆盖蓝色半透明遮罩，棋子不能到达但可以影响的地块覆盖红色半透明遮罩。这里规定“铜卡”的移动力为10、影响范围为2，“银卡”的移动力为15、影响范围为3，草地、泥地、雪地对移动力的消耗分别为2、3、4.
3、点击蓝色地块，将用黄色半透明遮罩标出棋子到达目标地块的路径，点击红色地块，则标出到达距这个红色地块最近的蓝色地块的路径：
4、点击黄色地块，则棋子缓缓移动到目标黄色地块，到达目标后，在棋子周围显示棋子的影响范围：
在更新版的程序里，取消了棋子下面的红色遮罩
5、点击棋子可以将镜头拉近到棋子附近；点击影响范围外的地块，可以取消棋子的选定；点击其他的棋子或者含有其他棋子的地块，可以改变选定的棋子。
二、代码实现：
这个棋盘场景是在上一个卡牌场景（https://www.cnblogs.com/ljzc002/p/9660676.html）的基础上改进而来的，这里只讨论改变和新增的代码中比较重要的部分，大部分新增方法在Tiled.js中。
1、在initArena中建立棋盘：
1 mesh_tiledGround=new BABYLON.Mesh("mesh_tiledGround", scene);//这是所有地块的父网格也是所有棋盘上的棋子的爷爷网格 2 mesh_tiledGround.position.y=-7;//设定棋盘高度 3 MakeTileds2(0,20,20);//产生正方形的棋盘网格，20*20大小。