在前三篇文章的基础上，为基于Babylon.js的WebGL场景添加了类似战棋游戏的基本操作流程，包括从手中选择单位放入棋盘、显示单位具有的技能、选择技能、不同单位通过技能进行交互、处理交互结果以及进入下一回合恢复棋子的移动力。因为时间有限，这一阶段的目的只是实现基本规则的贯通，没有关注场景的美观性和操作的便捷性，也没有进行充分的测试。
一、显示效果：
1、访问https://ljzc002.github.io/CardSimulate2/HTML/TEST4rule.html查看“规则测试页面”：
天空盒内有一个随机生成的棋盘（未来计划编写更复杂棋盘的生成方法），棋盘上有两个预先放置的棋子，屏幕中央是一个蓝色边框的准星。
2、按alt键展开手牌，拉近手牌中的某个单位后会在屏幕左侧显示“落子”按钮，点击落子按钮后，准星将变为橙色边框（再按alt返回手牌可以将准星变回蓝色），在橙色准星状态下点击地块则可将选定的手牌放入棋盘，放入棋盘后（未来计划一个单位在手牌中以卡牌方式显示，放入棋盘后改为3D模型）立即显示棋子的移动范围，并且在屏幕的左上角显示棋子的状态和技能列表（计划优化这个表格的布局）。
选中手牌：
准星变为橙色：
落子后显示移动范围和状态技能列表：
为了能用鼠标选取技能，这里调整了单位选取规则，现在只要选中单位，场景浏览方式就会从first_lock（鼠标锁定在屏幕中心）切换为first_pick（鼠标可以在屏幕中自由移动选取）以释放光标，取消单位选中后，自动切换回first_lock。
鼠标移入技能单元格，显示技能的说明：
在这种状态下，点击红色范围外的地块或者按alt键或者点击棋子本身，都可以解除棋子的选中状态，并隐藏移动范围和技能列表。
3、在移动棋子之后，棋子会从wait状态变为moved状态，如果棋子具备nattack（普通攻击）技能，将自动显示棋子的普通攻击范围；按alt键，在手牌菜单里点击“下一回合”，将把所有棋子恢复为work状态（这里还需要一个明确的回合结束生效效果），并且增加需要冷却的技能的装填计数并减少持续时间有限的技能的持续时间（尚未测试）。
完成移动之后：
右侧的Octocat正处于moved状态，它周围是nattack技能的释放范围（可以看到skill_current项显示为“nattack”，表示移动完成后默认选取了nattack技能），此时的Octocat不能再移动，可以通过点击没有遮罩的地块取消对他的选取。
点击下一回合按钮后，再选中Octocat单位：
发现Octocat又可以再次移动，并且冷却时间为2的test2技能进行了一次装填。
4、单位移动完毕之后会自动选择nattack作为当前技能，或者在技能列表里点选技能做为当前技能（目前只完成了nattack的编写），选择完毕后会在单位周围用红色遮罩标示技能的释放范围，点击红色遮罩，则以绿色遮罩显示技能的影响范围。再次点击绿色遮罩，则在这个位置释放当前技能，释放技能时技能释放者和释放目标按顺序执行相应的动画效果。
5、当单位的血量耗尽时，会变成灰色返回手牌：