vue实现老虎吃绵羊小游戏

本人80后，小时候，没有电子游戏，在地上用树枝画好棋盘，找俩大石头做老虎，24个小石头做绵羊，两个小伙伴就可以开心玩一下午。怀下旧，顺便也让现在的小朋友们接触这个好玩的游戏，把他做成h5小游戏。以下记录构思和实现过程。github代码。

游戏体验地址老虎吃绵羊。顺便也可以关注下我的青少年教育公众号《纳尼亚》和小程序《笔家分享》，thanx！

产品设计

1. 数据结构设计
   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 // 用于记录羊上次自动移动信息：从哪移动到哪，为了优化羊自动移动算法     
   

2. 页面结构设计
   首先一个canvas绘制棋盘：5行5列，2个大斜线，4个小斜线
   采用grid布局，div显示棋子：老虎或者羊。
   根据不同的提示标志，为棋子添加相应的提示class
   根据数据显示具体棋子样子
3. 每个棋子添加点击事件监听
   事件监听函数里大概做了这些事：选中棋子，落下棋子，过程中会清除一些标志，添加一些标志，同时做一些状态判断，不符合条件的操作拦截掉。
   因为后面添加了和用户相反角色的自动移动，也是用这个监听函数实现的，所以加了一个参数isAuto,用于做区分逻辑。
4. 和用户相反角色的自动移动
   包括老虎自动移动，和羊自动移动。
   老虎自动移动，就是简单的寻找能吃的羊，就吃掉，不能的话随便走一步，所以走的比较傻。
   羊自动移动，会让每个个羊按目标位置，预先移动一次，然后计算移动后的棋盘有利于羊的分数。最后比较所有移动的分数，采取最高分移动。为了防止羊在俩个位置来回走，又做了和上一次移动做比较的逻辑。
5. 设置游戏状态
   每次移动完都判断羊是否小于6只，小于的话羊就输了。
   同时也判断老虎是否能移动，不能移动，老虎就输了

总结

代码写的有点粗糙，自动算法也不够机智。满足下怀旧玩玩还凑合。另外，用vue这种数据驱动型框架，做游戏也很爽，赞一个。