当前位置：首页 > JavaScript

js 实现拼图

2026-01-31 17:52:19JavaScript

实现拼图游戏的基本思路

使用JavaScript实现拼图游戏需要处理图片分割、拖拽交互、拼图验证等核心功能。以下是一个基于HTML5 Canvas和原生JavaScript的实现方案。

初始化游戏画布和图片

创建一个Canvas元素作为游戏画布，加载目标图片并分割为若干小块：

const canvas = document.getElementById('puzzle-canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = 'puzzle-image.jpg';

// 图片加载完成后初始化游戏
image.onload = function() {
  const pieceWidth = image.width / 3;  // 假设3x3拼图
  const pieceHeight = image.height / 3;

  // 创建拼图块数组
  const pieces = [];
  for (let y = 0; y < 3; y++) {
    for (let x = 0; x < 3; x++) {
      pieces.push({
        x: x,
        y: y,
        posX: Math.random() * (canvas.width - pieceWidth),
        posY: Math.random() * (canvas.height - pieceHeight)
      });
    }
  }

  // 打乱拼图块顺序
  shufflePieces(pieces);
  drawPuzzle(pieces);
};

实现拼图块拖拽功能

添加鼠标事件监听器处理拼图块的拖拽：

let selectedPiece = null;
let offsetX, offsetY;

canvas.addEventListener('mousedown', function(e) {
  const mouseX = e.clientX - canvas.offsetLeft;
  const mouseY = e.clientY - canvas.offsetTop;

  // 检查点击了哪个拼图块
  for (let i = 0; i < pieces.length; i++) {
    const piece = pieces[i];
    if (mouseX > piece.posX && mouseX < piece.posX + pieceWidth &&
        mouseY > piece.posY && mouseY < piece.posY + pieceHeight) {
      selectedPiece = piece;
      offsetX = mouseX - piece.posX;
      offsetY = mouseY - piece.posY;
      break;
    }
  }
});

canvas.addEventListener('mousemove', function(e) {
  if (selectedPiece) {
    selectedPiece.posX = e.clientX - canvas.offsetLeft - offsetX;
    selectedPiece.posY = e.clientY - canvas.offsetTop - offsetY;
    drawPuzzle(pieces);
  }
});

canvas.addEventListener('mouseup', function() {
  selectedPiece = null;
  checkCompletion(pieces);
});

绘制拼图块和游戏状态

实现绘制函数显示拼图块：

function drawPuzzle(pieces) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  pieces.forEach(piece => {
    ctx.drawImage(
      image,
      piece.x * pieceWidth, piece.y * pieceHeight, pieceWidth, pieceHeight,
      piece.posX, piece.posY, pieceWidth, pieceHeight
    );

    // 可选：绘制拼图块边框
    ctx.strokeStyle = '#000';
    ctx.strokeRect(piece.posX, piece.posY, pieceWidth, pieceHeight);
  });
}

验证拼图完成状态

添加完成验证逻辑：

function checkCompletion(pieces) {
  const tolerance = 10; // 位置容差
  let completed = true;

  pieces.forEach(piece => {
    const targetX = piece.x * pieceWidth;
    const targetY = piece.y * pieceHeight;

    if (Math.abs(piece.posX - targetX) > tolerance ||
        Math.abs(piece.posY - targetY) > tolerance) {
      completed = false;
    }
  });

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

扩展功能建议

增加游戏难度调整功能，通过修改行列数改变拼图复杂度：

function setDifficulty(rows, cols) {
  pieceWidth = image.width / cols;
  pieceHeight = image.height / rows;
  // 重新初始化拼图块
}

添加计时器和步数统计：

let startTime = Date.now();
let moveCount = 0;

// 在每次移动时增加计数器
function updateStats() {
  const elapsed = Math.floor((Date.now() - startTime) / 1000);
  document.getElementById('timer').textContent = `时间: ${elapsed}秒`;
  document.getElementById('moves').textContent = `步数: ${moveCount}`;
}