js拼图拖拽游戏

<div id="puzzle-container">
  <!-- 拼图块将在这里生成 -->
</div>

#puzzle-container {
  position: relative;
  width: 300px;
  height: 300px;
}
.puzzle-piece {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

const container = document.getElementById('puzzle-container');
let selectedPiece = null;

// 初始化拼图块
for (let i = 0; i < 9; i++) {
  const piece = document.createElement('div');
  piece.className = 'puzzle-piece';
  piece.style.left = `${(i % 3) * 100}px`;
  piece.style.top = `${Math.floor(i / 3) * 100}px`;
  piece.setAttribute('data-index', i);
  container.appendChild(piece);
}

// 添加拖拽事件监听器
container.addEventListener('mousedown', startDrag);
container.addEventListener('mousemove', drag);
container.addEventListener('mouseup', endDrag);

function startDrag(event) {
  selectedPiece = event.target;
}

function drag(event) {
  if (selectedPiece) {
    selectedPiece.style.left = `${event.clientX - 50}px`;
    selectedPiece.style.top = `${event.clientY - 50}px`;
  }
}

function endDrag() {
  selectedPiece = null;
}