先看下效果图片

• 前几天看到一个游戏叫别踩白块,下载量还挺大几百万了都,下载下来玩了玩看了看,这个游戏还挺简单的.俗话说想一千遍,一万遍不如动手做一遍来的实在.昨晚以及今天白天闲的没事就开搞了,下午六点钟终于搞完.中间也遇到了些没想到的问题,有个难题想了多半个下午,待我一一道来...篇幅较长字体较小希望能耐心看完

• 代码没有过多的进行封装,只是先实现了基本的功能.一共才200多行代码➕注释--只是没来得及集成音乐

• 用的是collectionViewController全部代码都在.m文件中

• 对于经常要用到的变量进行了宏定义

//

//  ViewController.m

//  PlayPinao

//

//  Created by 裴波波 on 16/4/23.

//  Copyright © 2016年 裴波波. All rights reserved.

//

#import "ViewController.h"

//屏幕宽度

#define kScreenW [UIScreen mainScreen].bounds.size.width

//屏幕高度

#define kScreenH [UIScreen mainScreen].bounds.size.height

//屏幕尺寸

#define kScreenB [UIScreen mainScreen].bounds

#define kLineCount 4  //每行白块个数

#define kCellCount 200 //白块总个数

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UICollectionViewFlowLayout *flowLayout;

/** 存储每一行的cell的可变数组 */

@property (nonatomic, strong) NSMutableArray *arrayM;

/** 记录取整索引 */

@property (nonatomic, assign) int idx;

/** 初始状态整体竖直偏移高度 */

@property (nonatomic, assign) CGFloat offsetTotal;

/** 每个cell高度 */

@property (nonatomic, assign) CGFloat itemH;

/** 点击黑块计数器 */

@property (nonatomic, assign) int blackCount;

/** 主界面view */

@property (nonatomic, strong) UIView *mainView;

/** 秒表计时器 */

@property (nonatomic, strong) NSTimer *timer;

/** 显示时间的label */

@property (nonatomic, strong) UILabel *lblTime;

/** 累计用时 */

@property (nonatomic, assign) CGFloat useTime;

/** 即将消失 */

@property (nonatomic, assign) int displayNum;

@end

• 此处的即将消失的意思是:displayNum,由于collectionView每次滑动的时候,cell即将被销毁(干掉)的时候都会调用的方法.但是当程序刚进入初始化的时候也会调用这个方法,所以用一个数字来标记当点击cell 的时候再判断是否漏掉了黑色的块没有点击.如果漏掉了黑色块没有点击 -> 游戏结束

@implementation ViewController

#pragma mark - 懒加载存储每行cell的可遍数组

-(NSMutableArray *)arrayM{

    if (_arrayM == nil) {

        _arrayM = [NSMutableArray array];

    }

    return _arrayM;

}

#pragma mark - 数据源

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return kCellCount;

}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    /** 绑定tag排序用----并没有什么用处 */

    cell.tag = indexPath.item;

    /** 先统一设置cell背景色白色 */

    cell.backgroundColor = [UIColor whiteColor];

    /** 根据脚标每行随机设置一个颜色为黑色的cell */

    /** 将每行的cell 4个存入可变数组,获取随机数0-3,根据随机数取脚标让其变黑 */

    /** 将cell数组添加到可变数组 */

    [self.arrayM addObject:cell];

    /** 记录索引 = 3的时候从中随机选择一个cell让其背景色变 黑 */

    if (self.idx == 3) {

        /** 产生的随机脚标 */

        int idxBlcak = arc4random_uniform(4);

        UICollectionViewCell * blackCell = self.arrayM[idxBlcak];

        blackCell.backgroundColor = [UIColor blackColor];

    }

    self.idx ++;

    //idx > 3 重置记录索引

    if (self.idx > 3) {

        self.idx = 0;

        //当重置idx的时候 令可变数组arrayM removeAllObject

        [self.arrayM removeAllObjects];

    }

    return cell;

}

• 用self.arrayM可变数组来保存每一行的cell,再用产生随机数的函数来产生一个0-3的一个随机数,让后让以这个随机数为脚标的 存在 self.arrayM中的cell的颜色变为黑色这样就实现了 每行黑色的版块的随机.
• 当idx > 3 的时候再重置为0,接着使用

