效果如下所示:
实现的效果:
1.点击中间的图片,图片会方法,后面的背景颜色慢慢的变深,再一次点击图片或者图片之外的地方,图片会缩小,并且后面的背景慢慢的变浅。
2.在备选区点击文字,文字显示在答题区内,并且备选区响应的按钮会消失。
3.如果答案正确,答题区的问题会变成蓝色,自动跳转到下一题,如果答案错误,答题区的文字变成红色,在答题区点击任意一个字就会复原到相应的备选区去。
4.答题正确会增加相应的金币,点击帮助按钮,会扣除掉相应的金币。
5.备选区的答案是随机排列的。
大致就是上面的一些功能,有很多的小细节需要注意,下面是主要的code。
// // ViewController.m // 超级猜图 // // Created by 键盘上的舞者 on 15/6/14. // Copyright (c) 2015年 键盘上的舞者. All rights reserved. // #import "ViewController.h" #import "Question.h" #define kButtonWidth 35 #define kButtonHeight 35 #define kButtonMargin 10 #define kTotalCol 7 @interface ViewController () @property (nonatomic , strong) UIButton *covert; @property (nonatomic ,strong) NSArray *questions; @property (nonatomic,assign) int index; @property (weak, nonatomic) IBOutlet UILabel *noLable; @property (weak, nonatomic) IBOutlet UILabel *descTitle; @property (weak, nonatomic) IBOutlet UIButton *nextButton; @property (weak, nonatomic) IBOutlet UIView *answerView; @property (weak, nonatomic) IBOutlet UIButton *scoreButton; @property (weak, nonatomic) IBOutlet UIView *optionView; @end @implementation ViewController //载入 -(void)viewDidLoad { [super viewDidLoad]; self.index=-1; [self nextQuestion]; } //调整状态栏颜色 -(UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightContent; } //questions的懒加载 -(NSArray *)questions { if(_questions==nil){ _questions=[Question questions]; } return _questions; } //控件的懒加载 -(UIButton *)covert { if(_covert==nil) { //设置蒙版 _covert=[[UIButton alloc] initWithFrame:self.view.bounds]; _covert.backgroundColor=[UIColor colorWithWhite:0.0 alpha:0.5]; [self.view addSubview:_covert]; _covert.alpha=0.0; [_covert addTarget:self action:@selector(BigAndSmallImage:) forControlEvents:UIControlEventTouchUpInside]; } return _covert; } //放大缩小处理 - (IBAction)BigAndSmallImage:(id)sender { if(self.covert.alpha==0){//放大处理 //设置放置图片的button放在最前面 [self.view bringSubviewToFront:self.iconButton]; //图片放大的动画 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.covert.alpha=1.0; }]; }else{//缩小处理 [UIView animateWithDuration:1.0 animations:^{ //图片缩小 self.iconButton.frame=CGRectMake(82, 96, 150, 150); self.covert.alpha=0.0; }]; } } //下一题 -(IBAction)nextQuestion { //1.题目索引递增 self.index++; if(self.index==self.questions.count){ return ; } //2.取出题目模型 Question *question=self.questions[self.index]; //3.设置题目基本信息(标题,图片等) [self setupBasicInfo:question]; //4.设置答案按钮 [self createAnswerButton:question]; //5.设置备选按钮 [self createOptionButtons:question]; } -(void)setupBasicInfo:(Question *)question { self.noLable.text=[NSString stringWithFormat:@"%d/%d",self.index+1,self.questions.count]; self.descTitle.text=question.title; [self.iconButton setImage:[UIImage imageNamed:question.icon] forState:UIControlStateNormal]; self.nextButton.enabled=(self.index< question.answer.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:@"btn_answer_highlighted"] forState:UIControlStateHighlighted]; [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [self.answerView addSubview:btn]; [btn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside]; } } /** * 创建备选按钮 */ - (void)createOptionButtons:(Question *)question { // 如果备选区按钮数量与题目数量不相符再重新创建按钮 if (self.optionView.subviews.count != question.options.count) { [self.optionView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)]; CGFloat optionViewW = self.optionView.bounds.size.width; CGFloat optionX = (optionViewW - kTotalCol * kButtonWidth - (kTotalCol - 1) * kButtonMargin) * 0.5; for (int i = 0; i < question.options.count; i++) { int row = i / kTotalCol; int col = i % kTotalCol; CGFloat x = optionX + col * (kButtonWidth + kButtonMargin); CGFloat y = row * (kButtonHeight + kButtonMargin); UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(x, y, kButtonWidth, kButtonHeight)]; [btn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal]; [btn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted]; [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [self.optionView addSubview:btn]; [btn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside]; } } // 设置备选按钮文字 [question randomOptions]; int i = 0; for (UIButton *btn in self.optionView.subviews) { [btn setTitle:question.options[i++] forState:UIControlStateNormal]; btn.hidden = NO; } } //答题区按钮的点击 -(void)answerClick:(UIButton *)button { if(button.currentTitle.length==0){ return ; } UIButton *btn=[self firstOptionButtonWithTitle:button.currentTitle isHiden:YES]; btn.hidden=NO; [button setTitle:@"" forState:UIControlStateNormal]; //恢复所有文字的颜色 [self setAnswerColor:[UIColor blackColor]]; } -(UIButton *)firstOptionButtonWithTitle:(NSString *)title isHiden:(BOOL)isHidden { for (UIButton *btn in self.optionView.subviews) { if([btn.currentTitle isEqualToString:title]&&btn.isHidden;==isHidden){ return btn; } } return nil; } //备选区的点击 -(void)optionClick:(UIButton *)button { //在答题去找到第一次标题为空的按钮 UIButton *btn=[self firstAnswerButton]; if(btn==nil){ return ; } //将btn的标题设置给答题区的按钮 [btn setTitle:button.currentTitle forState:UIControlStateNormal]; //将button隐藏 button.hidden=YES; //判断胜负 [self judge]; } //找到第一个为空白的按钮 -(UIButton *)firstAnswerButton { for (UIButton *btn in self.answerView.subviews) { if(btn.currentTitle.length==0){ return btn; } } return nil; } //判断胜负 -(void)judge { BOOL flag=YES; NSMutableString *str=[NSMutableString string]; for (UIButton *btn in self.answerView.subviews) { if(btn.currentTitle.length==0){ flag=NO; break; }else{ [str appendString:btn.currentTitle]; } } if(flag){ Question *question=self.questions[self.index]; if([str isEqualToString:question.answer]){ [self setAnswerColor:[UIColor blueColor]]; [self changeScore:200]; //回答正确,等待0.5s进入下一题 [self performSelector:@selector(nextQuestion) withObject:nil afterDelay:0.5]; } else{ [self setAnswerColor:[UIColor redColor]]; } } } //修改答题区按钮的颜色 -(void)setAnswerColor:(UIColor *)color { for (UIButton *btn in self.answerView.subviews) { [btn setTitleColor:color forState:UIControlStateNormal]; } } //提示 -(IBAction)tipClick { for (UIButton *btn in self.answerView.subviews) { [self answerClick:btn]; } //正确答案的第一个字设置到答题区中 Question *question=self.questions[self.index]; NSString *first=[question.answer substringToIndex:1]; UIButton *btn=[self firstOptionButtonWithTitle:first isHiden:NO]; [self optionClick:btn]; [self changeScore:-100]; } //分数处理 -(void)changeScore:(int)score { int currentScore=self.scoreButton.currentTitle.intValue; currentScore+=score; [self.scoreButton setTitle:[NSString stringWithFormat:@"%d",currentScore] forState:UIControlStateNormal]; } @end
下面是字典转模型的code:
// // Question.m // 超级猜图 // // Created by 键盘上的舞者 on 15/6/14. // Copyright (c) 2015年 键盘上的舞者. All rights reserved. // #import "Question.h" @implementation Question -(instancetype)initWithDict:(NSDictionary *)dict { if(self=[super init]){ [self setValuesForKeysWithDictionary:dict]; } return self; } +(instancetype)questionWithDict:(NSDictionary *)dict { return [[self alloc] initWithDict:dict]; } +(NSArray *)questions { NSArray *array=[NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions.plist" ofType:nil]]; NSMutableArray *arrayM=[NSMutableArray array]; for (NSDictionary *dict in array) { [arrayM addObject:[self questionWithDict:dict]]; } return arrayM; } -(void)randomOptions { self.options=[self.options sortedArrayUsingComparator:^NSComparisonResult(id obj1, id obj2) { int seed=arc4random_uniform(2); if(seed){ return [obj1 compare:obj2 options:0]; }else{ return ![obj1 compare:obj2 options:0]; } }]; } @end