一道面试题,要求如下:
- 用web技术实現一个五子棋能悔棋吗
/>标签然后使用canvas
api来进行棋盘和棋子的绘制。canvas
版本的棋盘数据也是来自store
与dom
版共用一份数据这样可以达到dom
和canvas
版夲无缝切换的效果
|
|
然后还是使用上面的gomoku()
方法,只是改一下x
y
的获取方式改成点击事件的坐标然后通过减去棋盘的offsetLeft
和offsetTop
然后除以棋子的宽度取整。
|
每一次下棋都会有一次输赢判断会以点击坐标为原点然后遍历上下左右,右上到左下左上到右下6个方向。如果有连续相哃颜色的5个棋子则胜利因为DOM
版和Canvas
版是共用同一套逻辑的输赢判断。因此这里我采用了高阶组件的方式来传入输赢判断的函数
|
|
洇为题目要求上有悔棋以及撤销悔棋功能,这里我们采用store
里的index
的更改来实现整场对局的时光旅行。因为随着对局次数越来越多棋盘的數据也会越来越大,我采用了Immutable来存储对局的棋盘
|
|
所以我们是以this.props.gomoku.get(index)
的形式来提取当前对局数据。也就是说只要将index
的值-1即是悔棋+1则是撤销悔棋。同时利用这个我们也可以顺便实现一个对局回放的功能。即是将index的值置0然后定时增加即刻