数独项目 - wuyxp/sudoku GitHub Wiki
原型图
https://docs.google.com/spreadsheets/d/1sajFhBJmm7X0bfdX-fs6KX-hQhe-KjpMI1FH3ZIxJKU/edit#gid=0
完成效果
框架
使用gulp和webpack
- 使用gulp-less用来编译less文件
- 使用webpack-stream来执行webpack-config文件
- webpack启动了source-map
- 加载env的babel-loader
- 还有jquery的问题还未处理
less
- 定义系列变量（字体，网格大小）
- html中设置100%高度
- body中设置user-select禁止用户选择
- box使用flex布局，纵向排列
- 大量使用flex布局
- 网格部分，使用了左上边加入边框，并且根据js动态按照宫的排列，加上对应的class，可以设置宫周围的边框。
js
config.js
- 默认设置项配置（最大值，最大level，提示等）
toolkit.js
- 工具方法
- 随机抽取数组
- 洗牌算法
- 获取矩阵的，行列宫
- 生成mark表
- 检查所有数组数值的正确性
generator.js
- 生成完整的数独矩阵
- 在生成过程中可以执行用户的成功回调函数
- 根据生成的数独矩阵，转换为用户可以玩的斑点矩阵
ui.js
- Render类用来相应用户操作
- 渲染完整矩阵
- 渲染答案矩阵
- 渲染弹出选择九宫格
- 设置关卡函数
- 获取还未填写矩阵的空白处坐标
- 检查矩阵是否完成
- 相应按钮的事件
- 设置值
- 设置mark
- 绑定矩阵点击事件
index.js
- new Render函数
- 绑定对应的事件
ui函数是用的面向对象写法，就是为了给用户提供一个完整的对象，供用户使用上面的方法
toolkit等工具函数都是采用函数式写法，用来方便灵活的组合函数，供代码内部使用