翻翻看游戏小总结

　　在做这个游戏前，我们首先要理清下整个设计思路。我们做翻翻看，游戏的效果就是：一开始图片全正面显示，给我们几秒的时间记住每一张图的位置，然后全部翻转过去，显示同一背景图片。当我们点击图片的时候，图片翻转过来，如果连续点击的两张图片是相同的话，图片消失，否则将翻转回去背景图片那一面。

　　因为我们要有两两相同的图片一起出现，而且出现位置还需要是随机的。因为我们存储图片可以以他的图片名形式进行存储，所以这时我们就可以用一个可变数组先存进图片，例如我们创建一个有24张图片的翻翻看游戏，我们就要先创建个数组以接受图片（以下代码包含音效）

#import "ViewController.h"

#import <AVFoundation/AVFoundation.h>

@interfaceViewController ()

 

@end

 

@implementation ViewController

 

- (void)viewDidLoad

{

    [superviewDidLoad];

//创建有序的图片数组
    NSMutableArray *aryImg=[[[NSMutableArray alloc]init]autorelease];
    //创建一个声音数组
    NSMutableArray *soundAry=[[[NSMutableArray alloc]init]autorelease];
    //加入12张图片，每张加入2次，总共24张
    //循环添加图片名进数组
    for (int i=1; i<13; i++) {
        NSString *str=[NSString stringWithFormat:@"fruit_normal_%d",i];
        [aryImg addObject:str];//语句使用2次，就是重复加入一张图片2次
        [aryImg addObject:str];
        NSString *str1=[NSString stringWithFormat:@"sound_%d",i];
        [soundAry addObject:str1];
        [soundAry addObject:str1];
    }
}

　　我们要使游戏有可玩性，肯定要时图片随机出现在24个位置的某个位置，而不是固定的某些位置，这时候我们就需要创建一个新的数组，将原本存储图片的数组内的元素进行随机打乱存入

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@property(retain,nonatomic)NSMutableArray *suijiAry,*sjSoundAry;//随机数组
@property(retain,nonatomic)UIImageView *lastimgV;//用来接收最后一次点击
@property(retain,nonatomic)UIAlertView *alertV;//提示视图窗
@end

#import "ViewController.h"

#import <AVFoundation/AVFoundation.h>

@interfaceViewController ()

@end

@implementation ViewController

- (void)viewDidLoad

{

    [superviewDidLoad];

//生成随机图片数组和像对应的声音数组

//创建一个随机数组，用来接收有序数组的随机
    self.suijiAry=[[[NSMutableArray alloc]init]autorelease];
    //创建随机数组，用来接受有序声音数组的随机
    self.sjSoundAry=[[[NSMutableArray alloc]init]autorelease];
    for (int i=0; i<24; i++) {
        int j= arc4random()%aryImg.count;//随机取下标
        NSString *str=[aryImg objectAtIndex:j];//根据下标取数组元素，并加入数组str
        NSString *str1=[soundAry objectAtIndex:j];
        [self.suijiAry addObject:str];
        [self.sjSoundAry addObject:str1];
        [aryImg removeObjectAtIndex:j];//接收后移除原本数组元素，避免重复获取
        [soundAry removeObjectAtIndex:j];
    }
}

 

　　做好了这些前期准备后，我们就可以来创建我们的视图窗口以放置这些东西了

#import "ViewController.h"
#import <AVFoundation/AVFoundation.h>
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

//根据随机数组创建一组随机排布的图片
    for (int i=0; i<24; i++) {
        UIImageView *imgV=[[UIImageView alloc]initWithFrame:CGRectMake(80*(i%4)+5, 75*(i/4)+5, 70, 70)];//创建图相框
        imgV.tag=1000+i;//给图相框添加标签 为1000+i格式
        imgV.image=[UIImage imageNamed:[self.suijiAry objectAtIndex:i]];//设置图相框图片
        
        [self.view addSubview:imgV];//添加图相框子示图
}

　　 整个视图都创建好了，这个时候我们就要对图片视图的整个效果进行丰富，是它能达到我们像要达到的效果。

因为图片是无法点击的，所以我们要启用用户交互，然后给图片加上手势

imgV.userInteractionEnabled=YES;//打开图相框交互，才能添加手势
        
        //添加单击事件（手势）
        UITapGestureRecognizer*danji=[[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(danjiAction:)]autorelease];
        //给图片加上手势：单击  注：因为图片不支持点击，所以我们只能给图片视图增加一个手势用来支持
        [imgV addGestureRecognizer:danji];
        
        
        //将图片延迟两秒后翻转
        [self performSelector:@selector(fanzhuan:) withObject:imgV afterDelay:2];

　　我们再写一下实现单击和翻转的方法

//翻转事件
-(void)fanzhuan:(UIImageView*)imgView{
    //翻转语句 随着时间变化的动画 1部分代表是翻转所用时间，也就是翻转速度 “2”部分为枚举类的第3个选项。
    [UIView animateWithDuration:1 animations:^{
        imgView.image=[UIImage imageNamed:@"beijing.jpg"];//设置初始背景
        [UIView setAnimationTransition:2 forView:imgView cache:YES];
    } completion:^(BOOL finished) {  }];
    //启用用户交换，启用次选项才能使图像可用被触发点击事件
    imgView.userInteractionEnabled=YES;

}
//单击事件
-(void)danjiAction:(UITapGestureRecognizer*)sender{
    //设置翻转对象为发送过来的对象
    UIImageView *imgV=(UIImageView*)sender.view;
    //播放相应的声音
    NSURL *url=[NSURL fileURLWithPath:[[NSBundle mainBundle]pathForResource:[self.sjSoundAry objectAtIndex:imgV.tag-1000] ofType:@"mp3"]];
    AVAudioPlayer *player=[[AVAudioPlayer alloc]initWithContentsOfURL:url error:nil];
    [player play];
    //设置翻转效果
    [UIView animateWithDuration:1 animations:^{
        //设置翻转后的图片，用标签法确定
        imgV.image=[UIImage imageNamed:[self.suijiAry objectAtIndex:imgV.tag-1000]];
        //设置动画翻转方式，对象，存储
        [UIView setAnimationTransition:1 forView:imgV cache:YES];
        
    } completion:^(BOOL finished) {
        //翻转之后事件
        if (self.lastimgV!=nil) {
            //后面点击的图片和之前点击的图片是否相同，并且点击的图片编号不是同一张
            if ([self.lastimgV.image isEqual:imgV.image]&&self.lastimgV.tag!=sender.view.tag) {
                //设置动画效果
                [UIView animateWithDuration:1 animations:^{
                         //alpha：设置透明度，为0隐藏
                        self.lastimgV.alpha=0;
                        imgV.alpha=0;
  
                    }];
                //设置通关提醒
                static int serco=0;
                serco++;
                if (serco==self.suijiAry.count/2) {
                    self.alertV=[[UIAlertView alloc]initWithTitle:@"过关" message:@"恭喜你过关" delegate:nil cancelButtonTitle:@"退出" otherButtonTitles:@"下一关", nil];
                    [self.alertV show];
                    [self.alertV release];
                }
  
            }else{
                //如果图片.image属性不同，将图片翻转回原来的背景
                [self performSelector:@selector(fanzhuan:) withObject:self.lastimgV afterDelay:1];
                [self performSelector:@selector(fanzhuan:) withObject:imgV afterDelay:1];
            }
            //执行完对比后，将lastimgV设为空，以便下次判断
            self.lastimgV=nil;
        }else{
            //如果lastimgV是空的，就为他存储这次点击的图片
            self.lastimgV=imgV;
        }
        
    }];

    

}