今天找了一上午总算找到自己想要的九宫格拼图模板，感觉比我想象中设计好多了，只是界面挺简单的；
js部分（pin.js）
// JavaScript Document//获取画图区域
var context = document.getElementById('pintu').getContext('2d');
//创建图片
var img = new Image();
img.src = '0140215A5-2.jpg';
img.addEventListener('load', drawTiles, false);//事件监听函数 addEventListener(事件,处理方法。监听强度(防止回收))
//取得图像大小和分成的块数
var boardSize = document.getElementById('pintu').width;
var tileCount = document.getElementById('level').value;
var tileSize = boardSize / tileCount;
//追踪空白图片位置，记录点击图片位置
var clickLoc = new Object;
clickLoc.x = 0;
clickLoc.y = 0;
var emptyLoc = new Object;
emptyLoc.x = 0;
emptyLoc.y = 0;
//默认拼图未完成
var solved = false;
//默认步数为0
var step = 0;
//获取并初始化画板
var boardParts = new Object;
setBoard();
//更改难度相关方法，更改后重新计算大小
document.getElementById('level').onchange = function() {
tileCount = this.value;
tileSize = boardSize / tileCount;
setBoard();
drawTiles();
};
//追踪鼠标划过的区域
document.getElementById('pintu').onmousemove = function(e) {
clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize);
clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize);
};
//追踪鼠标点击的区域
document.getElementById('pintu').onclick = function() {
if (distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) {
step++;
document.getElementById('step').value = step;//步数记录
slideTile(emptyLoc, clickLoc);
drawTiles();
}
if (solved) {
setTimeout(function() {alert("你完成了！用了"+step+"步");}, 500); //防止浏览器在重绘图片区域之前弹窗而进行500ms的延迟
}
};
//初始化画板函数，模拟n*n的n宫格，使用二维数组创建图片区域
function setBoard() {
boardParts = new Array(tileCount);
for (var i = 0; i < tileCount; ++i) {
boardParts[i] = new Array(tileCount);
for (var j = 0; j < tileCount; ++j) {
boardParts[i][j] = new Object;
boardParts[i][j].x = (tileCount - 1) - i;
boardParts[i][j].y = (tileCount - 1) - j;
}
}
emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;
emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;
solved = false;
}
//将点击的拼图移动到新的位置
function drawTiles() {
context.clearRect ( 0 , 0 , boardSize , boardSize );
for (var i = 0; i < tileCount; ++i) {
for (var j = 0; j < tileCount; ++j) {
var x = boardParts[i][j].x;
var y = boardParts[i][j].y;
if(i != emptyLoc.x || j != emptyLoc.y || solved == true) {
context.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize,
i * tileSize, j * tileSize, tileSize, tileSize);
}
}
}
}
//判断图片是否可移动的方法
function distance(x1, y1, x2, y2) {
return Math.abs(x1 - x2) + Math.abs(y1 - y2); //判断到空白位置的距离是否为1,1
}
//移动拼图相关方法
function slideTile(toLoc, fromLoc) {
if (!solved) {
boardParts[toLoc.x][toLoc.y].x = boardParts[fromLoc.x][fromLoc.y].x;
boardParts[toLoc.x][toLoc.y].y = boardParts[fromLoc.x][fromLoc.y].y;
boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1;
boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1;
toLoc.x = fromLoc.x;
toLoc.y = fromLoc.y;
checkSolved();
}
}
//检查拼图位置是否完成的方法
function checkSolved() {
var flag = true;
for (var i = 0; i < tileCount; ++i) {
for (var j = 0; j < tileCount; ++j) {
if (boardParts[i][j].x != i || boardParts[i][j].y != j) {
flag = false;
}
}
}
solved = flag;
}
html部分（pin.html）
<!DOCTYPE HTML>
<html>
<head>
<title>拼图</title>
<style>
.picture {
border: 1px solid black;
}
#main{
float:left;
}
#yuantu{
float:left;
margin-left: 20px;
}
#step{
margin-left: 100px;
}
</style>
</head>
<body>
<meta charset="UTF-8" />
<div id="title">
<h2>拼图游戏</h2>
</div>
<div id="slider">
<form>
<label>简单</label>
<input type="range" id="level" value="4" min="3" max="5" step="1">
<label>困难</label>
<input type="text" id='step' readonly="readonly" value="0"><label>步数</label>
</form>
<br>
</div>
<div id="main" class="main">
<canvas id="pintu" width="480px" height="480px"></canvas>
</div>
<div id="yuantu" width="480px" height="480px"><img src="0140215A5-2.jpg"/></div>
<script src="pin.js"></script>
</body>
</html>
源代码，下午开始动工，制作自己喜欢的拼图，哈哈，在此吧图片附上
