答案：使用HTML5 Canvas和鼠标事件实现拼图游戏，通过drawImage切割图片，结合mousedown、mousemove、mouseup模拟拖拽，打乱并重绘拼图块，设置吸附对齐与胜利判断逻辑完成交互。
用HTML5制作拼图游戏，核心是利用Canvas绘图和拖放事件（Drag and Drop）的结合。整个过程不依赖外部库，纯前端实现，适合学习HTML5交互逻辑。
1. 页面结构与图片切分
使用canvas元素作为拼图绘制区域，并准备一张背景图用于切割成小块：
@@##@@
将图片分为3×3的格子，每块大小为133×133像素（以400×400图为例）。通过context.drawImage()把原图切割并绘制到不同位置。
2. 图片分割与随机打乱
JavaScript中先加载图片，再将其分割成9个片段，并打乱顺序模拟“洗牌”：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById("puzzle");
const ctx = canvas.getContext("2d");
const img = document.getElementById("sourceImage");
let pieces = [];
const rows = 3, cols = 3;
const pieceWidth = canvas.width / cols;
const pieceHeight = canvas.height / rows;
// 切分图像并生成碎片数组
function initPuzzle() {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
pieces.push({
x: col pieceWidth,
y: row pieceHeight,
correctX: col pieceWidth,
correctY: row pieceHeight
});
}
}
// 随机打乱碎片位置
pieces.sort(() => Math.random() - 0.5);
drawPuzzle();
}
3. 拖放事件实现拼图移动
为每个拼图块启用拖拽功能。HTML5原生支持draggable属性，但canvas绘制的内容默认不可拖。解决方案：在canvas上监听鼠标事件模拟拖拽。
关键步骤：
- 监听mousedown判断是否点击在某个拼图块上
- 监听mousemove实现拖动效果
- 监听mouseup完成放置并检查是否归位
let draggingPiece = null; let offsetX, offsetY;canvas.addEventListener("mousedown", function(e) { const rect = canvas.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top;
// 查找被点击的拼图块 for (let i = pieces.length - 1; i >= 0; i--) { const p = pieces[i]; if (mouseX >= p.x && mouseX <= p.x + pieceWidth && mouseY >= p.y && mouseY <= p.y + pieceHeight) { draggingPiece = p; offsetX = mouseX - p.x; offsetY = mouseY - p.y; break; } }});
canvas.addEventListener("mousemove", function(e) { if (!draggingPiece) return; const rect = canvas.getBoundingClientRect(); draggingPiece.x = e.clientX - rect.left - offsetX; draggingPiece.y = e.clientY - rect.top - offsetY; drawPuzzle(); // 实时重绘 });
canvas.addEventListener("mouseup", function() { if (!draggingPiece) return;
// 吸附对齐：判断是否靠近正确位置 const tolerance = 20; if (Math.abs(draggingPiece.x - draggingPiece.correctX) < tolerance && Math.abs(draggingPiece.y - draggingPiece.correctY) < tolerance) { draggingPiece.x = draggingPiece.correctX; draggingPiece.y = draggingPiece.correctY; } draggingPiece = null; drawPuzzle(); checkWin(); // 检查是否完成});
4. 绘制与胜利判断
每次操作后调用drawPuzzle()重绘所有拼图块：
function drawPuzzle() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let piece of pieces) { ctx.drawImage( img, piece.correctX, piece.correctY, pieceWidth, pieceHeight, piece.x, piece.y, pieceWidth, pieceHeight ); // 可选：加边框便于识别 ctx.strokeStyle = "#fff"; ctx.strokeRect(piece.x, piece.y, pieceWidth, pieceHeight); } }function checkWin() { let win = true; for (let piece of pieces) { if (piece.x !== piece.correctX || piece.y !== piece.correctY) { win = false; break; } } if (win) { setTimeout(() => alert("拼图完成！"), 500); } }
图片加载完成后启动游戏：
img.onload = function() { initPuzzle(); };基本上就这些。通过canvas绘图、鼠标事件追踪和位置比对，就能实现一个可玩的拼图游戏。关键是理解如何把图像分块、拖动重绘以及判断对齐逻辑。不复杂但容易忽略细节，比如坐标转换和吸附容差。整体代码控制在200行内，适合初学者掌握HTML5交互应用。
