蜘蛛纸牌源码学习+注释
源码分析思路: 首先,用了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,直接将所有已发牌队列的最后一张牌移除,并恢复待发牌,这里就需要重新添加一个牌堆,并且将之前的牌堆关上点击事件开关; 如果不是翻牌,检测翻牌历史,如果有,则将重新让翻转至背面,测收牌历史,如果有,则将收起的牌移回原队列,移牌历史处理。
总结: 这个源码写的非常清晰,看上去很好理解,源码读起来也不是那么吃力,值得一看。