最终效果图:

环境版本:cocos2d-x-3.3beta0 没有使用到物理引擎

游戏场景

//
//  WhiteSquareScene.h
//  01_cocos2d-x
//
//  Created by beyond on 14-10-7.
//
//

#ifndef ___1_cocos2d_x__WhiteSquareScene__
#define ___1_cocos2d_x__WhiteSquareScene__

#include "Square.h"
#include "EndLine.h"

class EndLine;

USING_NS_CC;


class WhiteSquareScene : public cocos2d::Layer
{
    
private:
    // 屏幕尺寸
    Size winSize;
    // 临时累积 当前 总共添加了多少行 (当到了50行时,添加结束行)
    int tempTotalLine;
    
    // 是否 正在 显示 结束行
    bool isEndLineShowing;
    // 计时器标签
    Label *timerLabel;
    
    // 用一个Node 包装起来 所有的东东,方便进行整体控制
    Node *_gameLayer;
    
    // 标记 是否正在计时
    bool isTimerRunning;
    // 游戏开始时的时间戳
    long startTime;
    
    // 结束行
    EndLine * currentEndLine;
    
public:
    // static create() 方法 内部调用init
    CREATE_FUNC(WhiteSquareScene);
    virtual bool init();
    // 供外界调用(导演)
    static cocos2d::Scene* createScene();
    
    // 添加开始行
    void addStartLine();
    // 添加结束行
    void addEndLine();
    // 添加 正常的游戏行，最下面是起始行，正常行的 行号 从 1 开始 2、3等等
    // 之所以在 添加正常的行时,要传入 行号作为参数,是因为,行号 决定 了该正常行 在屏幕中的Y值
    void addNormalLine(int lineIndex);
    
    // 添加 监听当前 Layer的侦听器,如果 点击的是正常游戏行的第一行,就开始游戏
    void addLayerTouchHandler();
    
    // 游戏控制  游戏初始化
    void initGame();
    // 游戏层 整体下移
    void gameLayerMoveDown();
    void startTimer();
    void stopTimer();
    

    
    virtual void update(float dt);
};


#endif /* defined(___1_cocos2d_x__WhiteSquareScene__) */

//
//  WhiteSquareScene.cpp
//  01_cocos2d-x
//
//  Created by beyond on 14-10-7.
//
//

#include "WhiteSquareScene.h"

#define kSquareWidth winSize.width/4
#define kSquareHeight winSize.height/4

USING_NS_CC;

Scene* WhiteSquareScene::createScene()
{
    auto scene = Scene::create();
    // create方法 内部会调用init方法
    auto layer = WhiteSquareScene::create();
    scene->addChild(layer);
    return scene;
}
#pragma mark - 添加行(开始行、正常的游戏行、结束行)
// 添加 开始行 占屏幕底部的 四分之一,不用显示文字
void WhiteSquareScene::addStartLine()
{
    auto b = Square::createWithArgs(Color3B::YELLOW,Size(winSize.width,kSquareHeight),"",20,Color4B::BLACK);
    // 添加到游戏层,方便管理
    _gameLayer->addChild(b);
    
    // 绑定 其所在的 行号;开始行 是0,正常行 是1、2、3
    b->setLineIndex(0);
}
// 添加 黑白相间的行 (该行中 黑色只有一个,且随机出现)
// 之所以在 添加正常的行时,行号 决定 了该正常行 在屏幕中的Y值
void WhiteSquareScene::addNormalLine(int lineIndex)
{
    // 每添加一个游戏行,用成员变量 记住,当到50行时,就添加结束行
    tempTotalLine++;
    
    Square *b;
    // 正常行中 黑色只有一个,且随机出现
    int blackIndex = rand()%4;
    // 创建4个 小方块
    for (int i=0; i<4; i++)
    {
        Color3B color = blackIndex==i?Color3B::BLACK:Color3B::WHITE;
        // 宽度和高度 均为屏幕的四分之一,减去1是为了 有1个缝隙
        b = Square::createWithArgs(color,Size(kSquareWidth - 1,kSquareHeight - 1),Color4B::BLACK);
        // 添加到游戏层,方便管理
        _gameLayer->addChild(b);
        
        // 重要~~~最下面是起始行，正常行的 行号 从 1 开始 2、3等等
        b->setPosition(i * kSquareWidth,lineIndex * kSquareHeight);
        // 绑定 其所在的 行号
        // 每一个方块 自己记住自己是在 哪一个正常的行里,因为行号 决定 了Square的Y值
        b->setLineIndex(lineIndex);
    }
    
    
}
// 添加 结束行 铺满全屏幕的 绿色的方块,还要显示文字
void WhiteSquareScene::addEndLine()
{
    auto b = EndLine::createWithContext(this);
    // 绑定 其所在的 行号;开始行 是0,正常行 是1、2、3；结束行是 4
    b->setLineIndex(4);
    
    b->setPositionY(b->getLineIndex() * kSquareHeight);
    
    // 添加到游戏层,方便管理
    _gameLayer->addChild(b);
    
    currentEndLine = b;
}

