手把手教你用MATLAB制作一款 [狗头翻牌子] 小游戏(点灯游戏)

0 游戏效果

就是点击一个牌子时,该牌子和周围四个牌子也会相应发生变化,想办法让所有牌子都在同一面即为游戏胜利。

在这里插入图片描述
在这里插入图片描述


1 fig界面和背景板

这一段比较简单,主要是对界面和背景板的属性设置,我们采用编程的方式调用app designer控件:

ddooggFig=uifigure('units','pixels',...
    'position',[320 120 360 400],...
    'Numbertitle','off',...
    'menubar','none',...
    'resize','off',...
    'name','ddoogg',...
    'color',[0.98 0.98 0.98]);

bkgLabel=uilabel(ddooggFig);
bkgLabel.Position=[10 10 340 340];
bkgLabel.Text='';
bkgLabel.BackgroundColor=[193 214 232]./255;

在这里插入图片描述


2 狗狗牌子与胜利标志

2.1 狗狗牌子绘制

我们用1代表一种狗狗,2代表另一种狗狗,dogMat一开始全为1表示所有牌子上都是第一种狗狗,imgSource代表两种狗狗图片位置,bkgColor代表狗狗卡牌的背景颜色

dogMat=ones(5,5); %数据矩阵
imgSource={'images\doga.png','images\dogb.png'}; %狗狗图片链接
bkgColor=[[252 251 238]./255;[222 248 252]./255];%狗狗图背景颜色

图片自取:
doga.png
在这里插入图片描述
dogb.png
在这里插入图片描述

使用两层for循环算好位置构造控件:

%绘制5x5个uiimage控件
for i=1:5
    for j=1:5
        dogMatHdl(i,j)=uiimage(ddooggFig);
        dogMatHdl(i,j).Position=[20+65*(j-1),280-65*(i-1),60,60];
        dogMatHdl(i,j).ImageSource=imgSource{1};
        dogMatHdl(i,j).BackgroundColor=bkgColor(1,:);
        dogMatHdl(i,j).UserData=[i,j];
    end
end

注意我们为每个图片设置一个UserData属性,这可以表示图片的位置,方便我们之后识别点击的是哪个图片。

在这里插入图片描述

2.2 游戏胜利标签

绘制一个标签显示游戏胜利:

%获胜标签
win=false; %是否完成游戏
winLabel=uilabel(ddooggFig);
winLabel.Position=[15 150 330 60];
winLabel.Text='恭喜你解出谜题,请点击重新开始';
winLabel.BackgroundColor=[238 236 225]./255;
winLabel.FontSize=19;
winLabel.FontWeight='bold';
winLabel.HorizontalAlignment='center';
winLabel.FontColor=[113 106 63]./255;

在这里插入图片描述
游戏一开始标签式是隐藏的赢了之后才会显示出来,因此我们先将标签隐藏:

winLabel.Visible='off';
2.3 鼠标点击牌子回调
%创建uiimage回调
set(dogMatHdl,'ImageClickedFcn',@clickDog)

    function clickDog(~,event)
        if ~win %游戏赢了不做任何操作
            objNum=event.Source.UserData;
            %点击事件的来源图片的UserData属性,与图片位置相关
            
            crossList=[-1 0;0 1;1 0;0 -1;0 0];
            %点击位置上下左右和自身
            
            for ii=1:5
                changePos=crossList(ii,:)+objNum;%要改变的牌子的位置    
                if all(changePos>=1&changePos<=5)%如果该位置在范围内,改变图片显示和数据矩阵
                    dogMat(changePos(1),changePos(2))=mod(dogMat(changePos(1),changePos(2)),2)+1;
                    dogMatHdl(changePos(1),changePos(2)).ImageSource=imgSource{dogMat(changePos(1),changePos(2))};
                    dogMatHdl(changePos(1),changePos(2)).BackgroundColor=bkgColor(dogMat(changePos(1),changePos(2)),:);
                end
            end
            
			%如果所有卡牌都一样,游戏结束
            if all(all(dogMat==1))||all(all(dogMat==2))
                win=true;
                winLabel.Visible='on';
            end
        end
    end

在这里插入图片描述

3 游戏难度按钮组

3.1 按钮绘制

绘制三个按钮,初始 [初级] 按钮为被选中状态,即难度等级为一级,我们将gameLevel设置为1,并将 [初级] 按钮颜色和其他按钮做区分,表示被选中状态:

