用App designer制作数字华容道

做完2048后突然想到华容道，但是华容道比较难做，就先做个数字华容道试试。

UI设计

主要控件就是16个展示数字的方块、1个计时用的面板、1个游戏胜利的界面以及1个新游戏按钮。如下图所示。

与2048不同的是，这次的数字方块用的是Button控件，创建该控件代码如下(注意在properties中声明Num类型为matlab.ui.control.Button)：

function createNum(app)for i=1:4for j=1:4app.Num(i,j) = uibutton(app.NumHuaRongUIFigure,'push');app.Num(i,j).ButtonPushedFcn = createCallbackFcn(app, @NumButtonPushed,true);app.Num(i,j).BackgroundColor = [0.91 0.77 0.66];app.Num(i,j).Position = [-47.5+j*100 442.5-i*100 95 95];app.Num(i,j).Text = '';app.Num(i,j).FontName = 'Segoe UI Historic';app.Num(i,j).FontSize = 40;app.Num(i,j).FontColor = [1,1,1];app.Num(i,j).Tag = num2str(sub2ind([4 4],i,j));endendend

创建对应的回调函数：

        function NumButtonPushed(app,event)  end

创建胜利面板函数：

        function createGameOverLabel(app)app.gameOverLabel = uilabel(app.NumHuaRongUIFigure);app.gameOverLabel.BackgroundColor = [0.59,0.66,0.64];app.gameOverLabel.Position = [50,140,400,200];app.gameOverLabel.FontName = 'Ink Free';app.gameOverLabel.FontSize = 70;app.gameOverLabel.FontColor = [1,1,1];app.gameOverLabel.HorizontalAlignment = 'center';app.gameOverLabel.Text = "YOU WIN";app.gameOverLabel.Visible = 'off';end

其余控件建议直接使用用户界面创建。

规则设计

游戏初始矩阵

我们需要一个打乱的矩阵才能开始游戏。要实现这个功能可以使用randperm()函数，其可以生成一组各不相同的整数。

            m = randperm(16,16)-1;m = reshape(m,4,4);app.theMatrix = m;

点击空格旁边的方块可以使方块移动到空格

实现这个规则主要有两点：一是判断点击的方块在不在空格周围，二是交换位置。首先，空白格对应矩阵元素为0，利用find()函数可以快速确定其位置，而在空格周围可移动的最多有4个位置。我们可以将点击的方块位置索引传入，并与空白格索引比较。如果两个位置的行索引相等且列索引相差1，或者列索引相等而行索引相差1，则该方块可以与空白格交换。

        function f = isMovable(app,i,j)[x,y] = find(app.theMatrix == 0);if (i==x)&&(abs(j-y)==1)f = true;elseif  (j==y)&&(abs(i-x)==1)f = true;elsef = false;endend

其次，交换位置就是把矩阵两个位置的值修改一下。

function moveNum(app,i,j)if app.isMovable(i,j)[x,y] = find(app.theMatrix == 0);app.theMatrix(x,y) = app.theMatrix(i,j);app.theMatrix(i,j) = 0;end
end

使方块按顺序排列，并且最后一格是空格即宣布游戏胜利

这个规则的实现只需用isequal()函数判断两个矩阵是否相等。

        function y = isGameWin(app)if isequal(app.theMatrix,app.desMatrix)y = true;elsey = false;endend

计时器

为了评估游戏成绩，我们可以加入一个计时器。

在properties中创建一个timer

 theTimer = timer

创建一个timer的初始化函数

        function timerInit(app)app.theTimer.StartDelay = 1;app.theTimer.Period = 1;app.theTimer.ExecutionMode = 'fixedSpacing';app.theTimer.TimerFcn = @(~,~)timerCallback(app);end

上述代码表明timer会有1s的开始延迟，且其每隔1s会执行回调

别忘了创建timer的回调函数

        function timerCallback(app)end

在回调中修改计时器面板的值实现计时功能

            t = str2double(app.TimerPanel.Value);t = t+1;app.TimerPanel.Value = string(t);

使用start()和stop()分别开始和停止计时器，别忘了在关闭APP前先删除计时器(在UIFigure的回调函数中)

        function NumHuaRongUIFigureCloseRequest(app, event)stop(app.theTimer)delete(app.theTimer)delete(app)            end

完善各回调，一个简单的数字华容道就完成了。

工程文件
用App Designer制作的数字华容道