(1) IOS笔记本——第一个IOS小游戏----猜图游戏

◇这是我个人的第一个ios小游戏--猜图游戏，程序很早就写好了，今天写成博客，希望大家多多指教。

　　◇先看看效果图是长啥样的：　　　　

      ◇看完效果图，相信大家都知道这个软件是怎样玩的了吧，功能上我就不叙述太多了，我就说说步骤和细节吧。

　　◇步骤：

　　　　◇0、先修改一下状态栏，让状态栏以白色显现出来，代码如下：

//重写状态栏
- (UIStatusBarStyle)preferredStatusBarStyle
{
    return UIStatusBarStyleLightContent;
}

　　　　◇1、创建新项目，在storyboard上搭建出基本的界面。其中，题号用UILabel、图片用UIIamgeView、金币用UIButton、左右四个红色功能按钮用　　　　UIButton、每个字的按钮都用UIButton。

　　　　◇2、先加载事先准备好的.plist文件，并且转换成模型，代码如下

- (NSArray *)questions
{
    if (_questions == nil) {
        //1.加载plist
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions" ofType:@"plist"]];
        //2.字典转模型
        NSMutableArray *questionArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            MJQuestion *question = [MJQuestion questionWithDict:dict];
            [questionArray addObject:question];
        }
        _questions = questionArray;
    }
    return _questions;
}

　　　　　　◇注意：其中MJQuestion的代码是如下写的（包含了类方法和实例方法的标准命名）：

- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        self.icon = dict[@"icon"];
        self.title = dict[@"title"];
        self.answer = dict[@"answer"];
        self.options = dict[@"options"];
    }
    return self;
}
+ (instancetype)questionWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}

　　　　◇3、为了方便布局，我把答案的按钮和选项按钮都分别放在一个UIView里面，这样能比较方便的控制各个方格的位置，代码如下

