玩转九宫格拼图小插件：上册

2024-01-06 20:33:03

高阶前端开发的世界里，总有一些鲜为人知的领域，它们往往令开发者望而却步。但对于真正的技术爱好者来说，这些领域正是他们勇于探索和征服的宝藏。九宫格拼图小插件的开发就是这样一个鲜为人知的领域。

在这个上册中，我们将从基础开始，带领您一步步搭建九宫格拼图小插件的骨架。从HTML和CSS的布局，到JavaScript的逻辑实现，我们将为您提供详细的指导和示例代码。

搭建九宫格拼图框架

1. HTML结构

<div class="container">
  <div class="puzzle-board">
    <div class="tile" data-position="1"></div>
    <div class="tile" data-position="2"></div>
    <div class="tile" data-position="3"></div>
    <div class="tile" data-position="4"></div>
    <div class="tile" data-position="5"></div>
    <div class="tile" data-position="6"></div>
    <div class="tile" data-position="7"></div>
    <div class="tile" data-position="8"></div>
    <div class="empty-tile"></div>
  </div>
</div>

2. CSS样式

.container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid black;
}

.puzzle-board {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.tile {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border: 1px solid black;
  margin: 0;
  padding: 0;
}

.empty-tile {
  background-color: #000000;
}

3. JavaScript逻辑

// 获取拼图块元素
const tiles = document.querySelectorAll('.tile');

// 获取空白拼图块元素
const emptyTile = document.querySelector('.empty-tile');

// 遍历所有拼图块元素
for (let i = 0; i < tiles.length; i++) {
  // 为每个拼图块元素添加点击事件监听器
  tiles[i].addEventListener('click', function() {
    // 检查拼图块是否与空白拼图块相邻
    if (isAdjacentToEmptyTile(this)) {
      // 交换拼图块和空白拼图块的位置
      swapTiles(this, emptyTile);
    }
  });
}

// 判断拼图块是否与空白拼图块相邻
function isAdjacentToEmptyTile(tile) {
  // 获取拼图块的位置
  const tilePosition = parseInt(tile.getAttribute('data-position'));

  // 获取空白拼图块的位置
  const emptyTilePosition = parseInt(emptyTile.getAttribute('data-position'));

  // 检查拼图块是否与空白拼图块在同一行或同一列
  return (tilePosition % 3 === emptyTilePosition % 3) || (Math.floor(tilePosition / 3) === Math.floor(emptyTilePosition / 3));
}

// 交换拼图块和空白拼图块的位置
function swapTiles(tile1, tile2) {
  // 获取拼图块的位置
  const tile1Position = parseInt(tile1.getAttribute('data-position'));
  const tile2Position = parseInt(tile2.getAttribute('data-position'));

  // 更新拼图块的位置
  tile1.setAttribute('data-position', tile2Position);
  tile2.setAttribute('data-position', tile1Position);

  // 交换拼图块的样式
  tile1.classList.remove('empty-tile');
  tile2.classList.add('empty-tile');
}