前言
每到春节期间，游戏里总是充满过节气氛，今年是龙年，咱也来凑个热闹，那就整一个龙年拼图小游戏吧。
完成拼图后，希望带来欢乐的同时也能给大家带来好运，龙年行大运！
游戏介绍
拼图游戏是一种古老而又经典的游戏，它在全世界范围内都备受欢迎。随着科技的发展和智能手机的普及，拼图游戏也逐渐走进了人们的生活。
拼图游戏最早可以追溯到18世纪，当时它是一种由木块拼成的游戏，主要是为了培养儿童的观察力和动手能力。20世纪初，拼图游戏逐渐开始使用纸板和卡片，这使得制作和销售变得更加容易。拼图游戏也叫九宫格游戏，所以是游戏中图片会被切割成9等分，所说的纸板、卡片都是由一整张完整的图片切割而来。
到现在，我们只需要有照片就可以将图片的电子切割，从而实现图片的分割与拼接。
今年24年是龙年，那必须整起龙年的拼图游戏。以下是游戏效果图：
在右侧图片区域选择龙的图片，之后点击九宫格中图片就可以移动图片。
功能实现
分割图片并初始化九宫格的大盒子，即img和div的宽高，并初始化九个格子的宽高。
js
function initImg(){
var $imgs=$(".box img");
$imgs.attr("src",my$imgs[imgIndex]);
var imgWidth=$imgs.eq(0).width();
var imgHeight=$imgs.eq(0).height();
boxHeight=Math.ceil(540*imgHeight/imgWidth);
$imgs.width(boxWidth); // 每个img中的图片缩放到大盒子的宽高一样
$imgs.height(boxHeight);
$(".box").width(boxWidth+2); //缩放大盒子的宽度和高度
$(".box").height(boxHeight+2);
var divHeight=Math.ceil(boxHeight/3); //计算出每个小格子的宽高
var divWidth=Math.ceil(boxWidth/3);
$divs.height(divHeight); //缩放每个格子的宽高
$divs.width(divWidth);
initGrid(divWidth,divHeight); //初始化格子系统，记录每个格子的位置
$.each($imgs,function(i,v){ //每个格子中显示图片的某一部分
$(this).css({"top":-grids[i].top+"px","left":-grids[i].left+"px"});
});
}计算出每个格子的左上角位置和当前位置放的小图片div的序号，最后一个格子是空白的，即没有div，序号为-1
js
function initGrid(width,height){
for(var i=0;i<9;i++){
if(i==8){
grids[i]={"top":parseInt(i/3)*height,"left":i%3*width,"div":-1};
}else{
grids[i]={"top":parseInt(i/3)*height,"left":i%3*width,"div":i};
}
}
}游戏交互逻辑，这里是通过点击实现，即当我们点击一个图片时，则开始游戏计时，并将它移动到它相邻的空格上
js
$divs.click(function(){
if(!isstart){ //游戏是否已经开始计时，如果没有开始，就开始计时
isstart=true;
timer=setInterval(showTime,1000);
}
var divi=$divs.index($(this)); //获取当前点击的div序号
var grid=-1;
for(g in grids){ //通过div序号获取到点击的格子序号
if(grids[g].div==divi){
grid=g;
}
}
switch(grid){ //通过格子序号，获取格子能移动到的相邻的格子
case '0':
move(0,[1,3]);
break;
case '1':
move(1,[0,2,4]);
break;
case '2':
move(2,[1,5]);
break;
case '3':
move(3,[0,4,6]);
break;
case '4':
move(4,[1,3,5,7]);
break;
case '5':
move(5,[2,4,8]);
break;
case '6':
move(6,[3,7]);
break;
case '7':
move(7,[4,6,8]);
break;
case '8':
move(8,[5,7]);
break;
}
});移动图片小格子，这里需要注意，并不是所有的图片都可以移动，只有处在空白格四周的图片才能被移动，以下代码实现的就是这个逻辑，即判断目标格子是否为空，如果是空的，才将原格子中的图片移动到目标格子。
js
function move(fromIndex,toIndex){
for(var i in toIndex){
var index=toIndex[i];
if(grids[index].div<0){
var divIndex=grids[fromIndex].div;
$divs.eq(divIndex).animate({"left":grids[index].left+"px","top":grids[index].top},500);
grids[fromIndex].div=-1;
grids[index].div=divIndex;
isWin();
}
}
}判断是否完成拼图，完成拼图则提示游戏赢了，并显示游戏用时
js
function isWin(){
var win=true;
for(var i=0;i<8;i++){
if(grids[i].div!=i){
win=false;
break;
}
}
if(win){
clearInterval(timer);
$divs.hide();
$divs.eq(0).width(boxWidth);
$divs.eq(0).height(boxHeight);
$divs.eq(0).show(500,function(){$showTimeP.text("你成功了，用时"+time+"秒");});
}
} 游戏赢啦
最后希望大家在龙年行大运，和和美美！