#pragma mark - 初始化
// 初始化
bool WhiteSquareScene::init()
{
    // 父类的初始化
    if ( !Layer::init() ) return false;
    // 重要~~~~用当前 的时间戳 作为 随机数的种子
    srand(time(NULL));
    // 屏幕大小
    winSize = Director::getInstance()->getVisibleSize();
    
    // 用一个Node 包装起来 所有的东东,方便进行整体控制
    _gameLayer = Node::create();
    addChild(_gameLayer);
    
    // 添加一个计时器标签
    timerLabel = Label::create();
    timerLabel->setTextColor(Color4B::BLUE);
    timerLabel->setSystemFontSize(48);
    timerLabel->setPosition(winSize.width/2,winSize.height-100);
    addChild(timerLabel);
    
    // 游戏初始化
    initGame();
    // 添加 监听当前 Layer的侦听器,就开始游戏
    addLayerTouchHandler();
    
    return true;
}
#pragma mark - Layer触摸监听
// 添加 监听当前 Layer的侦听器,就开始游戏
void WhiteSquareScene::addLayerTouchHandler()
{
    // 单点触摸
    auto listener = EventListenerTouchOneByOne::create();
    listener->onTouchBegan = [this](Touch* t,Event* e)
    {
        auto squareArr = Square::getSquareArr();
        Square *s;
        // 遍历 所有的 方块 对象 数组,取出每一个方块
        for (auto it = squareArr->begin(); it!=squareArr->end(); it++)
        {
            // 解引用 取出每一个方块
            s = *it;
            // 如果 方块的行号是1 表示是正常行中的第一行;
            // 并且 正常行的第1行中的某个方块 被触摸了
            // 并且 被点击的还是黑块;开始计时
            if (s->getLineIndex()==1&&
                s->getBoundingBox().containsPoint(t->getLocation()))
            {
                // 黑色
                if (s->getColor()==Color3B::BLACK) {
                    // 第1次点击黑块,且计时器没有开始,那么才要开始计时
                    if (!isTimerRunning) {
                        this->startTimer();
                    }
                    // 黑色被点击之后 变成灰色
                    s->setColor(Color3B::GRAY);
                    // 执行整体下移 动画
                    this->gameLayerMoveDown();
                    
                }else if(s->getColor()==Color3B::GREEN){
                    // 点击了绿色,即 endLine
                    // 整体下移 并且停止计时
                    this->gameLayerMoveDown();
                    this->stopTimer();
                }else{
                    // 变成红色 警示
                    s->setColor(Color3B::RED);

                    // 其他情况 不小心 点击到了 白块;弹出消息框
                    MessageBox("你点错了","点错了");
                    
                    this->initGame();
                }
                // 重要~~~跳转循环,不用再遍历 SquareArr了
                break;
            }
        }
        return false;
    };
    // 向事件分发器注册侦听器,侦听整个Layer
    Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraPHPriority(listener,this);
}
#pragma mark - 游戏控制
// 游戏控制  开始游戏
void WhiteSquareScene::initGame()
{
    //init
    stopTimer();
    // 开始时 清空 用于记录 当前游戏行数的 变量
    tempTotalLine = 0;
    // 是否 正在 显示 结束行
    // 只有 没显示时 才要显示 (只显示一次)
    isEndLineShowing = false;
    
    isTimerRunning = false;
    currentEndLine = NULL;
    timerLabel->setString("0.000000");
    
    // 每次重新开始游戏,清空方块对象数组
    Square::removeAllSquares();
    
    // 添加 开始行
    addStartLine();
    // 添加 正常的游戏行
    addNormalLine(1);
    addNormalLine(2);
    addNormalLine(3);
}
// 游戏层 整体下移
void WhiteSquareScene::gameLayerMoveDown()
{
    // 临时累积 当前 总共添加了多少行 (当到了50行时,添加结束行)
    if (tempTotalLine<50) {
        // 添加 正常行的第4行;由于 起始行号是0 ;正常行号是从1开始;因此 4表示在屏幕最上方 外边
        addNormalLine(4);
    }else if(!isEndLineShowing){
        // 是否 正在 显示 结束行
        // 只有 没显示时 才要显示 (只显示一次)
        addEndLine();
        isEndLineShowing = true;
    }
    
    // 对所有的方块 进行遍历,让所有的方块 执行 下移操作
    auto squareArr = Square::getSquareArr();
    // 使用迭代器 对 对象数组进行 遍历
    for (auto it = squareArr->begin(); it!=squareArr->end(); it++) {
        // 解引用  获得每一个方块;让方块自己执行 moveDown操作
        (*it)->moveDown();
    }
    
    if (currentEndLine!=NULL) {
        // 最后一行的行号是1时,也要下移
        if (currentEndLine->getLineIndex()==1) {
            // Game end
            // 整体下移
            gameLayerMoveDown();
            // 停止计时器
            stopTimer();
        }
    }
}

