【Unity3D开发小游戏】《数字华容道》Unity开发教程

一、前言

因为最强大脑让【数字华容道】这款老游戏又火了一把,那就让我们来看看这个游戏是怎么实现的吧,有什么样的算法呢。

二、GitHub

GitHub地址:https://github.com/764424567/Game_NumberHuarongRoad
*注意:可以直接在GitHub仓库克隆或者下载源代码

三、正文

【数字华容道】

一:核心


寒假的时候看最强大脑。
有些项目看的我也想试试,就在豌豆荚上搜索数字华容道,找到一个下载安装后,发现面丑就算了,自适应没有做好,玩不了就删掉了。
想了想这个游戏的逻辑,好像很简单,那自己做一个吧。
如此我挖了我考研期间的第一个坑。


核心玩法的逻辑图


这里写图片描述

我猜看到这图,各位看官可能想退出页面了。。。
我也是第一次画这东西,非常简陋,看不下去的直接跳过看下面的吧。


刚开始琢磨做点小游戏的时候,有些[数],先放在前面跟大家分享一下:
在不知道能不能做好之前,暂时不管美术,先把一个原型做出来,后面慢慢画美术。
在没有雏形之前,不要着急想着如何丰富这个游戏,先做最基本款,后面有精力了再优化更新。
心里有了这两点[数],能更不容易半途而废。


二、基本画面

  1. 新建项目
  2. 去ps里弄数字1-15的图片和一张空白的。要是有其他的素材也行。这个随便一个画图软件就可以弄,分享一组博主自己做的图片,有点丑。。。凑合着用


    1.jpg
    2.jpg
    3.jpg
    4.jpg

    5.jpg
    6.jpg
    7.jpg
    8.jpg

    9.jpg
    10.jpg
    11.jpg
    12.jpg

    13.jpg
    14.jpg
    15.jpg
    0.jpg
  3. 在canvas下新建创建一个Panel,在Panel下新建一个空的物体,命名为table。然后给他添加一个Grid Layout Group组件(能让子物体成网格式分布),设置一下参数,然后在table下添加image,ctrl+d快速复制一共16个。然后看着调整一下Grid Layout Group 的参数。


    这里写图片描述
  4. 在rect transform 组件中设置自适应,点一下那个图标,按住alt键,选择中间那个。用unity做自适应挺简单的,后面再有自适应就不提了。


    这里写图片描述
  5. 把table下的image改名叫piece1-piece16了,把图片资源一个个对应拖到image上的source image上


    这里写图片描述
  6. 建了一个button来表示开始。


    这里写图片描述

三、GameManager

写代码了
1.创建一个scripts文件夹,在里面创建一个c#脚本文件叫GameManager,打开
2.先写个单例吧,整个项目只能有这一个脚本在运作。记得之后要挂载在一个gameobject上。我挂到table上了。

#region 单例 
public static GameManager Instance 
{ 
    get 
    { 
        return instance; 
    }    
    private static GameManager instance = null; 
    void Awake() 
    { 
        if (instance == null) 
        { 
            instance = this; 
        } 
        else if (instance != this) 
        { 
            DestroyImmediate(this);//立即销毁 
        } 
    }
} 
#endregion

3.打算是有两个数组,一个数组是1-16排好序的,另一个是1-16乱序的数组,只要把乱序数组调整回有序的数组,我们就赢了。也就是说那个有序数组是为了方便比较才创建的。

private int[] Array; 
private int[] Order; 
void Start () 
{
     Array = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 };
     Order = Array; 
}

4.接下来是要打乱数组里的数字顺序,我采取的策略是随机两两互换。我想了一会,也就想到这个比较好,还挺有意思。不知道大家有没有更好的方法。

/// <summary> 
/// 数组里的数字随机两两交换 
/// </summary> 
/// <param name="a">数组</param> 
/// <param name="temptimes">交换次数</param> 
void A_random(int[] a,int temptimes) 
{
    for(int i = 0; i < temptimes; i++)
    { 
        int r = Random.Range(0, a.Length); 
        int temp = a[i];  
        a[i] = a[r];  
    }
    foreach (int num in a)
    { 
        Debug.Log(num);  
    } 
}

