Design a simple Game in MATLAB using App Designer

This video explains the steps to create a simple game in MATLAB using the App Designer GUI tool.

[Source Code]

classdef myMATLAB_Game < matlab.apps.AppBase

% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
Button matlab.ui.control.Button
Button_2 matlab.ui.control.Button
Button_3 matlab.ui.control.Button
Button_4 matlab.ui.control.Button
Button_5 matlab.ui.control.Button
Button_6 matlab.ui.control.Button
Button_7 matlab.ui.control.Button
Button_8 matlab.ui.control.Button
Button_9 matlab.ui.control.Button
Label matlab.ui.control.Label
Label_2 matlab.ui.control.Label
StartButton matlab.ui.control.Button
end

% Callbacks that handle component events
methods (Access = private)

% Button pushed function: StartButton
function StartButtonPushed(app, event)
t = timer;
t.Period = 1;
t.ExecutionMode = ‘fixedRate’;
t.TasksToExecute = 60;
t.TimerFcn = @(~,thisEvent) toggleButton(app);
start(t);
end

% Button pushed function: Button, Button_2, Button_3,
% Button_4, Button_5, Button_6, Button_7, Button_8, Button_9
function ButtonPushed(app, event)
app.Label.Text = num2str(str2double(app.Label.Text) + 50);
end
end

% Component initialization
methods (Access = private)

% Create UIFigure and components
function createComponents(app)

% Create UIFigure and hide until all components are created
app.UIFigure = uifigure(‘Visible’, ‘off’);
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = ‘UI Figure’;

% Create Button
app.Button = uibutton(app.UIFigure, ‘push’);
app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button.Icon = ‘Penguins.jpg’;
app.Button.Position = [63 218 61 46];
app.Button.Text = ”;

% Create Button_2
app.Button_2 = uibutton(app.UIFigure, ‘push’);
app.Button_2.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button_2.Icon = ‘Penguins.jpg’;
app.Button_2.Position = [290 218 61 46];
app.Button_2.Text = ”;

% Create Button_3
app.Button_3 = uibutton(app.UIFigure, ‘push’);
app.Button_3.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button_3.Icon = ‘Penguins.jpg’;
app.Button_3.Position = [494 218 61 46];
app.Button_3.Text = ”;

% Create Button_4
app.Button_4 = uibutton(app.UIFigure, ‘push’);
app.Button_4.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button_4.Icon = ‘Penguins.jpg’;
app.Button_4.Position = [63 144 61 46];
app.Button_4.Text = ”;

% Create Button_5
app.Button_5 = uibutton(app.UIFigure, ‘push’);
app.Button_5.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button_5.Icon = ‘Penguins.jpg’;
app.Button_5.Position = [290 144 61 46];
app.Button_5.Text = ”;

% Create Button_6
app.Button_6 = uibutton(app.UIFigure, ‘push’);
app.Button_6.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button_6.Icon = ‘Penguins.jpg’;
app.Button_6.Position = [494 144 61 46];
app.Button_6.Text = ”;

% Create Button_7
app.Button_7 = uibutton(app.UIFigure, ‘push’);
app.Button_7.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button_7.Icon = ‘Penguins.jpg’;
app.Button_7.Position = [63 62 61 46];
app.Button_7.Text = ”;

% Create Button_8
app.Button_8 = uibutton(app.UIFigure, ‘push’);
app.Button_8.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button_8.Icon = ‘Penguins.jpg’;
app.Button_8.Position = [290 62 61 46];
app.Button_8.Text = ”;

% Create Button_9
app.Button_9 = uibutton(app.UIFigure, ‘push’);
app.Button_9.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button_9.Icon = ‘Penguins.jpg’;
app.Button_9.Position = [494 62 61 46];
app.Button_9.Text = ”;

% Create Label
app.Label = uilabel(app.UIFigure);
app.Label.HorizontalAlignment = ‘center’;
app.Label.FontSize = 36;
app.Label.FontWeight = ‘bold’;
app.Label.Position = [272 332 98 47];
app.Label.Text = ‘0’;

% Create Label_2
app.Label_2 = uilabel(app.UIFigure);
app.Label_2.HorizontalAlignment = ‘center’;
app.Label_2.FontSize = 20;
app.Label_2.Position = [484 418 48 32];
app.Label_2.Text = ’60’;