//添加正确的答案
        //先移除
    for (UIView *subView in self.answerView.subviews) {
        [subView removeFromSuperview];
    }
    
    int length = question.answer.length;
    for (int i = 0; i < length; i++) {
        UIButton *answerBtn = [[UIButton alloc] init];
        [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
        [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted"] forState:UIControlStateHighlighted];
        //设施frame
        CGFloat margin = 10;
        CGFloat answerW = 35;
        CGFloat answerH = 35;
        CGFloat viewW = self.view.frame.size.width;
        CGFloat leftMargin = (viewW - length * answerW - margin * (length - 1)) * 0.5;
        CGFloat answerX = leftMargin + i * (answerW + margin);
        answerBtn.frame = CGRectMake(answerX, 0, answerW, answerH);
        [answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [self.answerView addSubview:answerBtn];
        [answerBtn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside];
    }
    
    //添加options选项
    for (UIView *subView in self.optionView.subviews) {
        [subView removeFromSuperview];
    }
    
    
    int lengthOptions = question.options.count;
    for (int i = 0; i < lengthOptions; i++) {
        UIButton *optionBtn = [[UIButton alloc] init];
        [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
        [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];
        [optionBtn setTitle:question.options[i] forState:UIControlStateNormal];
        [optionBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        //设施frame
        
        CGFloat margin = 10;
        CGFloat optionW = 35;
        CGFloat optionH = 35;
        CGFloat viewW = self.view.frame.size.width;
        CGFloat leftMargin = (viewW - 7 * optionW - margin *6) * 0.5;
        int col = i % 7;
        CGFloat optionX = leftMargin + col * (optionW + margin);
        int row = i / 7;
        CGFloat optionY = row * (optionH + margin);
        optionBtn.frame = CGRectMake(optionX, optionY, optionW, optionH);
        [self.optionView addSubview:optionBtn];

　　　　◇4、设置监听选项按钮：

　　　　　　◇首先监听按钮，然后接下来是点击的具体实现

//监听点击
        [optionBtn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];


- (void)optionClick:(UIButton *)optionBtn
{
   
    
    for (UIButton *answerBtn in self.answerView.subviews) {
        NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
        if (answerTitle.length <= 0) {
            optionBtn.hidden = YES;
            NSString *optionTitle = [optionBtn titleForState:UIControlStateNormal];
            [answerBtn setTitle:optionTitle forState:UIControlStateNormal];
            break;
        }
    }
    
    //判断是否有空格
    BOOL full = YES;
    NSMutableString *tempAnswerTitle = [NSMutableString string];
    for (UIButton *answerBtn in self.answerView.subviews) {
        NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];

        if (answerTitle.length == 0) {
            full = NO;
        }
        
        if(answerTitle){
            [tempAnswerTitle appendString:answerTitle];
        }
    }
    
    //判断答案是否正确
    if(full)
    {
        MJQuestion *question = self.questions[self.index];
        if ([tempAnswerTitle isEqualToString:question.answer]) {
            //答对了
            for (UIButton *answerBtn in self.answerView.subviews)
            {
                [answerBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
                if(self.index <9)
                {
                    //延迟执行
                    [self performSelector:@selector(nextQuestion) withObject:nil afterDelay:3.0];
                }
            }
        }
        else
        {
            //打错了
            for (UIButton *answerBtn in self.answerView.subviews)
            {
                [answerBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
                
            }
            
        }
    }
    
}

　　◇5、然后是答案按钮的点击事件的实现，点击含有子的框框的时候，把字还给原来的选项按钮。

- (void)answerClick:(UIButton *)answerBtn
{
    NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
    [answerBtn setTitle:nil forState:UIControlStateNormal];
    for (UIButton *optionBtn in self.optionView.subviews) {
        NSString *optionTitle = [optionBtn titleForState:UIControlStateNormal];
        if ([answerTitle isEqualToString:optionTitle] && optionBtn.hidden == YES) {
            optionBtn.hidden = NO;
          break;
        }
    }
}

　　◇6、点击图片换大图，点击大图换小图。这其中带有动画效果。

- (IBAction)bigImg {
    //1.添加阴影
    UIButton *coverBtn = [[UIButton alloc] init];
    coverBtn.backgroundColor = [UIColor blackColor];
    coverBtn.frame = self.view.bounds;
    coverBtn.alpha = 0.5;
    [coverBtn addTarget:self action:@selector(smallImg) forControlEvents:UIControlEventTouchUpInside];
    self.coverBtn = coverBtn;
    [self.view addSubview:coverBtn];
    self.opp = self.iconBtn.frame;
    //2.更换阴影和头像位置
        //插入动画效果
    [UIView beginAnimations:nil context:nil];
    [self.view bringSubviewToFront:self.iconBtn];
    //3.更换头像的frame
    [UIView setAnimationDuration:0.5];
    
        //设置头像矩形属性
    CGFloat iconW = self.view.frame.size.width;
    CGFloat iconH = iconW;
    CGFloat iconY = (self.view.frame.size.height - iconH) * 0.5;
    
    self.iconBtn.frame = CGRectMake(0, iconY, iconW, iconH);
        //提交动画
    [UIView commitAnimations];
}

　　◇7、接下来就是点击大图还原给小图：

- (void)smallImg
{
    //1.删除阴影
    [self.coverBtn removeFromSuperview];
    self.coverBtn = nil;
    
    //2.恢复原来icon位置
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.5];
    
    self.iconBtn.frame = self.opp;
 
    [UIView commitAnimations];
}

　　◇然后用一个公用的方法来调用bigImg和smallImg:

- (IBAction)pigImg
{
    //以是否有遮盖来判断是放大图片还是缩小图片
    if (self.coverBtn == nil) {
        
         [self bigImg];
        
    } else {
       
        [self smallImg];
    }
}

　　大致把基本上的功能给概述完了，好久没有写博客了，感觉这篇都在堆代码，写得好烂，下次我改进。