在手牌的末尾能够看到灰色的Octocat，它无法被再次放入棋盘。
6、AOE技能：
可以看到，技能范围内的单位都受到AOE影响
7、说明：
事实上，上面的游戏规则代码已经被前人用各种方式实现很多遍，可以说每一个成熟的游戏开发团队都有其精雕细琢的规则代码，但绝大部分这类代码都是闭源或者存在获取障碍的，因此我自己用JavaScript实现了这一套规则代码并把它开源。其实，Babylon.js的开发团队也在做类似的事情——将各种商业3D引擎的成熟技术移植到WebGL平台并开源。
有人会问，花费很多精力用低效的方式做一个别人做过多次的“轮子”有什么用？确实，和成熟的商业3D引擎相比，WebGL技术在性能和操作性上还存在明显的缺陷，但WebGL技术的两个独有特性是传统商业引擎所无法比拟的：一是网页端应用的强制开源性，因为所有JavaScript代码最终都以明文方式在浏览器中执行，所以任何人都能够获取WebGL程序的代码并直接使用浏览器进行调试，这使得WebGL中用到的技术和知识可以不受垄断的自由传播；其二，JavaScript语言的学习难度和传统的3D开发语言C++不在同一量级，浏览器也为开发者解决了适配各种运行环境时遇到的诸多难题，WebGL技术的出现使得3D编程的入门前所未有的简单。
对于拥有大量高端人才、以盈利为目的商业性游戏公司，强制开源和低技术门槛并没有太大意义，所以WebGL技术注定难以成为商业游戏开发的主流，但是对于不以盈利为目的的人士和非职业编程者来说WebGL技术正预示着一种新的、不受现有条框束缚的表达方式，而准确且丰富的表达正是人们相互理解进而平等相待的基础之一。使用WebGL技术，学生、教师、传统信息系统操作员乃至无法忍受劣质商业化游戏的玩家都可能做出兼具外在表象和内在逻辑的3D程序。
二、代码实现：
1、整理前面的代码：
在编写规则代码之前，首先对https://www.cnblogs.com/ljzc002/p/9660676.html和https://www.cnblogs.com/ljzc002/p/9778855.html中建立的工程进行整理，经过整理后的js文件结构如下：
首先把BallMan、CameraMesh、CardMesh三个类分离到三个单独的js文件里，置于Character文件夹中，用以实例化场景中比较复杂的几种物体；
接着把所有和键盘鼠标响应有关的代码放到Control.js中；
FullUI.js里包含所有与Babylon.js GUI和Att7.js Table相关的内容；
Game.js改动不大，仍起到全局变量管理的作用；
HandleCard2.js里是和手牌有关的规则代码；
Move.js是CameraMesh的移动控制方法；
rule.js是一部分和场景初始化和GUI操作有关的规则代码；
tab_carddata.js里是卡牌定义；
tab_skilldata.js里是技能定义，并且包含了和技能有关的规则代码；
tab_somedata.js里是一些其他定义；
Tiled.js是和棋盘有关的规则代码。
整理之后的部分文件内容如下：（只总结了前两篇文章里的内容）
图一：
图二：
图中列出了每个文件中的属性和方法，大部分可以在前两篇文章中找到对应的说明，如果哪里没有说清，请在评论区留言。因为时间有限，新增加的规则代码并没有画入，因为手机性能有限，有些文字略显模糊。
2、手牌管理：https://www.cnblogs.com/ljzc002/p/9660676.html
3、从手牌放入棋盘：
a、在FullUI.js中添加“落子”按钮
1 var UiPanel2 = new BABYLON.GUI.StackPanel(); 2 UiPanel2.width = "220px"; 3 UiPanel2.fontSize = "14px"; 4 UiPanel2.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; 5 UiPanel2.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER; 6 UiPanel2.color = "white"; 7 advancedTexture.addControl(UiPanel2); 8 var button3 = BABYLON.GUI.Button.CreateSimpleButton("button3", "落子"); 9 button3.paddingTop = "10px"; 10 button3.width = "100px"; 11 button3.height = "50px"; 12 button3.background = "green"; 13 button3.isVisible=false;//这个按钮默认不可见，选中并放大一张手牌后可见 14 button3.onPointerDownObservable.add(function(state,info,coordinates) { 15 if(MyGame.init_state==1&&card_Closed&&card_Closed.workstate!="dust")//如果完成了场景的虚拟化 16 { 17 Card2Chess();//将当前选中的手牌和光标关联起来，换回first_lock，并改变光标的颜色，点击空白地块时落下棋子， 18 } 19 });