使用vue+canvas实现一个拼图小游戏-创新互联

这期内容当中小编将会给大家带来有关使用vue+canvas实现一个拼图小游戏，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

思路步骤

• 一个拼图拼盘和一个原图参照
• 对原图的切割以及随机排序
• 通过W/A/D/S或上下左右进行移动
• 难度的自主选择
• 对拼图是否完成的判定

JS实现部分

数据分析

• row：拼图的总行数；column：拼图的总列数。 (用来设置拼图难度，也是每个拼图块宽高的设置规则)
• pic[{x,y,row,column,index}]：小拼图的集合，其内元素为小拼图的数据结构。 (x、y：拼图块在canvas的绘制规则，初始化后不会进行改变；row、column：对原图进行切割并绘制的规则；index：用来判定是否完成拼图的规则之一，绘制空白块的规则，其中空白块的index=-1)
• num：随机排列的次数。
• sign：空白块在拼图集合 pic 中的索引。 (数字类型，用来定位空白块，跟随空白块的移动而变化，是进行移动的规则之一；默认为：15)
• isWin：用来判断是否完成拼图的条件。 (布尔类型，默认为false)
• step:表示移动的有效步数。 (数字类型，默认为0，重新游戏及完成游戏会清零)
• maskShow： 编辑游戏 的判定条件。 (布尔类型，用来显示与隐藏编辑游戏的对话框，默认为false)
  

方法分析

拼图集合 pic 的初始化及随机排列

randomHandler() {
  // pic的初始化
  for(let i=0;i            

            文章题目：使用vue+canvas实现一个拼图小游戏-创新互联            

            新闻来源：http://cqcxhl.com/article/djghpo.html