SpiderSolitaire

蜘蛛纸牌源码学习+注释

源码分析思路：

首先，用了2个构造函数Spider和Poker

Spider构造函数拥有以下方法：

init：函数初始化

start：游戏开始

continuous：检测扑克牌是否连贯

dealing：发牌

record：记录分数和移动步数

folding：收牌

adjustDistance：调整每列牌的间距

undo：退一步

replay：重新开始

win：游戏胜利

这几个功能函数

Poker构造函数拥以下方法：

init：函数初始化

render：初始化占位符，牌堆，牌的样式和摆放位置

moveTo：移动牌

offset：获取牌位置

soliOffset：获取队列中最后一张牌位置，并设置下一张的牌的位置

disable，enable：牌上面能否移动的开关

expose：翻拍

listener：给牌上面加监听函数

dragStart，draging，dragEnd：拖拽牌的一系列判断功能

初始化游戏：

首先Spider初始化时创建52张牌，牌有3个属性pos(放置位置)，style(花色，背面，或者占位符)，num(牌的点数)；

利用Math.random()，洗牌。打乱初始化有规则的closeCollection数组；

创建占位符和创建牌堆的样式，这里调用Poker函数设置10个占位符和5个牌堆的样式，并且给牌堆绑定点击函数；

点击start开始发牌；

发牌规则从第6行第5列停止发牌，从5行第5列明牌显示，其他则为暗牌；

closeCollection 为未发牌队列，每次发牌从牌堆中的取第一个元素；

每发一张牌利用Poker按照规则这是牌的样式和发到的位置，同时这个过程利用一个动画效果；

在Poker发牌时，对于5行第5列后明牌显示的牌，打开开关(移除fixed)，此时牌堆上面可添加事件，这里添加了mousedown事件，按下鼠标时可以执行函数dragStart拖拽；

发牌完毕延迟60毫秒，让牌堆数组的最后一组解除锁定，打开开关(移除fixed)，此时牌堆上面可添加事件；

此时就可以开始点击牌堆继续发牌，移动明牌(重新开始，后退一步等稍后考虑)：

继续发牌：

通过Spider的dealing发牌函数，并且结合Poker的soliOffset给新牌设置位置；

同时发完牌后减少一个牌堆，然后解锁下一组牌堆 ，此牌堆上点击可触发发牌事件；

最后将这个事件添加到历史记录中；

则一次发牌事件完成。

另外一个操作是移动明牌：

Poker的dragStart函数首先利用Spider的continuous判断点击的牌是否连续，如果连续则可以拖动；

拖动时新建一个容器dragBox，将点击牌以及所在队列的后续牌元素放到dragBox中，将点击牌及所在队列的后续牌从openCollection移除，暂存到一个临时数组dragCollection中；

绑定两个事件：mousemove和mouseup(这里我没有弄明白mousemove.drag是什么意思)；

并且记住点击牌所在队列的上一张牌S.soliPoker，移动后这张牌就是这组对列中的最后一张；

记录点击时点击事件的鼠标位置；

绑定的mousemove事件利用Poker的draging函数来拖动牌；

绑定的mouseup事件利用Poker的dragEnd来判断，能否放置牌成功，当牌移动到一定范围松开鼠标时，会判断这个牌是否连贯(连贯就可以方式)，成功移动牌后，开始一次记分，记录这次操作历史，判断是否需要翻牌，移除创建存放拖动牌元素的容器，判断移动成功的这一列是否完整可以收牌等一系列规则判断。

另外2个操作：

重新开始其实就是重新初始化函数；

后退一步undo比较麻烦，也是需要各种判断：

读取historyQueue历史数据数组里面的内容，如果是翻牌dealing，直接将所有已发牌队列的最后一张牌移除，并恢复待发牌，这里就需要重新添加一个牌堆，并且将之前的牌堆关上点击事件开关；

如果不是翻牌，检测翻牌历史，如果有，则将重新让翻转至背面，测收牌历史，如果有，则将收起的牌移回原队列，移牌历史处理。

总结：

这个源码写的非常清晰，看上去很好理解，源码读起来也不是那么吃力，值得一看。