cocos2d-x的初步学习二十八之爱消除一

这篇文章中，我们将模仿某个游戏来实现，首页我们做首界面，这里都是一些UI元素的布局，其中会涉及到一些动画，比如贝塞尔曲线，还有cctableview来显示我们的得分，做个排行榜，OK，下面我直接上代码了：

HelloWorldScene.h

public:
    // Method 'init' in cocos2d-x returns bool, instead of 'id' in cocos2d-iphone (an object pointer)
    virtual bool init();

    // there's no 'id' in cpp, so we recommend to return the class instance pointer
    static cocos2d::CCScene* scene();
    
    // preprocessor macro for "static create()" constructor ( node() deprecated )
    CREATE_FUNC(HelloWorld);
    
    
    
private:
    
    void initData(void);
    
    void initUI(void);
    
    void initSounds(void);
    
    void addBaoshi(void);
    
    cocos2d::CCProgressTimer *levelProgress;
    cocos2d::CCLabelTTF *levelLabel;
    cocos2d::CCLabelTTF *levelbfbLabel;

    cocos2d::CCLabelTTF *timeLabel;
    
    cocos2d::CCLayerColor *pauselayer;
    
    cocos2d::CCSprite *sharebgSprite;
    
    cocos2d::extension::CCTableView *phbTableView;
    
    void buyYeZi(void);
    
    void shared(void);
    
    void startGame(void);
    
    cocos2d::CCArray *yeziArray;

    void removeSprite(void);
    
    void createPauseLayer(void);
    
    void pauseButtonPressed(void);
    
    bool lock;
    
    void rotateAnimation(void);
    
    float rotate;

HelloWorldScene.cpp

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }

    
    this->initData();
    
    this->initUI();
    
    this->initSounds();
    
    this->createPauseLayer();
    
    return true;
}


void HelloWorld::initData()
{

   
    CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("textures.plist");

    yeziArray=CCArray::create();
    
    yeziArray->retain();
    
    
    dataArray=CCArray::create();
    dataArray->retain();
    
    

    
}


void HelloWorld::initSounds()
{


    
    SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("bg1.mp3");
    
    SimpleAudioEngine::sharedEngine()->playBackgroundMusic("bg1.mp3", true);
    

}