#pragma mark - 代理

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell * cell = [collectionView cellForItemAtIndexPath:indexPath];

    /** 点击开始计时 */

    if (self.timer == nil) {

        self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0/60 target:self selector:@selector(addTimeOfUserUse) userInfo:nil repeats:YES];

        NSRunLoop * runloop = [NSRunLoop currentRunLoop];

        [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];

    }

    /** 标记---奠基石系统执行方法didEndDisplayingCell时检测漏掉的黑色 */

    self.displayNum = 1;

    /** 判断cell颜色为黑色->变灰 cell为白色 -> 变红 */

    /** 如果点击到了黑块计数 */

    if (cell.backgroundColor == [UIColor blackColor]) {

        cell.tag = 99999; //此行没有什么卵用

        cell.backgroundColor = [UIColor grayColor];

        self.blackCount ++;

    } else {

        //点击错误提示用户点错并且返回点击黑色块的数量

        cell.backgroundColor = [UIColor redColor];

        /** 弹出提示框 */

        [self showClickError];

        /** 停止计时器 */

        [self.timer invalidate];

    }

    /** 每次点击黑色块让collectionView偏移 - 一个cell的高度 */

    /** 滑动到头发生某个事件 */

    if (self.collectionView.contentOffset.y == 0) {

        return;

    }

    //点击滚动

    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionBottom animated:YES];

}

• 当点击黑色的版块的时候:1. 要将黑色 -> 灰色 ,然后collectionView向下滑动过点击的cell,也就是最后一行代码执行的方法.之前我用的是点击cell让整体的collectionView的偏移量 - 最小行间距 - 每个cell的高度.但是这样做有bug,就是当你点击cell collectionVIew向下滑动的时候最下面一行4个cell会直接消失,露出背景色,体验很差...然后看官方文档找方法,找到这个滑动的方法,最合适.
• 此处当点击cell的时候开启一个定时器,类似自动图片轮播器.当点击到的cell不是黑色的版块的时候,计时器停止,记录时间,点击弹框的确定按钮后将时间给了主界面的label来显示用的时间.
• self.blackCount点击到的黑色的版块的计数器,游戏结束后统计结果,在弹框显示点击黑色的版块的数量
• 此时设置self.displayNum = 1;让下面的方法didEndDisplayingCell,,记录cell被移除会调用的方法,判断被移除cell是否包含黑色的cell如果包含了黑色的cell说明玩家漏掉了黑色的cell,然后弹框提醒->游戏结束
• 最后判断当偏移量为0的时候停止滚动.

#pragma mark - 将要消失的cell

-(void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{

    if (cell.backgroundColor == [UIColor blackColor]) {

        if (self.displayNum == 1) {

            [self showClickError];

            [self.timer invalidate];

            self.displayNum = 0;

        }

    }

}

• 为什么要用self.displayNum来进行点击的时候判断,因为当程序刚启动的时候也会调用此方法,我们不希望当程序启动的时候就调用此方法中的 "弹框" 以及 "停止计时器",所以要用一个相当于启动器来启动监视黑色cell是否被干掉

#pragma mark - 累加时间,每秒执行60次

-(void)addTimeOfUserUse{

    self.useTime += 1.0 / 60;

}

#pragma mark - 提示错误框

-(void)showClickError{

    UIAlertController * alertVc = [UIAlertController alertControllerWithTitle:@"最终结果" message:[NSString stringWithFormat:@"成绩是:%zd个",self.blackCount] preferredStyle:UIAlertControllerStyleAlert];

    /** 确定返回主界面 */

    UIAlertAction * action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

        self.lblTime.text = [NSString stringWithFormat:@"累计用时%f",self.useTime];

        self.blackCount = 0;

        self.displayNum = 0;

        [UIView animateWithDuration:0.2 animations:^{

            self.mainView.alpha = 1;

        }];

    }];

    [alertVc addAction:action];

    [self presentViewController:alertVc animated:YES completion:nil];

}

• 弹框提醒的同时将点击的黑色的cell的个数呈现到弹框上.同时重置记录点击cell个数的计数器 self.blackCount,以及self.displayNum.