5.上面那个函数只是动数据,没有动画面。接下来就是写函数改变图块位置,使画面与数据一致。
这里面有一个对应关系可以利用,在unity面板里,table子物体的索引值=乱序数组array的索引值。

/// <summary> 
/// 图块按照数组重新排序 
/// </summary> 
/// <param name="gameObject">table</param> 
/// <param name="a">乱序数组</param> 
void P_sequence(GameObject gameObject, int[] a) 
{ 
    foreach(int num in a) 
    { 
        string name = "piece" + num; 
        gameObject.transform.Find(name).SetSiblingIndex(-1); 
    } 
}

6.那接下来,我们的开始游戏button对应的函数,可以这样写。别忘了在unity界面,把开始游戏button和这个函数绑定上。我们还要获取table这个玩意的gameobject,在unity界面也要记得绑定上,即给代码里的“table”变量赋值。

public GameObject table; 
public void GameStart() 
{ 
    A_random(Array, 16); 
    P_sequence(table, Array); 
}

7.接下来就是交换了,逻辑很简单:点击一个图块,如果图块周围有白板,那被点击的图块和白板交换位置。关键点就是怎么检测图块周围有白板。这是这个游戏核心功能实现的最关键的地方。我本来是想【找被点击的x周围有没有白板】,后来想了想,觉得【找白板周围的数字是不是x】会简单一点。
亲爱的看官可以画图思考一下,然后看一下我的if(条件句)里的条件。(我好懒哦,不想在这详细说明了,因为我还没有吃饭)如果有更好的方法,请赐教,也欢迎讨论。

/// <summary> 
/// 判断【数字16(白板)】上下左右的项的索引值,如果是被点击的x,则交换两个索引值里的数据,然后调用函数刷新面板里图块的顺序 
/// </summary> 
/// <param name="x">点击图块的索引值</param> 
void A_exchange(int x) 
{ 
    int index=table.transform.Find("piece16").GetSiblingIndex()+1; 
    if (((index == x - 1)&&!(index%4==0))|| ((index == x + 1) && !(index % 4 == 1))|| (index + 4 == x)|| (index - 4 == x)) 
    {  
        int temp = Array[x-1];   
        Array[x-1] = Array[index-1];  
        Array[index-1] = temp; 
        P_sequence(table, Array); 
    } 
    if (Array == Order) 
    { 
        //成功  
    }
}

8.下来是给每个图块添加一个button组件,在onclick里绑定如下函数,传递的参数对应为图块本身的数字。这样在乱序的时候,点击一个图块时,我们先获取这个图块对应的数组索引值/table子物体索引值,然后调用并传递给A_exchange函数,让其从索引值判断上下左右的关系,从而判断是否可以交换位置。

/// <summary> 
/// 获取数字num对应Array的索引值和table子物体的索引值 
/// </summary> 
/// <param name="num"></param> 
public void Getsiblingindex(int num) 
{ 
    int s=table.transform.Find("piece" + num).GetSiblingIndex(); 
    A_exchange(s + 1); 
}

四:运行

这里写图片描述
  1. 大概就是这个样子了,很简陋,有非常多可以改进的地方。
  2. 因为要准备考研,所以不一定能改进成什么样,但是要是有时间了一定会再改进的。
  3. 留一些待改进的方向,然后要去觅食了。
  4. 留了个panel没处理,我想让没按”开始游戏“的时候,table是不可见的。
  5. 计时器没做。要是还有时间可以做一个本地的得分排名。
  6. 整个都写在gamemanager脚本里了,代码不够简洁清晰。
  7. 这个数字字体我好喜欢,但整个画面不好看,美术上可以做不少工作,还可以加动画。
  8. 当然是打包成apk了。

五、源码

已经上传到CSDN
https://download.csdn.net/download/q764424567/11229226

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 141,930评论 1 299
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,888评论 1 255
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,606评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,848评论 0 175
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,544评论 1 253
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,671评论 1 173
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,312评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,112评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,899评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,451评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,221评论 2 213
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,541评论 1 225
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,196评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,079评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,448评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,597评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,969评论 0 164
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,451评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,523评论 2 229

推荐阅读更多精彩内容