void HelloWorld::initUI()
{

    
    //背景
    CCSprite *bgSprite=CCSprite::create("startbg.png");
    bgSprite->setAnchorPoint(ccp(0.5, 0.5));

    bgSprite->setPosition(ccp(wSize.width/2, wSize.height/2));
    this->addChild(bgSprite, 1);
    

    //宝石icon
    CCSprite *baoshiiconSprite=CCSprite::createWithSpriteFrameName("ruby.png");

    baoshiiconSprite->setAnchorPoint(ccp(0, 0));
    baoshiiconSprite->setPosition(ccp(50, wSize.height-200));
    
    this->addChild(baoshiiconSprite, 1);

    //宝石数量
    CCLabelTTF *bsnumsLabel=CCLabelTTF::create("100", "MarkerFelt-Thin", 35);

    bsnumsLabel->setAnchorPoint(ccp(0, 0));
    bsnumsLabel->setPosition(ccp(baoshiiconSprite->getPosition().x+baoshiiconSprite->getContentSize().width+25, wSize.height-200+15));
    this->addChild(bsnumsLabel, 1);
    
    
    //购买菜单
    CCSprite *addSprite=CCSprite::createWithSpriteFrameName("add.png");
    
    CCMenuItemSprite *addItem = CCMenuItemSprite::create(addSprite, addSprite, this, menu_selector(HelloWorld::addBaoshi));
    addItem->setAnchorPoint(ccp(0, 0));
    addItem->setPosition(ccp(bsnumsLabel->getPosition().x+bsnumsLabel->getContentSize().width+40, bsnumsLabel->getPosition().y-10));
    
    CCMenu* pMenu = CCMenu::create(addItem, NULL);
    pMenu->setPosition( CCPointZero );
    this->addChild(pMenu, 1);
    
    //等级进度条
    CCSprite *progressbgSprite=CCSprite::createWithSpriteFrameName("exp_bar_out.png");
    progressbgSprite->setAnchorPoint(ccp(0, 0));
    progressbgSprite->setPosition(ccp(440, wSize.height-190));
    
    this->addChild(progressbgSprite, 1);
    
    CCSprite *progressSprite=CCSprite::createWithSpriteFrameName("exp_bar_in.png");
    
    levelProgress=CCProgressTimer::create(progressSprite);
    
    levelProgress->setType(kCCProgressTimerTypeBar);
    levelProgress->setAnchorPoint(ccp(0, 0));
    levelProgress->setPosition(ccp(440, wSize.height-182));
    
    //进度动画运动方向，可以多试几个值，看看效果
    levelProgress->setMidpoint(ccp(0, 0));
    
    //进度条宽高变化
    levelProgress->setBarChangeRate(ccp(1, 0));
    
    levelProgress->setPercentage(67);
    
    this->addChild(levelProgress, 1);
    

    CCSprite *starSprite=CCSprite::createWithSpriteFrameName("exp_star.png");
    
    starSprite->setAnchorPoint(ccp(0, 0));
    starSprite->setPosition(ccp(410, wSize.height-195));
    
    this->addChild(starSprite, 1);

    //等级
    levelLabel=CCLabelTTF::create("2", "MarkerFelt-Thin", 35);
    
    levelLabel->setAnchorPoint(ccp(0, 0));
    levelLabel->setPosition(ccp(starSprite->getPosition().x+24, starSprite->getPosition().y+10));
    levelLabel->setColor(ccc3(0.5, 0.5, 0.5));
    this->addChild(levelLabel,1);
    
    //百分比
    levelbfbLabel=CCLabelTTF::create("67%", "MarkerFelt-Thin", 30);
    
    levelbfbLabel->setAnchorPoint(ccp(0, 0));
    levelbfbLabel->setPosition(ccp(starSprite->getPosition().x+75, starSprite->getPosition().y+12));
    this->addChild(levelbfbLabel,1);
    
    
//    CCLabelTTF *namebLabel=CCLabelTTF::create("王子大人", "MarkerFelt-Thin", 55);
//    
//    namebLabel->setAnchorPoint(ccp(0.5, 0.5));
//    namebLabel->setPosition(ccp(wSize.width/2,140));
//    this->addChild(namebLabel,1);
    
    
    //开始菜单
    CCSprite *startSprite=CCSprite::createWithSpriteFrameName("button_play.png");
    CCMenuItemSprite *startItem = CCMenuItemSprite::create(startSprite, startSprite, this, menu_selector(HelloWorld::startGame));
    startItem->setPosition(ccp(wSize.width/2,100));
    
    CCMenu* startMenu = CCMenu::create(startItem, NULL);
    startMenu->setPosition(CCPointZero);
    this->addChild(startMenu, 1);
    
    //能量，满格5个
    for (int i=0; i<5; i++)
    {
        
        //空的
        CCSprite *energySprite=CCSprite::createWithSpriteFrameName("energy_empty.png");
        
        energySprite->setAnchorPoint(ccp(0, 0));
        energySprite->setPosition(ccp(55+(3+energySprite->getContentSize().width)*i, wSize.height-288));
        
        this->addChild(energySprite, 1,100+i);
        
        //满的
        CCSprite *energySprite2=CCSprite::createWithSpriteFrameName("energy_full.png");
        
        energySprite2->setAnchorPoint(ccp(0, 0));
        energySprite2->setPosition(ccp(55+(3+energySprite2->getContentSize().width)*i, wSize.height-288));
        
        this->addChild(energySprite2, 1,200+i);
    
        yeziArray->addObject(CCString::createWithFormat("%d",200+i));
    
    }
    
    //button_share_small.png
    //energy_empty.png
    
    //百分比
    timeLabel=CCLabelTTF::create("10:00", "MarkerFelt-Thin", 30);
    
    timeLabel->setAnchorPoint(ccp(0, 0));
    timeLabel->setPosition(ccp(355, wSize.height-280));
    timeLabel->setColor(ccYELLOW);
    this->addChild(timeLabel,1);
    
    
    //购买叶子
    CCSprite *addSprite2=CCSprite::createWithSpriteFrameName("add.png");
    CCMenuItemSprite *yeziItem = CCMenuItemSprite::create(addSprite2, addSprite2, this, menu_selector(HelloWorld::buyYeZi));
    yeziItem->setAnchorPoint(ccp(0, 0));
    yeziItem->setPosition(ccp(timeLabel->getPosition().x+timeLabel->getContentSize().width, timeLabel->getPosition().y-18));
    
    CCMenu* yeziMenu = CCMenu::create(yeziItem, NULL);
    yeziMenu->setPosition( CCPointZero );
    this->addChild(yeziMenu, 1);
    
    
    //分享背景动画
    sharebgSprite=CCSprite::createWithSpriteFrameName("glow.png");
    
    sharebgSprite->setAnchorPoint(ccp(0.5,0.5));
    sharebgSprite->setPosition(ccp(yeziItem->getPosition().x+yeziItem->getContentSize().width+42, yeziItem->getPosition().y-18+50));
    sharebgSprite->setScale(0.18);
    this->addChild(sharebgSprite, 1);
    
    
    //分享
    CCSprite *shareSprite=CCSprite::createWithSpriteFrameName("button_share_small.png");
    CCMenuItemSprite *shareItem = CCMenuItemSprite::create(shareSprite, shareSprite, this, menu_selector(HelloWorld::shared));
    shareItem->setAnchorPoint(ccp(0, 0));
    shareItem->setPosition(ccp(yeziItem->getPosition().x+yeziItem->getContentSize().width, yeziItem->getPosition().y+6));
    
    CCMenu* shareMenu = CCMenu::create(shareItem, NULL);
    shareMenu->setPosition( CCPointZero );
    this->addChild(shareMenu, 1);
    
    
}