gameLevel=1; %游戏难度级别
%初级难度按钮属性
levelBtn(1)=uibutton(ddooggFig);
levelBtn(1).Position=[10,360,75,30];
levelBtn(1).Text='初级';
levelBtn(1).FontWeight='bold';
levelBtn(1).FontSize=14;
levelBtn(1).BackgroundColor=[13 141 209]./255;
levelBtn(1).FontColor=[1 1 1];
levelBtn(1).UserData=1;
%中级难度按钮属性
levelBtn(2)=uibutton(ddooggFig);
levelBtn(2).Position=[95,360,75,30];
levelBtn(2).Text='中级';
levelBtn(2).FontWeight='bold';
levelBtn(2).FontSize=14;
levelBtn(2).BackgroundColor=[2 164 173]./255;
levelBtn(2).FontColor=[1 1 1];
levelBtn(2).UserData=2;
%高级难度按钮属性
levelBtn(3)=uibutton(ddooggFig);
levelBtn(3).Position=[180,360,75,30];
levelBtn(3).Text='高级';
levelBtn(3).FontWeight='bold';
levelBtn(3).FontSize=14;
levelBtn(3).BackgroundColor=[2 164 173]./255;
levelBtn(3).FontColor=[1 1 1];
levelBtn(3).UserData=3;

在这里插入图片描述

3.2 难度选择回调

改变gameLevel的数值,然后改变按钮颜色

%设置难度选择回调
set(levelBtn,'ButtonPushedFcn',@changeLevel)
    function changeLevel(~,event)
        levelBtn(gameLevel).BackgroundColor=[2 164 173]./255;
        objNum=event.Source.UserData;
        gameLevel=objNum;
        levelBtn(gameLevel).BackgroundColor=[13 141 209]./255;   
    end

在这里插入图片描述

4 游戏刷新模块

4.1 刷新游戏按钮绘制
restartBtn=uibutton(ddooggFig);
restartBtn.Position=[265,360,85,30];
restartBtn.Text='重新开始';
restartBtn.FontWeight='bold';
restartBtn.FontSize=14;
restartBtn.BackgroundColor=[2 164 173]./255;
restartBtn.FontColor=[1 1 1];

在这里插入图片描述

4.2 模拟鼠标点击

我们游戏一开始和点击重新开始要生成未被完成的游戏局面,最简单的生成方式就是模拟鼠标点击随机一定数量的卡牌,点击次数越多难度越大,我们之前已经有鼠标点击的回调函数了:

function clickDog(~,event)

我们发现我们需要模拟的主要是第二个参数event,同时我们发现我们需要用到的只有event的Source属性下的UserData信息,也就是卡牌位置信息:

objNum=event.Source.UserData;

我们便可以构造一个含有UserData信息的结构体,例如:

simEvent.Source.UserData=[1,2];

再通过如下方式调用clickDog函数:

clickDog([],simEvent)

就能模拟点击第一行第二列的牌子,模拟点击其他牌子操作类似。

4.2 刷新游戏回调

在程序最后需要调用一次刷新游戏回调,以保证一点开始就产生谜题。

set(restartBtn,'ButtonPushedFcn',@restart)
    function restart(~,~)
    	%相关参数设置:
    	%是否获胜改为否
    	%胜利标签隐藏
    	%数据矩阵全为1
        win=false;
        winLabel.Visible='off';
        dogMat=ones(5,5);
        
        %将狗狗牌子恢复至初始状态
        for ii=1:5
            for jj=1:5
                dogMatHdl(ii,jj).ImageSource=imgSource{1};
                dogMatHdl(ii,jj).BackgroundColor=bkgColor(1,:);
            end
        end

		%依据游戏难度不同选择不同模拟点击次数
        switch gameLevel
            case 1,changeTimes=3;
            case 2,changeTimes=5;
            case 3,changeTimes=11;
        end
	
		%模拟点击
        for ii=1:changeTimes
            changePos=randi([1,5],[1,2]);
            simEvent.Source.UserData=changePos;
            clickDog([],simEvent)
        end
    end
restart()

在这里插入图片描述

5 完整代码

function ddoogg
ddooggFig=uifigure('units','pixels',...
    'position',[320 120 360 400],...
    'Numbertitle','off',...
    'menubar','none',...
    'resize','off',...
    'name','ddoogg',...
    'color',[0.98 0.98 0.98]);

bkgLabel=uilabel(ddooggFig);
bkgLabel.Position=[10 10 340 340];
bkgLabel.Text='';
bkgLabel.BackgroundColor=[193 214 232]./255;


%绘制狗狗和获胜标签========================================================
dogMat=ones(5,5); %数据矩阵
imgSource={'images\doga.png','images\dogb.png'}; %狗狗图片链接
bkgColor=[[252 251 238]./255;[222 248 252]./255];%狗狗图背景颜色

%绘制5x5个uiimage控件
for i=1:5
    for j=1:5
        dogMatHdl(i,j)=uiimage(ddooggFig);
        dogMatHdl(i,j).Position=[20+65*(j-1),280-65*(i-1),60,60];
        dogMatHdl(i,j).ImageSource=imgSource{1};
        dogMatHdl(i,j).BackgroundColor=bkgColor(1,:);
        dogMatHdl(i,j).UserData=[i,j];
    end
