原来利用纯CSS也能实现拼图游戏！

利用纯CSS实现拼图游戏

拼图游戏是一种十分受欢迎的休闲游戏，在游戏中我们需要将一张图片分成若干个小块，然后将这些小块按照顺序拼接起来，使得最终呈现的图片和原图一致。那么，你是否曾经想过利用CSS来实现拼图游戏呢？本文就将介绍如何利用纯CSS来实现一个简单的拼图游戏。

准备工作

在开始编写代码前，我们需要准备一张图片，该图片将会作为拼图游戏的背景图。在本文中，我们将会使用一张长方形的照片作为示例，它的路径为：images/puzzle.jpg。然后，我们需要将这张图片分成若干个小块，这些小块将会是我们最后拼接成完整图片的基本组成部分。

为了方便拆分图片，我们可以利用CSS3中的transform属性。该属性可以对元素进行旋转、缩放和位移等操作，因此对我们切割图片非常方便。我们只需要创建一个大小等于原图的容器，然后将该容器分割成若干个子容器（注意，这些子容器的大小必须相等），然后再将原始的图片作为背景提供给每个子容器即可。

分割图片的代码如下：

.puzzle-wrapper {
  width: 480px;
  height: 320px;
  position: relative;
  margin: 0 auto;
  border: 1px solid #ddd;
}
.puzzle-item {
  position: absolute;
  border: 1px solid #fff;
  box-shadow: 0px 0px 10px #ddd;
  background-repeat: no-repeat;
}
.puzzle-item:nth-child(1) {
  transform: translate(0, 0);
  width: 160px; height: 160px;
  background-position: 0 0;
}
.puzzle-item:nth-child(2) {
  transform: translate(160px, 0);
  width: 160px; height: 160px;
  background-position: -160px 0;
}
.puzzle-item:nth-child(3) {
  transform: translate(320px, 0);
  width: 160px; height: 160px;
  background-position: -320px 0;
}
.puzzle-item:nth-child(4) {
  transform: translate(0, 160px);
  width: 160px; height: 160px;
  background-position: 0 -160px;
}
.puzzle-item:nth-child(5) {
  transform: translate(160px, 160px);
  width: 160px; height: 160px;
  background-position: -160px -160px;
}
.puzzle-item:nth-child(6) {
  transform: translate(320px, 160px);
  width: 160px; height: 160px;
  background-position: -320px -160px;
}
.puzzle-item:nth-child(7) {
  transform: translate(0, 320px);
  width: 160px; height: 160px;
  background-position: 0 -320px;
}
.puzzle-item:nth-child(8) {
  transform: translate(160px, 320px);
  width: 160px; height: 160px;
  background-position: -160px -320px;
}
.puzzle-item:nth-child(9) {
  transform: translate(320px, 320px);
  width: 160px; height: 160px;
  background-position: -320px -320px;
}

实现拼图游戏交互

通过上述代码，我们已经成功地将图片分割成了若干个小块，但现在这些小块的位置还是固定的，游戏并没有任何交互性。因此，我们需要为这些小块添加拖拽交互。

添加拖拽交互的思路很简单，我们只需要利用CSS的cursor、z-index、transition和transform等属性，来实现小块的拖拽效果和位置变换即可。

具体实现原理如下：

利用CSS的cursor属性，设置鼠标悬浮小块上时的光标形状。

利用CSS的z-index属性，设置小块的层级关系，确保当前拖动的小块始终在最上层。

利用CSS的transition属性，设置小块的过渡效果，使其拖拽时能够有平滑的动画。并且通过增加linear属性，使得动画的速度更加平滑。

拖拽实现的代码如下：

.puzzle-item {
    /* ... */
    cursor: pointer;
    transition: all 0.15s linear;
}
.puzzle-item.active {
    transform: scale(1.1);
    z-index: 99;
}

效果如下：

完成游戏拼图

最后，我们需要添加游戏胜利的判断，当玩家完成所有的小块的拼接时，我们提示“恭喜你，拼图成功！”。这个功能也很简单，我们只需要监听每个小块位置的变化，当所有的小块位置全部拼合后，触发相应的提示即可。

完成游戏拼图的代码如下：

let success = false;
const items = document.querySelectorAll('.puzzle-item');
for (let i=0; i
  const xpos = parseInt(items[i].style.transform.split(',')[0].split('(')[1]);
  const ypos = parseInt(items[i].style.transform.split(',')[1].split(')')[0]);
  if (xpos === 0 && ypos === 0) {
    if (i===0 || i===4 || i===8) success = true;
    else success = false;
  } else if (xpos === 0 && ypos === -160) {
    if (i===1 || i===3 || i===5 || i===7) success = true;
    else success = false;
  } else if (xpos === 0 && ypos === -320) {
    if (i===2 || i===6) success = true;
    else success = false;
  } else if (xpos === -160 && ypos === 0) {
    if (i===1 || i===5 || i===7) success = true;
    else success = false;
  } else if (xpos === -160 && ypos === -160) {
    if (i===0 || i===2 || i===4 || i===6 || i===8) success = true;
    else success = false;
  } else if (xpos === -160 && ypos === -320) {
    if (i===3) success = true;
    else success = false;
  } else if (xpos === -320 && ypos === 0) {
    if (i===2 || i===8) success = true;
    else success = false;
  } else if (xpos === -320 && ypos === -160) {
    if (i===1 || i===3 || i===5 || i===7) success = true;
    else success = false;
  } else if (xpos === -320 && ypos === -320) {
    if (i===0 || i===4 || i===6) success = true;
    else success = false;
  }
}
if (success) {
  alert('恭喜你，拼图成功！');
}

总结

通过上述代码，我们实现了一个简单的拼图游戏。需要注意的是，本文仅提供了一个简单的示例，拼图小块的数量和拼图难度也可以根据需要进行调整。同时，我们强烈建议读者自己动手尝试编写代码，加深对CSS的理解和应用。