运行效果：

 

制作过程：

 

第一步：

新建项目，添加 UI 中的 canvas 对象 ， 在 canvas 对象下创建一个空游戏对象 GameObject ，更名为 Grid . 为 Grid 添加 Grid layout Group 组件，设置属性如下：

• Cell Size：Vector2类型，默认值为(100,100)，网格中的每个单元格的大小
• Spacing：这里的Spacing不同于水平布局、垂直布局，是Vector2类型，既然是网格布局，当然存在水平方向的间隔和垂直方向的间隔。这里我将其设置为 5 .
• Constraint：枚举类型。其中 Fixed Column Count 约束指定数量的行数

这里我设置约定的行数 Constraint Count 为 3 （因为我这里制作的是 3*3 的拼图）

 

第二步：

在 Grid 下创建九个空游戏对象 GameObject ， 用来存放分割的图片块。为每一个空游戏对象 GameObject 依次添加 Canvas Render , Image , Button 组件。如下图：

做完这些后，在 Game 界面可以看到如下图所示：

 

第三步：

在项目中建立文件夹，取名为 Resources ，在 Resources 文件夹下新建文件夹，取名为 picture ，拖一张图片到文件夹 picture 下。

  

将图片属性设置如下：

  

点击 Sprite Editor 键

在弹出界面中点击 Slice .

设置 Type 为 Grid By Cell Count

在 Column $ Row 一栏设置为 3*3 （即将整张图片分割成 3*3 块）

最后点击 Slice 按钮后 ，点击 Apply 完成设置。完成设置后图片上会多一个播放键，如下图所示：

 

第四步：

新建 C# 文件，更名为 pintu ，代码如下：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using System;

public class pintu : MonoBehaviour
{
    Item[] itemImg;
    Sprite[] UIShowImage;
    int length = 0;
    int sqrt = 0;
    void Start()
    {

        var RSLoadAllImages = Resources.LoadAll("picture");   //从文件夹Texture1中导入图片
        length = transform.childCount;  //length 为小图片块的个数
        sqrt = (int)Mathf.Sqrt(length); // sqrt为行列数

        //childLength-1——其中某一张为空白，即后下角为空白
        UIShowImage = new Sprite[length];

        for (int i = 0; i < length; i++)
        {
            Debug.Log(i);
            UIShowImage[i] = (Sprite)RSLoadAllImages[i + 1];  //将导入图片分块装入Sprite[] UIShowImage数组
        }
        //初始化图片的id，col，row
        InitItemImg(length);
        //打乱图片
        Shuffle(UIShowImage);
        InitShow();
    }

    //数组打乱
    T[] Shuffle<T>(T[] Array)
    {
        for (int i = 0; i < Array.Length; i++)
        { //对于数组中的每一小块图片都让它与数组中随机一块图片互换位置
            T temp = Array[i];
            int randomIndex = UnityEngine.Random.Range(0, Array.Length);
            Array[i] = Array[randomIndex];
            Array[randomIndex] = temp;
        }
        return Array;
    }

    // 初始化图片id,col,row
    void InitItemImg(int count)
    {
        itemImg = new Item[length];
        for (int i = 0; i < count; i++)
        {
            itemImg[i] = new Item();
            itemImg[i]._id = i;
            itemImg[i]._col = i / sqrt;
            itemImg[i]._row = i % sqrt;
        }
    }

    void InitShow()
    {
        //初始化显示图片
        for (int i = 0; i < UIShowImage.Length; ++i)
        {
            var t = transform.GetChild(i);
            t.GetComponent<Image>().sprite = UIShowImage[i];
            //指定Sprite
            itemImg[i]._sprite = t.GetComponent<Image>().sprite;
            //指定Obj
            itemImg[i]._Obj = t.gameObject;
            var item = itemImg[i];
            itemImg[i]._Obj.GetComponent<Button>().onClick.AddListener(delegate () {
                this.OnClickEvent(item);
            });
        }
        itemImg[length - 1]._Obj.GetComponent<Image>().sprite = null;
        itemImg[length - 1]._sprite = null;
    }

    void OnClickEvent(Item item)
    {
        if (canMovie(item))
        {
            var t = NoneImage();
            t._sprite = item._sprite;
            t._Obj.GetComponent<Image>().sprite = item._Obj.GetComponent<Image>().sprite;
            item._sprite = null;
            item._Obj.GetComponent<Image>().sprite = null;
        }
        if (Success())
        {
            Debug.Log("胜利");
        }
    }

    // 判断是否可以移动
    bool canMovie(Item item)
    {
        if (item._sprite == null)
            return false;
        var t = NoneImage();

        if ((t._col == item._col - 1 && t._row == item._row) || (t._col == item._col + 1 && t._row == item._row) || (t._col == item._col && t._row == item._row + 1) || (t._col == item._col && t._row == item._row - 1))
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    //m获取空白图片
    Item NoneImage()
    {
        for (int i = 0; i < length; i++)
        {
            if (itemImg[i]._sprite == null)
            {
                return itemImg[i];
            }
        }
        return null;
    }

    // 判断胜利
    bool Success()
    {
        for (int i = 0; i < length - 1; i++)
        {
            if (itemImg[i]._Obj.GetComponent<Image>().sprite != null)
            {
                if (itemImg[i]._Obj.GetComponent<Image>().sprite.name != "Image_01_" + i.ToString())
                    return false;
            }
        }
        return true;
    }
}

public class Item
{
    public int _col;
    public int _row;
    public int _id;
    public GameObject _Obj;
    public Sprite _sprite;
}

将代码文件 pintu 添加到 Grid .

 

项目完成，单击运行即可开始游戏。

 

PS: 如需参考完整项目，请移步：https://download.csdn.net/download/qq_42185999/11915482  进行下载