end

%获胜标签
win=false; %是否完成游戏
winLabel=uilabel(ddooggFig);
winLabel.Position=[15 150 330 60];
winLabel.Text='恭喜你解出谜题,请点击重新开始';
winLabel.BackgroundColor=[238 236 225]./255;
winLabel.FontSize=19;
winLabel.FontWeight='bold';
winLabel.HorizontalAlignment='center';
winLabel.FontColor=[113 106 63]./255;
winLabel.Visible='off';


%创建uiimage回调
set(dogMatHdl,'ImageClickedFcn',@clickDog)
    function clickDog(~,event)
        if ~win
            objNum=event.Source.UserData;
            crossList=[-1 0;0 1;1 0;0 -1;0 0];
            for ii=1:5
                changePos=crossList(ii,:)+objNum;
                if all(changePos>=1&changePos<=5)
                    dogMat(changePos(1),changePos(2))=mod(dogMat(changePos(1),changePos(2)),2)+1;
                    dogMatHdl(changePos(1),changePos(2)).ImageSource=imgSource{dogMat(changePos(1),changePos(2))};
                    dogMatHdl(changePos(1),changePos(2)).BackgroundColor=bkgColor(dogMat(changePos(1),changePos(2)),:);
                end
            end
            if all(all(dogMat==1))||all(all(dogMat==2))
                win=true;
                winLabel.Visible='on';
            end
        end
    end

%游戏等级按钮==============================================================
gameLevel=1; %游戏难度级别
%初级难度按钮属性
levelBtn(1)=uibutton(ddooggFig);
levelBtn(1).Position=[10,360,75,30];
levelBtn(1).Text='初级';
levelBtn(1).FontWeight='bold';
levelBtn(1).FontSize=14;
levelBtn(1).BackgroundColor=[13 141 209]./255;
levelBtn(1).FontColor=[1 1 1];
levelBtn(1).UserData=1;
%中级难度按钮属性
levelBtn(2)=uibutton(ddooggFig);
levelBtn(2).Position=[95,360,75,30];
levelBtn(2).Text='中级';
levelBtn(2).FontWeight='bold';
levelBtn(2).FontSize=14;
levelBtn(2).BackgroundColor=[2 164 173]./255;
levelBtn(2).FontColor=[1 1 1];
levelBtn(2).UserData=2;
%高级难度按钮属性
levelBtn(3)=uibutton(ddooggFig);
levelBtn(3).Position=[180,360,75,30];
levelBtn(3).Text='高级';
levelBtn(3).FontWeight='bold';
levelBtn(3).FontSize=14;
levelBtn(3).BackgroundColor=[2 164 173]./255;
levelBtn(3).FontColor=[1 1 1];
levelBtn(3).UserData=3;
%设置难度选择回调
set(levelBtn,'ButtonPushedFcn',@changeLevel)
    function changeLevel(~,event)
        levelBtn(gameLevel).BackgroundColor=[2 164 173]./255;
        objNum=event.Source.UserData;
        gameLevel=objNum;
        levelBtn(gameLevel).BackgroundColor=[13 141 209]./255;   
    end


%刷新游戏按钮==============================================================
restartBtn=uibutton(ddooggFig);
restartBtn.Position=[265,360,85,30];
restartBtn.Text='重新开始';
restartBtn.FontWeight='bold';
restartBtn.FontSize=14;
restartBtn.BackgroundColor=[2 164 173]./255;
restartBtn.FontColor=[1 1 1];
%设置刷新游戏回调
set(restartBtn,'ButtonPushedFcn',@restart)
    function restart(~,~)
        win=false;
        winLabel.Visible='off';
        dogMat=ones(5,5);
        for ii=1:5
            for jj=1:5
                dogMatHdl(ii,jj).ImageSource=imgSource{1};
                dogMatHdl(ii,jj).BackgroundColor=bkgColor(1,:);
            end
        end
        switch gameLevel
            case 1,changeTimes=3;
            case 2,changeTimes=5;
            case 3,changeTimes=11;
        end
        for ii=1:changeTimes
            changePos=randi([1,5],[1,2]);
            simEvent.Source.UserData=changePos;
            clickDog([],simEvent)
        end
    end
restart()
end

另:
需要MATLAB版本至少在R2019a及以后,若是以前版本可以尝试用uiaxes和image进行改写。
总代码长度140行左右,快来试试呀,完整代码及图片包:

链接:https://pan.baidu.com/s/1QpN9hWCYZMrJm5tGBp3Vzw
提取码:5xok

  • 59
    点赞
  • 230
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

slandarer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值