% Create StartButton
app.StartButton = uibutton(app.UIFigure, ‘push’);
app.StartButton.ButtonPushedFcn = createCallbackFcn(app, @StartButtonPushed, true);
app.StartButton.FontSize = 14;
app.StartButton.Position = [44 418 100 32];
app.StartButton.Text = ‘Start’;

% Show the figure after all components are created
app.UIFigure.Visible = ‘on’;
end
end

% App creation and deletion
methods (Access = public)

% Construct app
function app = myMATLAB_Game

% Create UIFigure and components
createComponents(app)

% Register the app with App Designer
registerApp(app, app.UIFigure)

if nargout == 0
clear app
end
end

% Code that executes before app deletion
function delete(app)

% Delete UIFigure when app is deleted
delete(app.UIFigure)
end
end
end

function toggleButton(app)

app.Label_2.Text = num2str(str2double(app.Label_2.Text) – 1);
switch(randi(3))
case 1
app.Button.Visible = ‘on’;
app.Button_2.Visible = ‘off’;
app.Button_3.Visible = ‘off’;
case 2
app.Button.Visible = ‘off’;
app.Button_2.Visible = ‘on’;
app.Button_3.Visible = ‘off’;
case 3
app.Button.Visible = ‘off’;
app.Button_2.Visible = ‘off’;
app.Button_3.Visible = ‘on’;
end
switch(randi(3))
case 1
app.Button_4.Visible = ‘on’;
app.Button_5.Visible = ‘off’;
app.Button_6.Visible = ‘off’;
case 2
app.Button_4.Visible = ‘off’;
app.Button_5.Visible = ‘on’;
app.Button_6.Visible = ‘off’;
case 3
app.Button_4.Visible = ‘off’;
app.Button_5.Visible = ‘off’;
app.Button_6.Visible = ‘on’;
end
switch(randi(3))
case 1
app.Button_7.Visible = ‘on’;
app.Button_8.Visible = ‘off’;
app.Button_9.Visible = ‘off’;
case 2
app.Button_7.Visible = ‘off’;
app.Button_8.Visible = ‘on’;
app.Button_9.Visible = ‘off’;
case 3
app.Button_7.Visible = ‘off’;
app.Button_8.Visible = ‘off’;
app.Button_9.Visible = ‘on’;
end
end

Top Comment or posts from YouTube

Time isn’t decrementing, what would be the problem?

If possible please watch the video between 12.30 – 12.45 again. Ensure that you have subtracted the timer value by 1 as shown in the code at line number 3.

The line of code should be:

app.Label_2.Text = num2str(str2double(app.Label_2.Text) – 1);

Please check.

Part-2:

This video is the continuation of designing a simple game in MATLAB’s app designer. In this video it focuses on enhancing the game designed in part 1 by adding certain features such as restart button and score card control. Local class variables and functions has been introduced for the same in environment.

For Part-1 please refer to the video link: https://youtu.be/3IQMZQ7JBn0

We will be glad to hear from you regarding any query, suggestions or appreciations at: programmerworld1990@gmail.com

Source Code:

properties (Access = public)
t = timer;
GameStarted= 0; % Description
end

methods (Access = public)

function StopFcnTimer(app)
app.GameStarted = 0;

end
end

% Callbacks that handle component events
methods (Access = private)

% Button pushed function: StartButton
function StartButtonPushed(app, event)
% t = timer;
app.t.Period = 1;
app.t.ExecutionMode = ‘fixedRate’;
app.t.TasksToExecute = 60;
app.t.TimerFcn = @(~,thisEvent) toggleButton(app);
app.t.StopFcn = @(~,thisEvent) StopFcnTimer(app);
app.GameStarted = 1;
start(app.t);
end

% Button pushed function: Button, Button_2, Button_3,
% Button_4, Button_5, Button_6, Button_7, Button_8, Button_9
function ButtonPushed(app, event)
if (app.GameStarted == 1)
app.Label.Text = num2str(str2double(app.Label.Text) + 50);
end

end

% Button pushed function: RestartButton
function RestartButtonPushed(app, event)
stop(app.t);
app.Label.Text = num2str(0);
app.Label_2.Text = num2str(60);
app.t = timer;
StartButtonPushed(app, event);
end

The Complete Project file of this App is shared at:

We will be glad to hear from you regarding any query, suggestions or appreciations at: programmerworld1990@gmail.com