HTML5拖放拼图游戏制作教程

本文手把手教你用纯HTML5技术（Canvas绘图与原生鼠标事件）从零实现一个可交互的3×3拼图游戏——无需任何外部库，通过drawImage精准切分图片、随机打乱碎片、模拟拖拽逻辑、实时坐标追踪与吸附对齐，并内置胜利判定，代码简洁易懂、细节扎实，是掌握HTML5前端交互原理与实战能力的绝佳入门项目。

用HTML5制作拼图游戏，核心是利用Canvas绘图和拖放事件（Drag and Drop）的结合。整个过程不依赖外部库，纯前端实现，适合学习HTML5交互逻辑。

1. 页面结构与图片切分

使用canvas元素作为拼图绘制区域，并准备一张背景图用于切割成小块：

<canvas id="puzzle" width="400" height="400"></canvas>
<img id="sourceImage" src="puzzle.jpg" style="display:none;">

将图片分为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");
<p>let pieces = [];
const rows = 3, cols = 3;
const pieceWidth = canvas.width / cols;
const pieceHeight = canvas.height / rows;</p><p>// 切分图像并生成碎片数组
function initPuzzle() {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
pieces.push({
x: col <em> pieceWidth,
y: row </em> pieceHeight,
correctX: col <em> pieceWidth,
correctY: row </em> pieceHeight
});
}
}
// 随机打乱碎片位置
pieces.sort(() => Math.random() - 0.5);
drawPuzzle();
}</p>

3. 拖放事件实现拼图移动

为每个拼图块启用拖拽功能。HTML5原生支持draggable属性，但canvas绘制的内容默认不可拖。解决方案：在canvas上监听鼠标事件模拟拖拽。

关键步骤：

• 监听mousedown判断是否点击在某个拼图块上
• 监听mousemove实现拖动效果
• 监听mouseup完成放置并检查是否归位

let draggingPiece = null;
let offsetX, offsetY;
<p>canvas.addEventListener("mousedown", function(e) {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;</p><pre class="brush:php;toolbar:false;">// 查找被点击的拼图块
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);
    }
}
<p>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);
}
}</p>

图片加载完成后启动游戏：

img.onload = function() {
    initPuzzle();
};

基本上就这些。通过canvas绘图、鼠标事件追踪和位置比对，就能实现一个可玩的拼图游戏。关键是理解如何把图像分块、拖动重绘以及判断对齐逻辑。不复杂但容易忽略细节，比如坐标转换和吸附容差。整体代码控制在200行内，适合初学者掌握HTML5交互应用。

以上就是《HTML5拖放拼图游戏制作教程》的详细内容，更多关于HTML5代码的资料请关注golang学习网公众号！