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(leti=0;i
拼图的绘制(根据得到的随机pic集合进行绘制)
drawHandler(){
//获取canvasDOM元素
letcanvas=this.$refs.can;
letctx=canvas.getContext('2d');
canvas.width=400;
canvas.height=400;
ctx.clearRect(0,0,400,400);
//每个小拼图的宽高，根据canvas的宽高和拼图行数row列数column来动态设置
//是进行难度动态设置的唯一方式
letwidth=canvas.width/this.column;
letheight=canvas.width/this.row;
//必须通过Image构造函数动态创建，若是通过获取DOM节点，则onload只执行一次，无法进行移动
letimg=newImage();
img.src=require('http://www.haoziyuan.cc../../public/image/test.png');
img.onload=()=>{
for(leti=0;i
其中img必须通过Image构造函数动态创建
拼图的移动
//在mounted钩子进行键盘的监听事件
mounted(){
this.newGame();
document.onkeydown=(event)=>{
letkey=event.keyCode;
if(key==38||key==87)this.moveHandler('up');
elseif(key==40||key==83)this.moveHandler('down');
elseif(key==37||key==65)this.moveHandler('left');
elseif(key==39||key==68)this.moveHandler('right');
}
}
methods:{
moveHandler(dir){
//re:空白块根据方向最终需移动到的位置索引
letre,temp={};
if(dir=='up'&&this.pic[this.sign].x>0){
//根据空白块的row和column推算出上面一块图片的序号
//在将两个图片快进行互换位置，及交换row、column、index
//重新赋值this.sign（标志着空白块的序号：默认15）
re=(this.pic[this.sign].x-1)*this.row+this.pic[this.sign].y;
temp.row=this.pic[re].row;
temp.column=this.pic[re].column;
temp.index=this.pic[re].index;
this.pic[re]={...this.pic[re],row:this.pic[this.sign].row,column:this.pic[this.sign].column,index:this.pic[this.sign].index};
this.pic[this.sign]={...this.pic[this.sign],...temp};
this.step=this.step+1;
}
elseif(dir=='down'&&this.pic[this.sign].x0){
re=(this.pic[this.sign].x)*this.row+this.pic[this.sign].y-1;
temp.row=this.pic[re].row;
temp.column=this.pic[re].column;
temp.index=this.pic[re].index;
this.pic[re]={...this.pic[re],row:this.pic[this.sign].row,column:this.pic[this.sign].column,index:this.pic[this.sign].index};
this.pic[this.sign]={...this.pic[this.sign],...temp};
this.step=this.step+1;
}
elseif(dir=='right'&&this.pic[this.sign].y
完成拼图的判定
isWinHandler(){
//通过比较所有元素的x、y和row、column是否相等即可，也可以通过index来判断
for(leti=0;i
重新游戏
newGame(){
//在mounted钩子进行
//隐藏完成状态，清空步数，获取随机排列，绘制拼图模块
this.isWin=false;
this.step=0;
this.randomHandler();
this.drawHandler();
}
JS总合
HTML部分
游戏胜利！