拼图游戏 玩法介绍及其代码实现（有意思的JS 一）

我是你们的索儿呀，很幸运我的文章能与你相见
愿萌新能直观的感受到Javascript的趣味性，愿有一定基础者有所收获，愿大佬不吝赐教

拼图游戏是一张图片分为若干块，打乱次序，将其中一块变为空白块，其只能与相邻块互换，发挥你的聪明才智来将其复原

而我本篇文章的目的是，介绍拼图游戏的玩法、技巧，使用JavaScript语言实现拼图游戏

就算是萌新，也是可以阅读前半篇文章的，若能勾起你的兴趣将整篇文章看完那就更棒了

效果展览

• 原图、2 × 2、3 × 3、6 × 6
  、、、
• 甚至还可以4 × 3、3 × 6
  、
• 图片也是可以更换的，其原图、4 × 4
  、

思路及代码实现

若你对于JavaScript才初窥门径，我建议你使用电脑下载代码（文末提供的核心代码），然后配合本篇文章食用更佳

我先以 3 × 3 的九宫格来讲解拼图游戏的思路，实际上我提供的代码是很灵活的，可以更换图片和改变分割方式

补充一嘴：本人没有对打乱拼图的算法做逻辑处理，显示出来的拼图不一定可以复原哦~~

html代码只需要一行即可：

<div id="game"></div>

其余内容皆由JavaScript完成

一：游戏整体配置

此时，摆在我们眼前的有两种做法：

1. div中放九个img作为拼图块（这个做法太死板了，若我要改变图片、分割方式，改动起来会非常麻烦琐碎）
2. div只需要一个背景图片，里面生成九个div作为拼图块，即将其分割为3 × 3 的九宫格（将图片看作spirit图，然后配合background-position属性即可做到）

• 根据图片的分辨率（ 900 × 900 ），确定<div id="game"></div>的宽高
• 拼图游戏（ 3 × 3 ），确定每一行、每一列有多少个拼图块
• 图片路径，相对的是页面路径

以上三个方面的配置是最基本的，可以通过更改以上配置来更改拼图游戏的图片或者分割方式

/**
 * 游戏配置
 */
var config = {
   
    dom: document.getElementById("game"),  //游戏的dom对象
    width: 900,
    height: 900,
    rows: 3,  //行数
    cols: 3,  //列数
    url: "img/Ahri.png",  //图片路径
};

• 每一块拼图块的宽高取决于<div id="game"></div>的宽高和行列数
• 拼图块的数量取决于div的行列数

//每一个拼图块的宽高
config.blockWidth = config.width / config.cols;
config.blockHeight = config.height / config.rows;

//拼图块的数量
config.blockNumber = config.rows * config.cols;

二：初始化游戏

1. 初始化游戏面板

• config.dom获取的是<div id="game"></div>的dom对象
• 然后使用这个dom对象设置其css属性（宽高、边框）
• 为什么要设置为相对定位呢？因为拼图游戏中的拼图是可以移动的，它们的位置需要使用绝对定位

/**
 * 初始化游戏容器
 */
function initGameDom(){
   
    config.dom.style.width = config.width + "px";
    config.dom.style.height = config.height + "px";
    config.dom.style.border = "2px solid #ccc";
    config.dom.style.position = "relative";
}

2. 初始化拼图块

一个拼图块就是一个div，

需要在<div id="game"></div>中创建九个div（都设置为绝对定位），

此时需要一个数组，数组的每一项是一个对象，存放每一个div（拼图块）的信息