本人80后，小时候，没有电子游戏，在地上用树枝画好棋盘，找俩大石头做老虎，24个小石头做绵羊，两个小伙伴就可以开心玩一下午。怀下旧，顺便也让现在的小朋友们接触这个好玩的游戏，把他做成h5小游戏。以下记录构思和实现过程。github代码。
游戏体验地址老虎吃绵羊。顺便也可以关注下我的青少年教育公众号《纳尼亚》和小程序《笔家分享》，thanx！
产品设计
- 数据结构设计
5*5的棋盘二维数组。// 棋盘二维数组 [ [ {row: 0, column: 0, chess: undefined}, {row: 0, column: 0, chess: undefined}, {row: 0, column: 0, chess: undefined}, {row: 0, column: 0, chess: undefined}, {row: 0, column: 0, chess: undefined} ], // row, column为元素的行列值， chess为在(row， column)位置的棋子 ... // 一共五行 ] // 棋子 chess = { type: 'sheep', count: 6, hintFrom: undefined, hintTo: undefined, hintTarget: undefined, hintDisapear: undefined } // type为棋子类型，sheep 或者 tiger。count为数量，最初6只羊放在一个格子上。hintFrom用于显示棋子移动起始位置标志, hintTo: 用于显示棋子移动结束位置标志, hintTarget: 用于显示棋子目标位置标志, hintDisapear：用于显示棋子消失标志selectedItem: null, // 选中的棋子， turn: null, // 轮到哪种棋子移动 status: null, // 游戏状态，羊输了还是赢了 role: null, // 玩家选择的角色：羊还是老虎，取决于第一次移动的棋子 sheepLastAutoMove: null // 用于记录羊上次自动移动信息：从哪移动到哪，为了优化羊自动移动算法 - 页面结构设计
首先一个canvas绘制棋盘：5行5列，2个大斜线，4个小斜线
采用grid布局，div显示棋子：老虎或者羊。
根据不同的提示标志，为棋子添加相应的提示class
根据数据显示具体棋子样子 - 每个棋子添加点击事件监听
事件监听函数里大概做了这些事：选中棋子，落下棋子，过程中会清除一些标志，添加一些标志，同时做一些状态判断，不符合条件的操作拦截掉。
因为后面添加了和用户相反角色的自动移动，也是用这个监听函数实现的，所以加了一个参数isAuto,用于做区分逻辑。 - 和用户相反角色的自动移动
包括老虎自动移动，和羊自动移动。
老虎自动移动，就是简单的寻找能吃的羊，就吃掉，不能的话随便走一步，所以走的比较傻。
羊自动移动，会让每个个羊按目标位置，预先移动一次，然后计算移动后的棋盘有利于羊的分数。最后比较所有移动的分数，采取最高分移动。为了防止羊在俩个位置来回走，又做了和上一次移动做比较的逻辑。 - 设置游戏状态
每次移动完都判断羊是否小于6只，小于的话羊就输了。
同时也判断老虎是否能移动，不能移动，老虎就输了
总结
代码写的有点粗糙，自动算法也不够机智。满足下怀旧玩玩还凑合。另外，用vue这种数据驱动型框架，做游戏也很爽，赞一个。
