h5实现拼图

实现H5拼图游戏的基本步骤

准备拼图素材 将一张完整图片切割成若干小块，通常使用正方形网格划分（如3x3或4x4）。可以使用图像编辑软件手动切割，或通过Canvas API编程实现自动分割。

HTML结构搭建

<div class="puzzle-container">
  <div class="puzzle-board"></div>
  <div class="puzzle-pieces"></div>
</div>

CSS样式设计

.puzzle-container {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.puzzle-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #eee;
  margin-bottom: 20px;
}

.puzzle-pieces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.puzzle-piece {
  width: 100px;
  height: 100px;
  background-size: 300px 300px;
  cursor: move;
  border: 1px solid #ccc;
}

JavaScript核心逻辑

// 初始化拼图
function initPuzzle() {
  const board = document.querySelector('.puzzle-board');
  const piecesContainer = document.querySelector('.puzzle-pieces');
  const rows = 3, cols = 3;

  // 创建拼图块
  for (let i = 0; i < rows * cols; i++) {
    const piece = document.createElement('div');
    piece.className = 'puzzle-piece';
    piece.dataset.index = i;

    // 设置背景图片位置
    const row = Math.floor(i / cols);
    const col = i % cols;
    piece.style.backgroundPosition = `-${col * 100}px -${row * 100}px`;

    // 添加拖拽事件
    piece.draggable = true;
    piece.addEventListener('dragstart', handleDragStart);

    piecesContainer.appendChild(piece);
  }

  // 创建棋盘格子
  for (let i = 0; i < rows * cols; i++) {
    const slot = document.createElement('div');
    slot.className = 'puzzle-slot';
    slot.dataset.index = i;
    slot.addEventListener('dragover', handleDragOver);
    slot.addEventListener('drop', handleDrop);
    board.appendChild(slot);
  }
}

// 拖拽事件处理函数
function handleDragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.dataset.index);
}

function handleDragOver(e) {
  e.preventDefault();
}

function handleDrop(e) {
  e.preventDefault();
  const pieceIndex = e.dataTransfer.getData('text/plain');
  const piece = document.querySelector(`.puzzle-piece[data-index="${pieceIndex}"]`);
  e.target.appendChild(piece);
}

功能增强建议

添加难度选择 通过修改rows和cols变量实现不同网格尺寸，4x4网格会比3x3更具挑战性。同时可以增加计时功能记录完成时间。

实现自动打乱 在初始化时随机排列拼图块位置：

function shufflePieces() {
  const pieces = Array.from(document.querySelectorAll('.puzzle-piece'));
  pieces.forEach(piece => {
    const randomPos = Math.floor(Math.random() * pieces.length);
    piecesContainer.children[randomPos].appendChild(piece);
  });
}

添加完成检测 定期检查所有拼图块是否位于正确位置：

function checkCompletion() {
  const slots = document.querySelectorAll('.puzzle-slot');
  let completed = true;

  slots.forEach(slot => {
    const piece = slot.firstElementChild;
    if (!piece || piece.dataset.index !== slot.dataset.index) {
      completed = false;
    }
  });

  if (completed) {
    alert('拼图完成！');
  }
}

移动端适配方案

触摸事件支持 为移动设备添加touch事件处理：

piece.addEventListener('touchstart', handleTouchStart);
slot.addEventListener('touchmove', handleTouchMove);
slot.addEventListener('touchend', handleTouchEnd);

function handleTouchStart(e) {
  const piece = e.target;
  piece.dataset.touchX = e.touches[0].clientX;
  piece.dataset.touchY = e.touches[0].clientY;
}

function handleTouchMove(e) {
  e.preventDefault();
  const piece = document.elementFromPoint(
    e.touches[0].clientX,
    e.touches[0].clientY
  );
  // 实现移动逻辑
}

响应式布局 通过CSS媒体查询调整拼图尺寸：

@media (max-width: 600px) {
  .puzzle-container {
    width: 300px;
  }
  .puzzle-piece {
    width: 75px;
    height: 75px;
  }
}