这是React井字棋项目的最后一篇笔记，记述AI实现。
一. 是开头都会说的原理
但凡懂一点围棋的人都知道“大场”这个概念，可以浅显地把它理解为布局时棋盘上各处的要点。棋谚“金角银边草肚皮”，就很好地说明了大场具有的特征：价值高。
比如没其他子的情况下，先手占星角位，这手棋价值大约是20目。第一手下在顶角，价值可能就1-2目。那就如果第一手占天元，价值...就不好说了。
一个棋类游戏AI实现的难度在于，每手棋的价值其实都是人类经验性的总结。算法无论是穷举或进化，都是人在教机器下棋。人的水平高，机器就学得快。反之亦然。
回到九宫格的井字棋，由于场地条件限制，极大地简化了ai的实现过程。穷举就可是最现实的办法。人只需要根据经验定义每种情况下点位的价值。教会它计算每手棋的价值，再根据价值排序，找出价值最高的一个就可以了。
只考虑一条线路上的情况，当场面出现己方的二子连线时，无疑最佳落子点是这条线的第三点（一着取胜），这手棋对于取胜来说，必然是无价的。但机器不懂人类的价值观，我们就假定这手棋的价值是10000吧。如果这条线路上对方出现二子连线，此时场面最有价值的点位就是封堵对方二子连线的位置，这手棋价值也很重要，但不能超过己方二子连线的价值，可算作1000。同理，当这条线路上，只有你的一个子，你下这手棋可以获得在这条线上的先手优势，有价值，但是比前两种情况都低，算作100。如果你下一手棋，线路上只有对方的一个子。你落子于此，既不能一步取胜，也不能封堵对方的二子连线，且不能在这条线上获得先手优势，那就是废着，昏着（如同围棋中在自己的地盘里填子一样）——尽管我们那么评价它，但这在实战中还是可能出现的，所以它的权重就是-10。
其它情况有没有考虑到呢？有比如线路一个子都没有的情况，先手肯定有一点点优势。但是在井字棋的布局里还不够不典型。就定义为0吧——这里又有坑了。
实际上的情况是，一手棋包含了2-4条线路。综合各条线路的判断下来。累加的权重就是这手棋的价值。
二. AI结构
先在外部js上定义一个ai函数；再把这个ai.js引入到header中。回到组件的页面。在Game组件的渲染方法return前写console.log(ai(lastHistory.squares))
好了，可以想象一下，的井字棋应用之前有了一个history状态。只要在电脑走棋的时候，把这个history状态发送给AI，AI遍历状态，自动找出最佳的落子点，并返回给状态。
- 判断哪些位置能走
function ai(arr，turnToX){
var loacation=arr.map(function(item,index){
if(item===null){
return index;
}
}).filter(function(item){
return item!==undefined;
});
...
}
通过这一步，得到一个数组。这个数组代表哪些地方（一维坐标）是可以走的。
- 确定电脑应该扮演的角色，这样才能分析——把turnToX状态传进来
var player=turnToX?'X':'O';
- 计算能走的点位价值，sort排序返回点位。
之前所谓的ai算法实现的大坑，其实也就是这么回事。
三. 情景分析
到目前为止，拿到了可落子的点位，AI已经实现了一半。
再次请出这张棋盘图：
AI就根据这张图照着写。因为不是二维坐标系，所以判断时必须细心了。
AI结构后续
// ai函数
var oCalc={};
for(var i=0;i<arr.length;i++){
for(j=0;j<loacation.length;j++){
var index=loacation[j];
switch(index){
case 0:
case 2:
case 6:
case 8:
oCalc['loacation'+index]=judgeConner(index);
break;
case 1:
case 3:
case 5:
case 7:
oCalc['loacation'+index.toString()]=judgeSide(index);
break;
case 4:
oCalc['loacation'+index.toString()]=judgeCenter(index);
break;
}
}
}
角位是2,4,6,8。边位是1,3,5,7。中心位置为4。根据不同的情况返回不同的位置到对象oCalc中。（作为测试，可以把oCalc作为ai函数的return值）。
- 角位，需要判定的有3条线路（横竖斜）
- 边位，需要判断2条线路（横竖）
- 中心位置需要判断4条线路：（横竖撇捺）
接下来就是在各个函数里var一个value，一个个对arr进行判定。
当然，有稍微简化一点的办法：意识到很多判断是重复的，比如说边角判断，线路判断2，5，8其实就是棋盘被“推倒之后的”0，1，2。根据这个思想可以定义a，b两个值，当判断的边角是0时，a=1，b=2。当判断的边角是2时，a=5，b=8。同理，当判断的边角是8时，a=7，b=6...如此往复。
处理相同权重的点位
游戏一开始，就发现所有的位置打出来，权重都是0。这也就是之前把单条线路设置为0的坑。最合理的算法应该是设置为1或10。也就是说，中心位置按理是最佳落子点，但是由于判断太繁琐，就省略了这些判断，当成是0。
事实上做这些判断是得不偿失的，因为体现“1”这个价值的点位只有在第一步时才用到。
解决方案：就是在judgeCneter函数中首先来一个判断，如果可落子点为9，直接把value设置为10并马上返回。
页面还可能会有很多相同价值的落子点，找出第一个返回就行了。
排序
当前需要根据oCalc的键值来获取该对象的属性：
var largest={
index:-1,
value:-100
};
for(var attr in oCalc){
if(oCalc[attr]>largeast.value){
largest.index=parseInt(attr.replace('loacation',''));
largest.value=oCalc[attr];
}
}
console.log([player,JSON.stringify(largest)]);
return largest.index;
/*******ai函数结束*********/
}
注意largest初始状态。
这下就拿到点位了！
四. 回归React
现在可以做一个按钮，点击请求之后，直接在棋盘上反映AI所走给出来的最佳位置。
给按钮绑定一个handleClick事件，之前的handleClick参数传的是状态，，现在直接把ai的计算结果传进去。
之前的组件已经完备，状态工作正常。以至于不需要再动什么内容。
效果如下
留意到最后一个状态index是-1.再点击就会报错。所以handleClick开头再加一个如果参数等于-1的判断。
笔者之前用过jQuery写面向过程的井字棋（http://djtao.top/ttt/），二者的代码量差不多，但是React写的思路非常明确，错误非常好排查。深感觉到工程越大，框架优势越明显。
至此，渡劫成功。代码就不放了。