猫猫学IOS(六)UI之iOS热门游戏_超级猜图

article/2025/1/11 10:04:07

猫猫分享,必须精品
素材地址:http://blog.csdn.net/u013357243/article/details/44539069
原创文章,欢迎转载。转载请注明:翟乃玉的博客
地址:http://blog.csdn.net/u013357243?viewmode=contents

先看效果图

超级猜图
超级猜图
超级猜图
超级猜图
超级猜图
超级猜图

思路

需求分析

1,搭建界面
1》上半部分,固定的,用Storyboard直接连线(OK)
2》下半部分,根据题目的变化,不断变化和调整,用代码方式实现比较合适(OK)
*备选按钮区域(OK)
*答案按钮区域(OK)

2,编写代码
1》大图,小图的切换(OK)
2》下一题(OK)
3》备选按钮的点击,让文字进入答案区(Ok)
4》判断对错胜负(OK)
*胜利:进入下一题(OK)
*失败:提示用户重新选择(OK)
5》答案按钮的点击(OK)
把答案区的文字回复到备选区域(Ok)

代码

/*
ps:猫猫的文章竟然被好多地方转载了,受宠若惊啊,不过转的时候请转的全一点,别丢下素材什么的,不标注转载也没事,大家一起努力学习猫猫就很高兴了,如果需要学习资料视频素材等等的可以加猫猫QQ:1764541256 或则微信znycat  
让我们一起努力学习吧。
目前将这个游戏的功能都实现了,虽然部分代码抽取的不是那么完美
素材地址:http://blog.csdn.net/u013357243/article/details/44539069
原文地址:http://blog.csdn.net/u013357243/article/details/44538955九宫格学习: 猫猫学IOS(五)UI之360等下载管理器九宫格UI
http://blog.csdn.net/u013357243/article/details/44521437
*/////  NYViewController.m
//  01-超级猜图游戏
//
//  Created by apple on 15-3-21.
//  Copyright (c) 2015年 znycat. All rights reserved.
//#import "NYViewController.h"
#import "NYQuestion.h"@interface NYViewController ()@property (weak, nonatomic) IBOutlet UIButton *iconButton;@property (nonatomic, strong) UIButton *cover;@property (nonatomic, strong) NSArray *questions;
@property (weak, nonatomic) IBOutlet UILabel *noLabel;@property (weak, nonatomic) IBOutlet UILabel *titleLabel;@property (weak, nonatomic) IBOutlet UIButton *nextQuestionButton;
@property (weak, nonatomic) IBOutlet UIView *answerView;@property (weak, nonatomic) IBOutlet UIView *optionsView;@property (weak, nonatomic) IBOutlet UIButton *scoreButton;/** 题目索引*/
@property (nonatomic, assign) int index;@end@implementation NYViewController
#define kButtonWidth 35
#define kButtonHeight 35
#define kButtonMargin 10
#define kTotolCol 7-(NSArray *)questions
{if (_questions == nil) {_questions = [NYQuestion questions];}return _questions;
}-(UIButton *)cover{if (_cover == nil) {//1,添加蒙版(遮罩)_cover = [[UIButton alloc] initWithFrame:self.view.bounds];_cover.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.5];[self.view addSubview:_cover];_cover.alpha = 0.0;[_cover addTarget:self action:@selector(bigImage) forControlEvents:UIControlEventTouchUpInside];}return _cover;
}- (void)viewDidLoad
{[super viewDidLoad];self.index = -1;[self nextQuestion];}//设置状态栏为亮色,可以显示(最上面显示时间信号那一行)
- (UIStatusBarStyle)preferredStatusBarStyle
{//    UIStatusBarStyleDefault                                     = 0,黑色黑色状态栏//    StatusBarStyleLightContent     NS_ENUM_AVAILABLE_IOS(7_0) = 1,亮色状态栏return UIStatusBarStyleLightContent;
}#pragma mark - 大图小图切换
/***大图小图显示切换*/
- (IBAction)bigImage
{//如果没有放大就放大,放大了就缩小//通过判断iconButton的大小if (self.cover.alpha == 0) {//2,把图像按钮放到最前边[self.view bringSubviewToFront:self.iconButton];//3,动画放大图像按钮CGFloat w = self.view.bounds.size.width;CGFloat h = w;CGFloat y = (self.view.bounds.size.height-h)*0.5;[UIView animateWithDuration:1.0 animations: ^{self.iconButton.frame = CGRectMake(0, y, w, h);self.cover.alpha = 1.0;}];}else{//缩小图片//将图片恢复初始位置[UIView animateWithDuration:1.0 animations:^{self.iconButton.frame = CGRectMake(85, 85, 150, 150);self.cover.alpha = 0.0;//让遮罩逐渐消失}];}}#pragma mark - 下一题
/***下一个题目**主要的方法,尽量保留简短的代码,主要体现思路和流程即可。*/
-(IBAction)nextQuestion{//1,当前答题的索引,索引递增self.index ++;//如果index到达最后一个题,那么提示用户,播放动画。。。if (self.index == self.questions.count) {NSLog(@"通关啦!!!");return;}//2,从数组中按照索引取出题目数据模型NYQuestion *question = self.questions[self.index];//3,设置基本信息[self setupBasicInfo:question];//4,设置答案按钮[self creatAnswerButton:question];//5,设置备选按钮[self creatOptionsButton:question];
}/** 设置基本信息*/
-(void)setupBasicInfo:(NYQuestion *)question
{self.noLabel.text = [NSString stringWithFormat:@"%d/%d",self.index+1,self.questions.count ];self.titleLabel.text = question.title;[self.iconButton setImage:[UIImage imageNamed:question.icon] forState:UIControlStateNormal];//如果达到最后一题,禁用一下按钮self.nextQuestionButton.enabled = (self.index < self.questions.count-1);
}
/** 创建答案区按钮*/
-(void)creatAnswerButton:(NYQuestion *)question
{//删除answerView已经存在的控件for (UIView *btn in self.answerView.subviews){[btn removeFromSuperview];}CGFloat answerW = self.answerView.bounds.size.width;int length = question.answer.length;//答案的字符数量CGFloat answerX = (answerW - length*kButtonWidth - (length-1)*kButtonMargin)*0.5;//答案按钮开始的第一个字的最左边坐标//创建所有答案的按钮for (int i = 0; i<length; i++) {CGFloat x = answerX + i*(kButtonWidth + kButtonMargin);UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(x, 0, kButtonWidth, kButtonHeight)];[btn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];[btn setBackgroundImage:[UIImage imageNamed:@"bn_answer_highlighted" ] forState:UIControlStateHighlighted];[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];[self.answerView addSubview:btn];[btn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside];}
}
/** 创建备选区按钮*/
-(void)creatOptionsButton:(NYQuestion *)question
{//问题:每次调用下一题方法时,都会重新创建21个按钮//解决:如果按钮已经存在,并且是21个,只需要更改按钮标题即可if (self.optionsView.subviews.count != question.options.count) {//定义行和列CGFloat optionW = self.optionsView.bounds.size.width;CGFloat optionX = (optionW - kButtonWidth*kTotolCol - kButtonMargin *(kTotolCol-1))*0.5;for(int i = 0 ; i<question.options.count;i++){int row  = i/kTotolCol;//行int col = i%kTotolCol;//列CGFloat x = optionX + col * (kButtonMargin+kButtonWidth);CGFloat y = row * (kButtonHeight+kButtonMargin);UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(x, y, kButtonWidth, kButtonHeight)];/*喵了个咪的,这里出了这么一个错误每一个按钮可以有8张图片,4个状态每个状态有两个,image和backgroundImage,如果你设置了image图片那么你的设置的title将会被你的image挤开到一边,如果你的image大的话你就真的看不到他了*///        [btn setImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];//        [btn setImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];[btn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];[btn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];//添加备选区域按钮标题[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];//设置标题颜色[self.optionsView addSubview:btn];//用爹来添加,删除时候是用爹找到所有儿子然后让儿子自己删自己//添加被选取按钮点击事件[btn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];}}//如果按钮已经存在,在点击下一题的时候,只需要设置标题即可int i = 0;for (UIButton *btn in self.optionsView.subviews){//设置标题内容[btn setTitle:question.options[i++] forState:UIControlStateNormal];//取消按钮的隐藏btn.hidden = NO;}}#pragma mark - 备选按钮点击方法
/**添加被选取按钮点击事件*/
-(void)optionClick:(UIButton *)button
{//1,在答案区找到第一个标题为空的按钮UIButton *ansBtn = [self firstAnswerButton];if (ansBtn == nil)return;//2,将button的标题赋值给答案去的按钮[ansBtn setTitle:button.currentTitle forState:UIControlStateNormal];//3,隐藏按钮button.hidden = YES;//4,判断结果[self judge];
}/**判断结果*/
-(void)judge{//如果答题区按钮都有答案,才需要判断结果//遍历所有答题区的按钮BOOL isFull = YES;NSMutableString * strM = [NSMutableString string];for(UIButton * btn in self.answerView.subviews){if (btn.currentTitle.length == 0) {//只要有一个按钮没有字 //isFull = NO;break;//跳出循环}else{//有字,拼接临时字符串[strM appendString:btn.currentTitle];}}if (isFull) {NSLog(@"都有字");NYQuestion *question = self.questions[self.index];//得到问题//判断是否和答案一致,if([question.answer isEqualToString:strM]){//判断问题和字符串是否相等//如果相等NSLog(@"答对了");//如果一致,设置成蓝色进入下一题[self setAnswerButtonColor:[UIColor blueColor]];//等待0.5秒,进入下一题[self performSelector:@selector(nextQuestion) withObject:nil afterDelay:0.5];}else{NSLog(@"答错了");//如果不一致,修改按钮文字颜色,提示用户[self setAnswerButtonColor:[UIColor redColor]];}}else {NSLog(@"继续");}
}
/**修改答题区按钮的颜色*/
-(void)setAnswerButtonColor:(UIColor *)color
{for (UIButton *btn in self.answerView.subviews) {[btn setTitleColor:color forState:UIControlStateNormal];}
}/**在答案区找到第一个标题为空的按钮如果答案区按钮都满了就返回nil*/
-(UIButton *) firstAnswerButton
{//    取出按钮标题,遍历答题区按钮for (UIButton *btn in self.answerView.subviews) {if (btn.currentTitle.length == 0) {return btn;}}return nil;
}#pragma mark - 答题区按钮点击方法
-(void)answerClick:(UIButton *)button
{//如果按钮没有字,直接返回if (button.currentTitle.length == 0) {return;}//如果有字,清除文字,候选区按钮显示//1,使用button的title去查找候选区中对应的按钮UIButton *btn = [self optionButtonWithTitle:button.currentTitle isHidden:YES];//2,显示对应按钮btn.hidden = NO;//3,清除答案区button的文字[button setTitle:@"" forState:UIControlStateNormal];//4,只要点击了按钮,答题区就少了,然后就设成黑色[self setAnswerButtonColor:[UIColor blackColor]];}/**遍历备选的按钮 如果返回与title相同 并且 hidden为YES(隐藏) 的btn*/
-(UIButton *) optionButtonWithTitle:(NSString *)title isHidden:(BOOL) isHidden
{for (UIButton *btn in self.optionsView.subviews) {if ([btn.currentTitle isEqualToString:title] && btn.hidden) {return btn;}}return nil;
}#pragma mark - 提示功能
-(IBAction)tipClick
{//1,把答题区的所有的按钮清空for (UIButton *btn in self.answerView.subviews) {
//        [btn setTitle:@"" forState:UIControlStateNormal];[self answerClick:btn];}//2,把正确答案的第一个字,设置到答题区中//找到答案的第一个字NYQuestion *question = self.questions[self.index];NSString *first = [question.answer substringToIndex:1];//取出文字对应的候选按钮
//    for (UIButton *btn in self.optionsView.subviews) {
//        if ([btn.currentTitle isEqualToString:first] && !btn.hidden) {
//            [self optionClick:btn];//找到正确答案后按一下,然后自动就上答案区了
//            break;
//        }
//    }UIButton * btn = [self optionButtonWithTitle:first isHidden:NO];[self optionClick:btn];//提示的时候需要扣分[self changeScore:-1000];}#pragma mark - 分数处理
-(void)changeScore:(int) score
{//取出当前分数int currentScore = self.scoreButton.currentTitle.intValue;//使用score调整分数currentScore += score;//重新设置分数[self.scoreButton setTitle:[NSString stringWithFormat:@"%d",currentScore ] forState:UIControlStateNormal];
}@end

字典的代码

//
//  NYQuestion.h
//  01-超级猜图游戏
//
//  Created by apple on 15-3-21.
//  Copyright (c) 2015年 znycat. All rights reserved.
//#import <Foundation/Foundation.h>@interface NYQuestion : NSObject
@property (nonatomic, copy) NSString *answer;
@property (nonatomic, copy) NSString *icon;
@property (nonatomic, copy) NSString *title;
@property (nonatomic, strong) NSArray *options;-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)questionWithDick:(NSDictionary *)dict;/***返回所有题目数组*/
+(NSArray *)questions;/**打乱备选文字的数组*/
-(void)randomOptions;
@end//
//  NYQuestion.m
//  01-超级猜图游戏
//
//  Created by apple on 15-3-21.
//  Copyright (c) 2015年 znycat. All rights reserved.
//#import "NYQuestion.h"@implementation NYQuestion//相当于构造方法(用NSDictionary 字典构造)
-(instancetype)initWithDict:(NSDictionary *)dict
{self = [super init];if (self) {[self setValuesForKeysWithDictionary:dict];//让模型打乱数据[self randomOptions];}return self;
}//提供类方法来调用initWithDict:dict方法,方便调用
+(instancetype)questionWithDick:(NSDictionary *)dict
{return [[self alloc]initWithDict:dict];}/***返回所有题目数组*/
+(NSArray *)questions
{//array中是文件中的字典数组NSArray *array = [[NSArray alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions.plist" ofType:nil]];//初始化一个可以添加的数组为了存放模型数据NSMutableArray *arrayM = [NSMutableArray array];for (NSDictionary *dict in array) {[arrayM addObject:[self questionWithDick:dict]];}return arrayM;
}-(void)randomOptions
{//对options做乱序self.options = [self.options sortedArrayUsingComparator:^NSComparisonResult(NSString *str1, NSString *str2) {int seed = arc4random_uniform(2);if (seed) {return [str1 compare:str2];}else{return [str2 compare:str1];}}];
}@end

上面是全部代码,
学习过程首先自己拖界面上半部分,需求里面写的很清楚了,
然后代码实现下面部分,基本是一个九宫格的布局,猫猫的上一篇里面写了类似哪那样下载功能的用代码实现过程,这里就不啰嗦了。
九宫格学习: 猫猫学IOS(五)UI之360等下载管理器九宫格UI
http://blog.csdn.net/u013357243/article/details/44521437

注释当中写的相当清楚,每个mark都间隔出来了部分的功能,因为是学习写的代码,所以注释写的很全,应该可以看懂。

完成布局后就开始写模型字典了。这里就用到了mvc设计模式,当然这个游戏中主要用到的时mc view方面并不是那么多,主要是对设计逻辑的学习与体现。

然后就按照需求来设计学习编写啦。


http://chatgpt.dhexx.cn/article/TMcNxbul.shtml

相关文章

iOS汇编基础(二)寄存器

以arm64为例 xcode调试汇编1. xcode 查看运行时的汇编代码 debug -> debug workflow -> always show disassembly 2. Xcode改变pc值 register write pc 0x1005d6928 3. 单步运行一步汇编代码:ni 4. 读取某个寄存器 (lldb) register read x0x0 = 0x0000000000000000…

Unity简单操作: DoTween的onCom..回调函数里面执行错误 不返回哪条函数出错的解决方案,与iOS平台为什么需要勾选安全模式

目录 DoTween的onCom..回调函数里面执行错误 不返回哪条函数出错的解决方案 当然 在iOS平台 测试好了的话 需要勾选它&#xff0c;不然iOS机制原因 会导致onComxx回调 没有执行&#xff01; DoTween的onCom..回调函数里面执行错误 不返回哪条函数出错的解决方案 如下图&…

iOS汇编基础(一)

一 高级语言运行过程 二 汇编语言的特点 可以直接访问、控制各种硬件设备,比如存储器、CPU等,能最大限度地发挥硬件的功能能够不受编译器的限制,对生成的二进制代码进行完全的控制目标代码简短,占用内存少,执行速度快汇编指令是机器指令的助记符,同机器指令一一对应。每一…

STM32cubIDE 黑色主题_主题 | 喵咪旅行日志 VX可爱系列主题 BySasa

今天带来一款Sasa小宝贝儿投稿的可爱系列VX主题&#xff0c;应该也算是可爱系列里偏向简单的了。 鉴于前几次留言总是碰到隔着网线就不需要情商的DS。在前边先申明清楚吧&#xff0c;审美各有差异&#xff0c;不喜欢不用就好了。如果没有素质去diss投稿者作品&#xff0c;那就别…

tp框架怎么连接mysql_tp框架知识 之(链接数据库和操作数据)

框架有时会用到数据库的内容&#xff0c;在"ThinkPhp框架知识"的那篇随笔中提到过&#xff0c;现在这篇随笔详细的描述下。 一、链接数据库 (1)找到模块文件夹中的Conf文件夹&#xff0c;然后进行编写config.php文件 我这里是这样的文件路径 (2)打开这个config.php文…

thinkphp6开发cms项目之安装tp框架

1.安装thinkphp6框架&#xff1a; composer create-project topthink/think tp需要安装的扩展&#xff1a; composer require topthink/think-multi-app //多应用 composer require topthink/think-view //视图 composer require topthink/think-captcha //验证码2.如果运行ph…

我的服务器开发之路-安装thinkphp

http://www.thinkphp.cn/down/framework.html 下载thinkphp 我这边下载的是thinkphp5.0.3核心版 然后&#xff0c;打开xftp 4&#xff0c;将下载的thinkphp5.0.3的压缩包解压到tp503目录&#xff0c;并上传到/data/www/web目录 然后&#xff0c;打开浏览器&#xff0c;输入 域…

tp框架与mysql_TP框架对数据库的基本操作

数据库的操作&#xff0c;无疑就是连接数据库&#xff0c;然后对数据库中的表进行各种查询&#xff0c;然后就是对数据的增删改的操作&#xff0c;一步步的讲述一下框架对数据库的操作 想要操作数据库&#xff0c;第一步必然是要&#xff1a;链接数据库 一、链接数据库 (1)找到…

php tp框架,TP框架

tp:thinkphp框架&#xff0c;它也是一个轻量级的框架&#xff0c;它有中文社区&#xff0c;中文的帮助文档。它是国人开发的框架。 Thinkphp框架最初是由于企业级网站的开发和web网站的开发诞生的&#xff0c;最初诞生在2006年&#xff0c;它叫fsc,2007年正式更名为thinkphp,它…

TP5框架

第一次写博客 因为自己的技术是在有点差,所以想提升一下自己的技术,所有尝试写下博客,这次是关于TP5框架的, 开发PHP肯定要环境,手搭PHP不是不行,只是切换版本的时候特别麻烦,所以我下载了一个集成环境,用的是PHPstudy,小伙伴们可以自行去下载 ###我下载的是TP5.0完整版本,压…

Oracle轻量级客户端下载,Oracle轻量级客户端使用,Oracle轻量级客户端配置,本地同时安装服务器端和客户端,并实现plsql developer连接

Oracle轻量级客户端&#xff0c;不需要安装&#xff0c;绿色版&#xff0c;可以用于本地或者远程数据库连接&#xff0c;包含了基本的sqlplus&#xff0c;数据泵等功能。 官方解释如下&#xff1a;https://www.oracle.com/technetwork/database/database-technologies/instant…

使用ThinkPhp6框架搭建的管理系统

项目介绍 一款 PHP 语言基于 ThinkPhp6.x、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架&#xff0c;可用于快速搭建前后端分离后台管理系统&#xff0c;本着简化开发、提升开发效率的初衷&#xff0c;框架自研了一套个性化的组件&am…

php 命令安装tp5,tp5.1框架的下载与安装方法步骤(图文)

大家可以都知道啊&#xff0c;tp框架5.1之前的版本都是可以在thinkphp的官网进行下载压缩包来安装框架的&#xff0c;那么在从tp5.1开始啊&#xff0c;就取消了下载压缩包安装的方法&#xff0c;那么我们如何进行下载呢&#xff1f; tp5.1的手册中开始就有提到tp5.1框架有两种安…

TP5.0框架上手准备

活到老学到老,祝上手顺利 1:首先需要安装并调试 方法一&#xff1a;在官网:[地址](http://www.thinkphp.cn),下载完整版的TP框架放在对应的www目录下; 方法二&#xff1a;利用composer进行安装&#xff0c;下载安装composer后&#xff0c;在DOS窗口切换到对应目录下输入&#x…

tp6企业级开发框架

项目介绍 一款 PHP 语言基于 ThinkPhp6.x、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架&#xff0c;可用于快速搭建前后端分离后台管理系统&#xff0c;本着简化开发、提升开发效率的初衷&#xff0c;框架自研了一套个性化的组件&am…

K8S云原生环境渗透学习

转载至​​​​​​K8S云原生环境渗透学习 - 先知社区 K8S云原生环境渗透学习 前言 ​ Kubernetes&#xff0c;简称k8s&#xff0c;是当前主流的容器调度平台&#xff0c;被称为云原生时代的操作系统。在实际项目也经常发现厂商部署了使用k8s进行管理的云原生架构环境&#x…

day3----部署duboo微服务值部署zk和Jenkins(3)

部署zk集群 Zookeeper是Dubbo微服务集群的注册中心 它的高可用机制和k8s的etcd集群一致 由java编写&#xff0c;所以需要jdk环境主机名角色iphdss7-11.host.comk8s代理节点1&#xff0c;zk110.4.7.11hdss7-12.host.comk8s代理节点2&#xff0c;zk210.4.7.12hdss7-21.host.comk…

项目系统配置软件

(一)配置阿里镜像源################################################################################### 打开虚拟机跟随下面的连接操作即可将linux部署到阿里https://developer.aliyun.com/mirror/centos?spma2c6h.13651102.0.0.3e221b11h7vSuM (二)为linux安装jdk(windo…

一份Git的全总结

文章目录 励志一、Git学习路线二、Git安装三、理论基础&#xff08;1&#xff09;Git的发展&#xff08;2&#xff09;Git 是什么&#xff1f;&#xff08;3&#xff09;三种状态&#xff08;4&#xff09;Git 保证完整性&#xff08;5&#xff09;Git工作流程图&#xff08;6&…

java工程师-面试知识点总结

目录 [x] 一、Java基础(语言、集合框架、OOP、设计模式等)[x] 二、Java高级(JavaEE、框架、服务器、工具等)[x] 三、多线程和并发[x] 四、Java虚拟机[x] 五、数据库(Sql、MySQL、Redis等)[x] 六、算法与数据结构[x] 七、计算机网络[x] 八、操作系统(OS基础、Linux等)[x] 九、其…