//购买宝石
void HelloWorld::addBaoshi()
{

    
    SimpleAudioEngine::sharedEngine()->playEffect("buttonclick.mp3");


}


//购买叶子
void HelloWorld::buyYeZi()
{


    SimpleAudioEngine::sharedEngine()->playEffect("buttonclick.mp3");


    

}


//分享
void HelloWorld::shared()
{
    
    
   
    SimpleAudioEngine::sharedEngine()->playEffect("buttonclick.mp3");
    
}


//开始
void HelloWorld::startGame()
{
    
    
    if (yeziArray->count()==0)
    {
        
        
        pauselayer->setVisible(true);
        
        
        return;
        
        
    }
    
    
    if (lock==false)
    {
        
        lock=true;
        

        SimpleAudioEngine::sharedEngine()->playEffect("buttonclick.mp3");
        
        
        CCString *numberString=(CCString *)yeziArray->lastObject();
        
        CCSprite *sprite=(CCSprite *)this->getChildByTag(numberString->intValue());
        
        ccBezierConfig bezierConfig;
        bezierConfig.controlPoint_1=ccp(sprite->getPosition().x, sprite->getPosition().y);
        bezierConfig.controlPoint_2=ccp(wSize.width+200, wSize.height/2);
        bezierConfig.endPosition=ccp(wSize.width/2-15,80);
        
        CCBezierTo *bezier=CCBezierTo::create(1.5f, bezierConfig);
        
        
        CCSequence *seq=CCSequence::create(bezier,CCDelayTime::create(0.5f),CCCallFunc::create(this,callfunc_selector(HelloWorld::removeSprite)),NULL);
        
        sprite->runAction(seq);
        

    }

    
    
}


