vue/vuex扫雷

之前项目中使用到Vue这个框架,总体来说开发体验非常好,组件化和数据绑定极大地提高了开发效率,也提高了代码的可维护性。不过之前使用的还是直接引入框架,使用字符串模板作为组件模板的方式开发,这样的方式比较简单易行,直接引入vue,min,js即可开发。不过这种方式虽然简单,但也有显而易见的缺点

使用vue的单文件组件,配合webpack就能很好得解决以上这些问题。

同时在使用vue的过程中,我也遇到了组件之间需要共享数据的问题,以及跨组件交流的问题。虽然这些问题在复杂程度不高的场景下问题不是特别大,但是在构建大型单页应用的时候问题就会很明显。Vuex使用单向数据流的模型比较好的解决了共享数据和跨组件交流问题,同时也让数据流动得以有效的监控。在vuex的官网介绍中也说到

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择

为了体验一下单文件组件和vuex单向数据流,我做了一个简单的扫雷程序,点击Demo直接试玩!

实现原理也比较简单,用二维数组保存棋盘,Vuex集中管理游戏过程中的所有数据和状态,游戏状态、棋盘状态等,所有的数据修改都集中在Vuex的mutation里。整体的结构也不复杂,组件构成如下图,都能在Components目录下找到对应的组件。

screenshot.png

对于扫雷棋盘的自动扩展和我这里用的是比较直观的递归的方法:

  • 对于棋盘上的一块,遍历它周围最多8个块(边界块周围没有8个块),计算出雷的个数
  • 如果个数为零,则遍历周围未点击的块,递归调用自身,计算雷的个数
  • 如果个数不为零,停止递归
    可以看到,递归的过程中做了重复计算,所以肯定也能使用动态规划的方式保留中间状态,对搜索剪枝。不过这里先简单实现了~

推荐阅读更多精彩内容