#pragma mark - 时钟方法
// 计时控制
void WhiteSquareScene::update(float dt)
{
    // 不断地获取时间,计算用时
    long timeInterval = clock()-startTime;
    // 设置计时器标签  微秒转成秒 6次方
    std::string str = StringUtils::format("%g",((double)timeInterval)/1000000);
    timerLabel->setString(str);
}
// 开始计时
void WhiteSquareScene::startTimer()
{
    if (!isTimerRunning) {
        scheduleUpdate();
        // 游戏开始时的时间戳
        startTime = clock();
        isTimerRunning = true;
    }
}
// 停止计时
void WhiteSquareScene::stopTimer()
{
    if(isTimerRunning){
        unscheduleUpdate();
        isTimerRunning = false;
    }
}

方块

//
//  Square.h
//  01_cocos2d-x
//
//  Created by beyond on 14-10-7.
//
//  方块

#ifndef ___1_cocos2d_x__Square__
#define ___1_cocos2d_x__Square__

#include <cocos2d.h>

USING_NS_CC;

class Square:public Sprite {
    
private:
    // 静态数组,每创建一个Square对象,就加到 数组中,static Vector<Square *> *squareArr;
    
    int lineIndex;
    
public:
    // 创建 参数:方块的颜色、尺寸、显示的文字、字体大小、字体颜色
    static Square* createWithArgs(Color3B color,Size size,std::string label,float fontSize,Color4B textColor);
    // 初始化 参数:方块的颜色、尺寸、显示的文字、字体大小、字体颜色
    virtual bool initWithArgs(Color3B color,Color4B textColor);
    
    // 获取对象数组
    static Vector<Square *> *getSquareArr();
    // 遍历对象数组,从数组中 最后一个对象 开始,从父容器中(Layer)移除;并且从数组中移除
    static void removeAllSquares();
    // 移除 (父容器 及 数组中)
    void removeSquare();
    
    // 每一个方块 自己记住自己是在 哪一个正常的行里,因为行号 决定 了Square的Y值
    int getLineIndex();
    // 每一个方块 自己记住自己是在 哪一个正常的行里,因为行号 决定 了Square的Y值
    void setLineIndex(int lineIndex);
    
    // 让每一个方块 执行 向移一行的操作
    void moveDown();
};

#endif /* defined(___1_cocos2d_x__Square__) */

//
//  Square.cpp
//  01_cocos2d-x
//
//  Created by beyond on 14-10-7.
//
//

#include "Square.h"
#define kWinSize Director::getInstance()->getVisibleSize()
#define kSquareWidth kWinSize.width/4
#define kSquareHeight kWinSize.height/4


// 静态数组,Vector<Square*> * Square::squareArr = new Vector<Square*>();

#pragma mark - 生命周期方法
// 参数:方块的颜色、尺寸、显示的文字、字体大小、字体颜色
Square* Square::createWithArgs(Color3B color,Color4B textColor)
{
    auto b = new Square();
    // 调用init方法 初始化
    b->initWithArgs(color,size,label,fontSize,textColor);
    b->autorelease();
    // 每创建一个Square对象,就加到 对象数组中
    squareArr->pushBack(b);
    return b;
}
//  参数:方块的颜色、尺寸、显示的文字、字体大小、字体颜色
bool Square::initWithArgs(Color3B color,Color4B textColor)
{
    // 父类的init
    Sprite::init();
    //
    lineIndex = 0;
    // 尺寸
    setContentSize(size);
    // 锚点左下角
    setAnchorPoint(Point::ZERO);
    // 颜色区域
    setTextureRect(Rect(0,size.width,size.height));
    setColor(color);
    
    // 方块内部 居中显示文字
    auto l = Label::create();
    l->setString(label);
    l->setSystemFontSize(fontSize);
    l->setTextColor(textColor);
    addChild(l);
    l->setPosition(size.width/2,size.height/2);
    
    return true;
}
#pragma mark - 供外界调用
// 对象数组的 getter方法
Vector<Square*> * Square::getSquareArr()
{
    return Square::squareArr;
}
// 遍历对象数组,从父容器中(Layer)移除;并且从数组中移除
void Square::removeAllSquares()
{
    while (getSquareArr()->size()) {
        // 遍历对象数组,从父容器中(Layer)移除;并且从数组中移除
        getSquareArr()->back()->removeFromParent();
        getSquareArr()->popBack();
    }
}
// 移除 (父容器 及 数组中)
void Square::removeSquare()
{
    //    auto c = getColor();
    //    log("Remove Square,color is (%d,%d,%d)",c.r,c.g,c.b);
    
    // 从父容器中 即 Layer 中移除
    removeFromParent();
    // 从对象数组 中移除
    squareArr->eraSEObject(this);
}