void HelloWorld::removeSprite()
{

    CCString *numberString=(CCString *)yeziArray->lastObject();
    
    CCSprite *sprite=(CCSprite *)this->getChildByTag(numberString->intValue());

    yeziArray->removeLastObject();
    
    sprite->removeFromParentAndCleanup(true);
    
    
    lock=false;
    
    
    dataIndex++;
    
    
    CCString *infoString=CCString::createWithFormat("%s",this->getSystemTime()->getCString());
    
    //CCLOG("%s",infoString->getCString());
    
    
    dataArray->addObject(infoString);
    
    
    phbTableView->reloadData();
    

//    //存储
//    CCUserDefault::sharedUserDefault()->setStringForKey(CCString::createWithFormat("data%d",dataIndex)->getCString(), infoString->getCString());
//    
//    //提交
//    CCUserDefault::sharedUserDefault()->flush();

    
    
}

//创建暂停界面
void HelloWorld::createPauseLayer()
{
    
    
    pauselayer=CCLayerColor::create(ccc4(255, 255, 255, 0), 479, 520);
    
    pauselayer->setAnchorPoint(ccp(0, 0));
    pauselayer->setPosition(ccp(wSize.width/2-pauselayer->getContentSize().width/2, wSize.height/2-pauselayer->getContentSize().height/2));
    
    
    this->addChild(pauselayer, 1);

    
    CCSprite *bgSprite=CCSprite::create("bg_pause.png");
    
    bgSprite->setPosition(ccp(pauselayer->getContentSize().width/2, pauselayer->getContentSize().height/2));
    
    pauselayer->addChild(bgSprite);
    
    
    CCLabelTTF *contentLabel=CCLabelTTF::create("你没有足够的叶子，你可以从叶子商店里购买，或者等几分钟。", "MarkerFelt-Thin",32);
    contentLabel->setPosition(ccp(pauselayer->getContentSize().width/2, pauselayer->getContentSize().height/2));

    contentLabel->setDimensions(CCSize(pauselayer->getContentSize().width-40,200));
    //横向对齐方式
    contentLabel->setHorizontalAlignment(kCCTextAlignmentLeft);

    contentLabel->setColor(ccWHITE);
    pauselayer->addChild(contentLabel);

    
    CCSprite *sureSprite=CCSprite::createWithSpriteFrameName("button_ok.png");
    CCMenuItemSprite *sureItem = CCMenuItemSprite::create(sureSprite, sureSprite, this, menu_selector(HelloWorld::pauseButtonPressed));

    sureItem->setPosition(ccp(pauselayer->getContentSize().width/2, pauselayer->getContentSize().height/2-160));
    
    CCMenu* sureMenu = CCMenu::create(sureItem, NULL);
    sureMenu->setPosition(CCPointZero);
    pauselayer->addChild(sureMenu, 1);

    
    pauselayer->setVisible(false);

    
    
    
    
}


//ok按钮
void HelloWorld::pauseButtonPressed()
{

    
    pauselayer->setVisible(false);

    

}

上面中，我们进行了界面的布局，没什么复杂的东西，主要是叶子的逻辑及动画，满状态的时候是5片叶子，我们现在点开始，然后就减少一片叶子，并且叶子做一个贝塞尔曲线的动画，当叶子都没有的时候，我们提示一个对话框界面，告诉我们没有叶子了。

效果如下

    

~~然后是分享后面的背景图旋转动画，

在.h中

void rotateAnimation(void);

在.cpp中定义一个刷新函数

 //刷新
 this->schedule(schedule_selector(HelloWorld::rotateAnimation), 0.1);

//旋转动画
void HelloWorld::rotateAnimation()
{

    
    rotate=rotate+10;
    
    sharebgSprite->setRotation(rotate);

}

我们设定每隔0.1秒增加10度，当然这个你可以自己设定，然后我们就可以看见分享背景sprite旋转了，(*^__^*) ……

OK，，接下来，我们要加入个排行榜的界面，我们利用cctbaleview，前面的文章中，我已经简单介绍过cctableview了，下面我们直接上代码

在.h中我们增加cctableview的几个虚函数

//CCTableViewDelegate继承自CCScrollViewDelegate
    virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view);
    
    virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view);
    
    //点击哪个cell
    virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);
    //每个cell的size
    virtual cocos2d::CCSize cellSizeForTable(cocos2d::extension::CCTableView *table);
    //生成cell
    virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);
    //cell的数量
    virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);