- (void)viewDidLoad {

    [super viewDidLoad];

    self.collectionView.backgroundColor = [UIColor blueColor];

    /** 初始化布局参数 */

    [self initFlowLayout];

    /** 初始化主界面 */

    [self initMainView];

}

#pragma mark - 初始化主界面

-(void)initMainView{

    UIView * mainView = [[UIView alloc] initWithFrame:kScreenB];

    self.mainView = mainView;

    mainView.backgroundColor = [UIColor orangeColor];

    [self.view addSubview:mainView];

    UIButton * button = [[UIButton alloc] init];

    [button setTitle:@"进入" forState:UIControlStateNormal];

    button.bounds = CGRectMake(0, 0, 50, 30);

    button.backgroundColor = [UIColor blackColor];

    button.center = mainView.center;

    [mainView addSubview:button];

    [button addTarget:self action:@selector(hideMainView) forControlEvents:UIControlEventTouchUpInside];

    //显示游戏时长label

    UILabel * lblTime = [[UILabel alloc] init];

    lblTime.frame = CGRectMake(0, 0, kScreenW, 200);

    self.lblTime = lblTime;

    lblTime.font = [UIFont systemFontOfSize:22];

    lblTime.textAlignment = NSTextAlignmentCenter;

    [mainView addSubview:lblTime];

}

#pragma mark - 隐藏主界面进入游戏

-(void)hideMainView{

    /** 将计时器重置为nil */

    self.timer = nil;

    /** 将累计用时重置nil */

    self.useTime = 0;

    /** 每次进入游戏将偏移量重置 */

    CGFloat offset = (kCellCount / kLineCount - 1) * self.flowLayout.minimumLineSpacing + (kCellCount / kLineCount) * self.itemH - kScreenH;

    self.offsetTotal = offset;

    self.collectionView.contentOffset = CGPointMake(0, offset);

    /** 每次进入游戏将红块重置为白块 -> 刷新collectionView */

    [self.collectionView reloadData];

    [UIView animateWithDuration:0.5 animations:^{

        self.mainView.alpha = 0;

    }];

}

#pragma mark - 初始化布局参数

-(void)initFlowLayout{

    self.flowLayout.minimumLineSpacing = 1;

    self.flowLayout.minimumInteritemSpacing = 0; //cell最小间距

    CGFloat itemH = (kScreenH - (kLineCount -1) * self.flowLayout.minimumLineSpacing) / 4;

    self.itemH = itemH;

    self.flowLayout.itemSize = CGSizeMake((kScreenW / kLineCount) - 1,itemH);

    //偏移量 = (行数 - 1) * 行间距 + 行数 * 每个cell高度 - 屏幕高度

    CGFloat offset = (kCellCount / kLineCount - 1) * self.flowLayout.minimumLineSpacing + (kCellCount / kLineCount) * itemH - kScreenH;

    self.offsetTotal = offset;

    self.collectionView.contentOffset = CGPointMake(0, offset);

    self.collectionView.showsVerticalScrollIndicator = NO;

    self.collectionView.bounces = NO; //取消弹簧效果

    self.collectionView.scrollEnabled = NO; //取消滚动

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

写完才明白想了那么多遍没想到会遇到的问题.有想法就动手.

注意点:1. 最重要的一个逻辑判断以及方法就是cell消失的时候系统要调用的方法,一个下午就被坑在这个上面了,中间想了好多方法例如:把界面上可以看到的黑色的cell筛选出来,经过冒泡排序通过cell.tag来排序,从小到大,每次点击判断你是否点击的是脚标最大的一个cell,,,然而不可行,原因是,你可以点击tag最小的,再赶紧点击tag最大的也可以. 还有一个方法是计算脚标最大的cell的偏移量是否越过了屏幕的最底边,然而测试的时候是每个cell的偏移量不固定,貌似没规律,就算用if进行判断也很复杂..也行不通. 等等吧...最少想了三个方法都不行

最简单最实用的也就是系统的方法,当cell被干掉的时候调用的方法,直接判断黑色的cell是否被干掉即可.其他没什么难度毕竟就一个collectionView而已.

源代码demo下载地址:https://git.oschina.net/alexpei/PBPlayPiano.git