// 每一个方块 自己记住自己是在 哪一个正常的行里,因为行号 决定 了Square的Y值
void Square::setLineIndex(int i)
{
    this->lineIndex = i;
}
// 每一个方块 自己记住自己是在 哪一个正常的行里,因为行号 决定 了Square的Y值
int Square::getLineIndex()
{
    return this->lineIndex;
}
// 让每一个方块 执行 向移一行的操作
void Square::moveDown(){
    // 既然方块 自己下移一行,那么 行号就要 减减
    this->lineIndex--;
    

    
    if (getNumberOfRunningActions()!=0) {
        stopAllActions();
    }
    // 下移动作 移动到指定坐标 (也可以用MoveBy)
    MoveTo *to = MoveTo::create(0.1f,Point(getPositionX(),lineIndex * kSquareHeight));
    // 回调动作
    CallFunc *func = CallFunc::create([this](){
        // 如果 出屏幕了,直接 调用 移除方块 (内部会从 父容器和数组中都移除)
        if (lineIndex<0) {
            this->removeSquare();
        }
    });
    // 序列动作
    Sequence *s = Sequence::create(to,func,NULL);
    // 执行动作
    runAction(s);
}

封装的结束行EndLine

//
//  EndLine.h
//  01_cocos2d-x
//
//  Created by beyond on 14-10-7.
//
//

#ifndef ___1_cocos2d_x__EndLine__
#define ___1_cocos2d_x__EndLine__

#include "Square.h"
#include "WhiteSquareScene.h"
// 声明 用到了游戏的主场景
class WhiteSquareScene;
// 结束行 继承自 Square 方块
class EndLine:public Square
{
    
private:
    Size _winSize;
    WhiteSquareScene *_context;
    
public:
    // 静态方法 创建时 需要 使用到主场景 WhiteSquareScene;内部调用init方法
    static EndLine* createWithContext(WhiteSquareScene *context);
    // 在init方法中,实现真正的 初始化
    bool initWithContext(WhiteSquareScene *context);
};


#endif /* defined(___1_cocos2d_x__EndLine__) */

//
//  EndLine.cpp
//  01_cocos2d-x
//
//  Created by beyond on 14-10-7.
//
//

#include "EndLine.h"

// 静态方法 创建时 需要 使用到主场景 WhiteSquareScene;内部调用init方法
EndLine* EndLine::createWithContext(WhiteSquareScene *context)
{
    auto el = new EndLine();
    // 在init方法中,实现真正的 初始化
    el->initWithContext(context);
    el->autorelease();
    // 创建好 方块对象 就要加入到静态对象数组中
    Square::getSquareArr()->pushBack(el);
    return el;
}

// 在init方法中,实现真正的 初始化
bool EndLine::initWithContext(WhiteSquareScene *context)
{
    this->_context = context;
    _winSize = Director::getInstance()->getVisibleSize();
    // 全屏 绿色
    Square::initWithArgs(Color3B::GREEN,_winSize,"游戏结束",50,Color4B::BLACK);
    
    auto label = Label::create();
    label->setString("再玩一次");
    label->setSystemFontSize(50);
    
    label->setPosition(_winSize.width/2,label->getContentSize().height/2+50);
    // 文字红色
    label->setTextColor(Color4B::RED);
    addChild(label);
    // 点击 label 【再玩一次】，重新开始一盘游戏
    auto listener = EventListenerTouchOneByOne::create();
    listener->onTouchBegan = [this](Touch* t,Event * e){
        // 点击了Label
        if (e->getCurrentTarget()->getBoundingBox().containsPoint(t->getLocation()-e->getCurrentTarget()->getParent()->getPosition())) {
            // 开始游戏
            this->_context->initGame();
        }
        return false;
    };
    // 注册监听器
    Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraPHPriority(listener,label);
    return true;
}