然后在.cpp中具体去实现它们

//cell数量
unsigned int HelloWorld::numberOfCellsInTableView(cocos2d::extension::CCTableView *table)
{


    
    return dataArray->count();



}


//每行cell
CCTableViewCell* HelloWorld::tableCellAtIndex(CCTableView *table, unsigned int idx)
{


    CCTableViewCell *cell=table->dequeueCell();
    
    
    if (!cell) {
        
        cell = new CCTableViewCell();
        cell->autorelease();


        
    }

    
    cell->removeAllChildrenWithCleanup(true);
    
    
    //金银铜
    if (idx==0)
    {
        
        CCSprite *pSprite = CCSprite::createWithSpriteFrameName("rank1.png");
        pSprite->setPosition(ccp(40, 60));
        
        cell->addChild(pSprite);

        
    }
    else if (idx==1)
    {
        
        CCSprite *pSprite = CCSprite::createWithSpriteFrameName("rank2.png");
        pSprite->setPosition(ccp(40, 60));
        pSprite->setTag(456);
        cell->addChild(pSprite);
    }
    else if (idx==2)
    {
        
        CCSprite *pSprite = CCSprite::createWithSpriteFrameName("rank3.png");
        pSprite->setPosition(ccp(40, 60));

        cell->addChild(pSprite);
     
        
    }
    

    int touxiangindex=arc4random()%3+1;
    
    CCString *nameString=CCString::createWithFormat("spin%d.png",touxiangindex);
    
    CCSprite *txSprite = CCSprite::createWithSpriteFrameName(nameString->getCString());
    txSprite->setPosition(ccp(130, 60));
    txSprite->setScale(0.7);
    txSprite->setTag(789);
    cell->addChild(txSprite);
    
   
    CCString *fenshu=(CCString *)dataArray->objectAtIndex(idx);
    
    CCLabelTTF *fenshuLabel = CCLabelTTF::create(fenshu->getCString(), "Arial", 36.0);
    fenshuLabel->setPosition(ccp(360, 60));
    fenshuLabel->setTag(123);
    fenshuLabel->setColor(ccYELLOW);
    cell->addChild(fenshuLabel);
    
    
    return cell;





}


CCSize HelloWorld::cellSizeForTable(CCTableView *table)
{
    
    
    
    return CCSizeMake(table->getContentSize().width, 120);
    
    
}




void HelloWorld::tableCellTouched(CCTableView *table, CCTableViewCell *cell)
{
    
    
    
    CCLOG("%d",cell->getIdx());
    
    
    
    
    
    
}


void HelloWorld::scrollViewDidScroll(CCScrollView *view)
{
    
    
    
    
    
}

void HelloWorld::scrollViewDidZoom(CCScrollView *view)
{
    
    
    
    
    
    
}

OK，就这么简单，在这里，我们还要获取系统的时间，cocos2dx中获取时间的函数如下

//得到系统时间
CCString* HelloWorld::getSystemTime()
{

    
    struct tm *tm;
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)
    //win32平台
    time_t timep;
    time(&timep);
    tm = localtime(&timep);
#else
    //android、ios平台
    
    struct cc_timeval now;
    CCTime::gettimeofdayCocos2d(&now, NULL);
    tm = localtime(&now.tv_sec);
#endif
    int year = tm->tm_year + 1900;
    int month = tm->tm_mon + 1;
    int day = tm->tm_mday;
    int hour=tm->tm_hour;
    int min=tm->tm_min;

    
    CCString *string=CCString::createWithFormat("%d-%d-%d %d:%d",year,month,day,hour,min);
    
    
    return string;

}

OK，，我们看下效果图

OK~~~~~~~~~~~(*^__^*) …… 还有10分钟的倒计时，不知道大家有什么好的方法，我的想法应该是跟系统的时间去关联，这样进入后台或是关闭程序，时间还是继续进行的，通过获取系统的时间，然后某个算法来实现。。。