当前位置：首页 > JavaScript

js 实现拼图

2026-04-05 10:06:59JavaScript

实现拼图游戏的步骤

使用JavaScript实现拼图游戏可以通过HTML5的Canvas或DOM操作完成。以下是基于DOM的实现方法。

初始化拼图棋盘

创建HTML结构，包含一个容器和拼图块。拼图块使用绝对定位，通过CSS控制样式。

<div id="puzzle-container">
  <div class="tile" data-index="1">1</div>
  <div class="tile" data-index="2">2</div>
  <!-- 更多拼图块 -->
</div>

#puzzle-container {
  position: relative;
  width: 300px;
  height: 300px;
}
.tile {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

随机排列拼图块

使用Fisher-Yates洗牌算法随机排列拼图块的位置。

function shuffleTiles() {
  const tiles = Array.from(document.querySelectorAll('.tile'));
  const positions = tiles.map((_, index) => index);

  for (let i = positions.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [positions[i], positions[j]] = [positions[j], positions[i]];
  }

  tiles.forEach((tile, index) => {
    const row = Math.floor(positions[index] / 3);
    const col = positions[index] % 3;
    tile.style.top = `${row * 100}px`;
    tile.style.left = `${col * 100}px`;
  });
}

处理拼图块点击事件

检查点击的拼图块是否与空白块相邻，如果是则交换位置。

function handleTileClick(event) {
  const tile = event.target;
  const tileIndex = parseInt(tile.dataset.index);
  const tileRect = tile.getBoundingClientRect();
  const emptyTile = document.querySelector('.empty');

  if (isAdjacent(tile, emptyTile)) {
    swapTiles(tile, emptyTile);
    checkWin();
  }
}

function isAdjacent(tile1, tile2) {
  const rect1 = tile1.getBoundingClientRect();
  const rect2 = tile2.getBoundingClientRect();
  return (
    (Math.abs(rect1.left - rect2.left) === 100 && rect1.top === rect2.top) ||
    (Math.abs(rect1.top - rect2.top) === 100 && rect1.left === rect2.left)
  );
}

交换拼图块位置

更新拼图块的CSS位置属性以实现交换效果。

function swapTiles(tile1, tile2) {
  const tempTop = tile1.style.top;
  const tempLeft = tile1.style.left;

  tile1.style.top = tile2.style.top;
  tile1.style.left = tile2.style.left;

  tile2.style.top = tempTop;
  tile2.style.left = tempLeft;
}

检查游戏是否胜利

比较当前拼图块位置与胜利状态是否一致。

function checkWin() {
  const tiles = Array.from(document.querySelectorAll('.tile:not(.empty)'));
  const isWin = tiles.every(tile => {
    const currentPos = parseInt(tile.style.top) / 100 * 3 + parseInt(tile.style.left) / 100;
    return currentPos === parseInt(tile.dataset.index) - 1;
  });

  if (isWin) {
    alert('恭喜你赢了！');
  }
}

完整初始化函数

将所有功能整合到初始化函数中。

function initPuzzle() {
  shuffleTiles();
  document.querySelectorAll('.tile').forEach(tile => {
    tile.addEventListener('click', handleTileClick);
  });
}

window.onload = initPuzzle;

进阶功能

添加空白块标记和动画效果提升用户体验。

js 实现拼图

// 在shuffleTiles函数中标记空白块
const emptyIndex = positions.indexOf(8); // 假设第9块是空白
tiles[emptyIndex].classList.add('empty');
tiles[emptyIndex].style.visibility = 'hidden';

// 添加CSS过渡效果
.tile {
  transition: all 0.3s ease;
}

以上代码实现了一个基本的3x3拼图游戏，可根据需要扩展为不同尺寸或添加更多功能。