1. 游戏初始化模块
2. 图像处理模块
3. 游戏逻辑控制模块
4. 用户交互模块
5. 状态管理模块
6. 小程序适配模块（可选）

// 游戏状态对象const gameState = {
  difficulty: 3, // 难度级别 3x3, 4x4, 5x5
  imageSrc: '', // 拼图源图片
  pieces: [], // 拼图块数组
  emptyPosition: { row: 0, col: 0 }, // 空白块位置
  moves: 0, // 移动次数
  timer: 0, // 计时器
  isCompleted: false // 是否完成};

class PuzzleGame {
  constructor(canvasId, imageSrc, gridSize) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.gridSize = gridSize;
    this.pieceSize = this.canvas.width / gridSize;
    this.pieces = [];
    this.loadImage(imageSrc);
  }

  // 加载并分割图片
  loadImage(imageSrc) {
    const img = new Image();
    img.onload = () => {
      this.image = img;
      this.splitImage();
      this.shufflePieces();
      this.draw();
    };
    img.src = imageSrc;
  }

  // 将图片分割为拼图块
  splitImage() {
    this.pieces = [];
    for (let row = 0; row < this.gridSize; row++) {
      for (let col = 0; col < this.gridSize; col++) {
        // 最后一块为空
        if (row === this.gridSize - 1 && col === this.gridSize - 1) {
          this.pieces.push({ row, col, isEmpty: true });
        } else {
          this.pieces.push({
            row, 
            col,
            isEmpty: false,
            correctRow: row,
            correctCol: col          });
        }
      }
    }
  }}

// 洗牌算法 - 确保拼图可解shufflePieces() {
  // Fisher-Yates洗牌算法
  for (let i = this.pieces.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [this.pieces[i], this.pieces[j]] = [this.pieces[j], this.pieces[i]];
  }
  
  // 更新拼图块位置
  this.pieces.forEach((piece, index) => {
    piece.row = Math.floor(index / this.gridSize);
    piece.col = index % this.gridSize;
  });
  
  // 确保拼图有解（基于逆序数校验）
  this.ensureSolvability();}// 处理用户点击handleClick(x, y) {
  const col = Math.floor(x / this.pieceSize);
  const row = Math.floor(y / this.pieceSize);
  
  const clickedPiece = this.pieces.find(p => 
    p.row === row && p.col === col && !p.isEmpty  );
  
  if (!clickedPiece) return;
  
  // 检查相邻空白位置
  const emptyNeighbor = this.getEmptyNeighbor(clickedPiece);
  if (emptyNeighbor) {
    this.swapPieces(clickedPiece, emptyNeighbor);
    this.moves++;
    this.checkCompletion();
    this.draw();
  }}

draw() {
  // 清空画布
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  
  // 绘制网格背景
  this.drawGrid();
  
  // 绘制拼图块
  this.pieces.forEach(piece => {
    if (!piece.isEmpty) {
      this.drawPiece(piece);
    }
  });
  
  // 绘制拼图块边框
  this.pieces.forEach(piece => {
    if (!piece.isEmpty) {
      this.drawPieceBorder(piece);
    }
  });}

// 小程序页面逻辑Page({
  data: {
    gridSize: 3,
    pieces: [],
    moves: 0,
    time: 0
  },
  
  onLoad() {
    // 初始化游戏
    this.initGame();
    
    // 小程序中需使用wx.createCanvasContext
    this.ctx = wx.createCanvasContext('puzzleCanvas');
    
    // 加载图片
    this.loadImage();
  },
  
  // 触摸事件处理
  handleTap(e) {
    const { x, y } = e.touches[0];
    const col = Math.floor(x / this.pieceSize);
    const row = Math.floor(y / this.pieceSize);
    
    // 移动拼图块逻辑
    this.movePiece(row, col);
    
    // 更新界面
    this.setData({
      moves: this.data.moves + 1,
      pieces: this.data.pieces    });
    
    // 重绘Canvas
    this.drawPieces();
  }});

// 添加游戏反馈效果addVisualFeedback(piece) {
  // 高亮显示可移动的拼图块
  const originalStyle = this.ctx.fillStyle;
  this.ctx.fillStyle = 'rgba(255, 255, 0, 0.3)';
  this.ctx.fillRect(
    piece.col * this.pieceSize,
    piece.row * this.pieceSize,
    this.pieceSize,
    this.pieceSize  );
  this.ctx.fillStyle = originalStyle;}// 添加完成动画showCompletionAnimation() {
  const animationFrames = 20;
  let currentFrame = 0;
  
  const animate = () => {
    if (currentFrame >= animationFrames) return;
    
    const progress = currentFrame / animationFrames;
    const scale = 1 + 0.1 * Math.sin(progress * Math.PI);
    
    this.ctx.save();
    this.ctx.translate(this.canvas.width/2, this.canvas.height/2);
    this.ctx.scale(scale, scale);
    this.ctx.translate(-this.canvas.width/2, -this.canvas.height/2);
    this.draw();
    this.ctx.restore();
    
    currentFrame++;
    requestAnimationFrame(animate);
  };
  
  animate();}