1. 创建一个场景类：ScrollViewScene.h和ScrollViewScene.cpp

头文件ScrollViewScene.h的代码如下：

#ifndef ScrollView_ScrollViewScene_h
#define ScrollView_ScrollViewScene_h
#include "cocos2d.h"
USING_NS_CC;
class ScrollViewScene: public Scene
{public:virtual bool init();CREATE_FUNC(ScrollViewScene);void menuCloseCallback(Object* pSender);static ScrollViewScene *sharedSC();
};
#endif

ScrollViewScene.cpp的代码如下：

#include "ScrollViewScene.h"
#include "ScrollView.h"
#include "ScorllMainLayer01.h"
#include "ScorllMainLayer02.h"
#include "ScorllMainLayer03.h"
#include "ScorllMainLayer04.h"
#include "ScorllMainLayer05.h"
#include "ScorllMainLayer06.h"
#include "ScorllMainLayer07.h"
#include "HelloWorldScene.h"//声明静态变量
static ScrollView *scrollView;
static ScrollViewScene *sc;ScrollViewScene *ScrollViewScene::sharedSC(){if(sc != NULL){return sc;}return  NULL;
}bool ScrollViewScene::init()
{sc = this;bool bRet = false;do {CC_BREAK_IF(!CCScene::init());scrollView = ScrollView::create();//制作7个可以滑动的屏幕（每一个屏幕都有4个关卡）for (int i=0; i<7; ++i) {if (0==i) {ScorllMainLayer01 *layer = ScorllMainLayer01::create();layer->setTag(i);scrollView->addPage(layer);}else if(1==i){ScorllMainLayer02 *layer = ScorllMainLayer02::create();layer->setTag(i);scrollView->addPage(layer);}else if(2==i){ScorllMainLayer03 *layer = ScorllMainLayer03::create();layer->setTag(i);scrollView->addPage(layer);}else if(3==i){ScorllMainLayer04 *layer = ScorllMainLayer04::create();layer->setTag(i);scrollView->addPage(layer);}else if(4==i){ScorllMainLayer05 *layer = ScorllMainLayer05::create();layer->setTag(i);scrollView->addPage(layer);}else if(5==i){ScorllMainLayer06 *layer = ScorllMainLayer06::create();layer->setTag(i);scrollView->addPage(layer);}else if(6==i){ScorllMainLayer07 *layer = ScorllMainLayer07::create();layer->setTag(i);scrollView->addPage(layer);}}Size size = CCDirector::getInstance()->getWinSize();//将图片加载在缓存中SpriteFrameCache *cache = SpriteFrameCache::getInstance();cache->addSpriteFramesWithFile("level_scene.plist");//设置背景精灵Sprite* spritebg =Sprite::createWithSpriteFrameName("list-bg.png");spritebg->setPosition(Point(size.width*0.5+100,size.height*0.5));addChild(spritebg);//下面的7个星星，第一个为点中状态Sprite* sprite1 =Sprite::createWithSpriteFrameName("dots-1.png");sprite1->setPosition(Point(size.width*0.5-150,size.height*0.5-200));addChild(sprite1);Sprite* sprite2 =Sprite::createWithSpriteFrameName("dots-1.png");sprite2->setPosition(Point(size.width*0.5-100,size.height*0.5-200));addChild(sprite2);Sprite* sprite3 =Sprite::createWithSpriteFrameName("dots-1.png");sprite3->setPosition(Point(size.width*0.5-50,size.height*0.5-200));addChild(sprite3);Sprite* sprite4 =Sprite::createWithSpriteFrameName("dots-1.png");sprite4->setPosition(Point(size.width*0.5,size.height*0.5-200));addChild(sprite4);Sprite* sprite5 =Sprite::createWithSpriteFrameName("dots-1.png");sprite5->setPosition(Point(size.width*0.5+50,size.height*0.5-200));addChild(sprite5);Sprite* sprite6 =Sprite::createWithSpriteFrameName("dots-1.png");sprite6->setPosition(Point(size.width*0.5+100,size.height*0.5-200));addChild(sprite6);Sprite* sprite7 =Sprite::createWithSpriteFrameName("dots-1.png");sprite7->setPosition(Point(size.width*0.5+150,size.height*0.5-200));addChild(sprite7);Sprite* sprite =Sprite::createWithSpriteFrameName("dots-2.png");sprite->setPosition(Point(size.width*0.5-150,size.height*0.5-200));sprite->setTag(888);addChild(sprite);//制作一个菜单，点击之后返回游戏开始界面MenuItemImage *closeItem = MenuItemImage::create();closeItem->setNormalSpriteFrame(cache->spriteFrameByName("back-1.png"));closeItem->setSelectedSpriteFrame(cache->spriteFrameByName("back-2.png"));closeItem->initWithTarget(this, menu_selector(ScrollViewScene::menuCloseCallback));closeItem->setPosition(Point(80,80));auto menu = Menu::create(closeItem, NULL);menu->setPosition(Point::ZERO);this->addChild(menu, 1);this->addChild(scrollView);bRet = true;} while (0);return bRet;
}void ScrollViewScene::menuCloseCallback(Object* pSender){CCDirector::getInstance()->replaceScene(CCTransitionFade::create(0.5, HelloWorld::createScene()));
}

我们在init函数中，制作7个可以滑动的屏幕，然后加载图片到缓存中，紧接着制作了背景精灵，还有下面的7个星星以及一个返回菜单。代码已经注释得很详细了。

2. 场景工具类：实现左右滑动的效果

ScrollView.h的代码如下：

#ifndef ScrollView_ScrollView_h
#define ScrollView_ScrollView_h#include "cocos2d.h"USING_NS_CC;// 屏幕尺寸
const float WINDOW_WIDTH = 1136.0f;
const float WINDOW_HEIGHT = 640.0f;// 触摸误差
const int TOUCH_DELTA = 20;class ScrollView: public Layer
{
private:// 按下点Point m_TouchDownPoint;// 抬起点 配合使用判断是否为点击事件Point m_TouchUpPoint;// 当前触摸点Point m_TouchCurPoint;private:// 总页数int m_Page;// 当前显示页int m_CurPage;private:// 存储所有页层Array *m_PageLayer;private:// 跳转页void goToPage();public:ScrollView();~ScrollView();virtual bool init();CREATE_FUNC(ScrollView);
public:// 初始化相关//virtual void onEnter();//virtual void onExit();// 触摸事件相关bool onTouchBegan(Touch *pTouch, Event  *pEvent);void onTouchMoved(Touch *pTouch, Event  *pEvent);void onTouchEnded(Touch *pTouch, Event  *pEvent);void onTouchCancelled(Touch *pTouch, Event  *pEvent);public:// 添加页void addPage(Layer *pPageLayer);//公开方法跳转页面void gotoUserChoosePage(int _isToOrBack);
};#endif

ScrollView.cpp的代码如下：

#include "ScrollView.h"
#include "ScrollViewScene.h"ScrollView::ScrollView()
{m_Page = 0;m_CurPage = 0;m_PageLayer = CCArray::createWithCapacity(5);m_PageLayer->retain();init();
}ScrollView::~ScrollView()
{m_PageLayer->removeAllObjects();m_PageLayer->release();
}bool ScrollView::init()
{bool bRet = false;do {CC_BREAK_IF(!CCLayer::init());bRet = true;} while (0);setTouchEnabled(true);//设置为单点响应setTouchMode(Touch::DispatchMode::ONE_BY_ONE);//3.0新的触摸机制auto myListener = EventListenerTouchOneByOne::create();myListener->onTouchBegan = CC_CALLBACK_2(ScrollView::onTouchBegan, this);myListener->onTouchMoved = CC_CALLBACK_2(ScrollView::onTouchMoved, this);myListener->onTouchEnded = CC_CALLBACK_2(ScrollView::onTouchEnded, this);myListener->onTouchCancelled = CC_CALLBACK_2(ScrollView::onTouchCancelled, this);return bRet;
}void ScrollView::goToPage()
{MoveTo *moveTo = MoveTo::create(0.2f, Point::Point(-m_CurPage * WINDOW_WIDTH, 0));this->runAction(moveTo);
}void ScrollView::addPage(cocos2d::Layer *pPageLayer)
{if (pPageLayer) {// 设置成一页大小pPageLayer->setContentSize(Size::Size(WINDOW_WIDTH, WINDOW_HEIGHT));pPageLayer->setPosition(Point(WINDOW_WIDTH * m_Page, 0));this->addChild(pPageLayer);// 添加到页m_PageLayer->addObject(pPageLayer);m_Page = m_PageLayer->count();}
}//公开方法进行页面跳转
void ScrollView::gotoUserChoosePage(int _isToOrBack){if (0 == _isToOrBack) {//上一页if (m_CurPage > 0) {--m_CurPage;}}else if(1 == _isToOrBack){//下一页if (m_CurPage < (m_Page - 1)) {++m_CurPage;}}// 执行跳转动画goToPage();
}bool ScrollView::onTouchBegan(Touch *pTouch, Event  *pEvent){m_TouchDownPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());m_TouchCurPoint = m_TouchDownPoint;return true;
}void ScrollView::onTouchMoved(Touch *pTouch, Event  *pEvent){// 移动Point touchPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());Point posPoint = Point::Point(getPositionX() + touchPoint.x - m_TouchCurPoint.x, getPositionY());setPosition(posPoint);m_TouchCurPoint = touchPoint;
}void ScrollView::onTouchEnded(Touch *pTouch, Event  *pEvent){m_TouchUpPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());// 计算按下和抬起的偏移量float offset = (m_TouchUpPoint.x - m_TouchDownPoint.x) * (m_TouchUpPoint.x - m_TouchDownPoint.x) + (m_TouchUpPoint.y - m_TouchDownPoint.y) * (m_TouchUpPoint.y - m_TouchDownPoint.y);if (offset < (TOUCH_DELTA * TOUCH_DELTA)) {
}else {// 滑动结束int offset = getPositionX() - m_CurPage * (-WINDOW_WIDTH);//if (offset > WINDOW_WIDTH / 2) {if (offset > 50) {// 上一页if (m_CurPage > 0) {--m_CurPage;Sprite *sprite =  (Sprite *)ScrollViewScene::sharedSC()->getChildByTag(888);sprite->setPosition(Point(sprite->getPositionX()-50,sprite->getPositionY()));}}//else if (offset < -WINDOW_WIDTH / 2) {else if (offset < -50) {// 下一页if (m_CurPage < (m_Page - 1)) {++m_CurPage;Sprite *sprite =  (Sprite *)ScrollViewScene::sharedSC()->getChildByTag(888);sprite->setPosition(Point(sprite->getPositionX()+50,sprite->getPositionY()));}}// 执行跳转动画goToPage();}
}void ScrollView::onTouchCancelled(Touch *pTouch, Event  *pEvent){}

3. 建立不同的场景

接下来我们建立不同的场景，这样就能实现场景的切换和关卡的选择了。之前我们说过场景有7个，下面我们详细介绍一个，其他六个是类似的。

ScrollMainLayer01.h的代码如下：

#ifndef __ScorllMainLayer01__
#define __ScorllMainLayer01__
#include <iostream>#include "cocos2d.h"
USING_NS_CC;class ScorllMainLayer01: public Layer
{
public:ScorllMainLayer01();~ScorllMainLayer01();virtual bool init();CREATE_FUNC(ScorllMainLayer01);void menuCloseCallback01(Object* pSender);void menuCloseCallback02(Object* pSender);void menuCloseCallback03(Object* pSender);void menuCloseCallback04(Object* pSender);};
#endif

#include "ScorllMainLayer01.h"ScorllMainLayer01::ScorllMainLayer01()
{
}ScorllMainLayer01::~ScorllMainLayer01()
{
}bool ScorllMainLayer01::init()
{bool bRet = false;do {Size size = CCDirector::getInstance()->getWinSize();//初始化信息SpriteFrameCache *cache = SpriteFrameCache::getInstance();cache->addSpriteFramesWithFile("level_image.plist");//建立四个具体的游戏菜单MenuItemImage *closeItem01 = MenuItemImage::create();closeItem01->setNormalSpriteFrame(cache->spriteFrameByName("shutdown-pc-cover.png"));closeItem01->setSelectedSpriteFrame(cache->spriteFrameByName("shutdown-pc-cover.png"));closeItem01->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback01));closeItem01->setPosition(Point(size.width*0.5-150,size.height*0.5+200));MenuItemImage *closeItem02 = MenuItemImage::create();closeItem02->setNormalSpriteFrame(cache->spriteFrameByName("clickon-the-100times-cover.png"));closeItem02->setSelectedSpriteFrame(cache->spriteFrameByName("clickon-the-100times-cover.png"));closeItem02->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback02));closeItem02->setPosition(Point(size.width*0.5+150,size.height*0.5+200));MenuItemImage *closeItem03 = MenuItemImage::create();closeItem03->setNormalSpriteFrame(cache->spriteFrameByName("through-the-bridge-cover.png"));closeItem03->setSelectedSpriteFrame(cache->spriteFrameByName("through-the-bridge-cover.png"));closeItem03->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback03));closeItem03->setPosition(Point(size.width*0.5-150,size.height*0.5));MenuItemImage *closeItem04 = MenuItemImage::create();closeItem04->setNormalSpriteFrame(cache->spriteFrameByName("click-me-cover.png"));closeItem04->setSelectedSpriteFrame(cache->spriteFrameByName("click-me-cover.png"));closeItem04->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback04));closeItem04->setPosition(Point(size.width*0.5+150,size.height*0.5));auto menu = Menu::create(closeItem01,closeItem02,closeItem03,closeItem04, NULL);menu->setPosition(Point::ZERO);this->addChild(menu, 1);bRet = true;} while (0);return bRet;
}//分别进入游戏
void ScorllMainLayer01::menuCloseCallback01(Object* pSender){log("SS");
}
void ScorllMainLayer01::menuCloseCallback02(Object* pSender){}
void ScorllMainLayer01::menuCloseCallback03(Object* pSender){}
void ScorllMainLayer01::menuCloseCallback04(Object* pSender){}

再建立六个这样的场景，我们的关卡选择画面就实现了。

【史上最坑爹的游戏】002 关卡选择画面的实现相关推荐

最新cocos2d-x 3.0博客教学小游戏[史上最坑爹的游戏] 002第一关:关闭卡死的电脑
昨天做了主画面的选择,今天做第一关的关闭卡死的电脑,这个小游戏,这个游戏是很多的小游戏组合起来的,所以我们逐个击破,第一个游戏到底要如何做呢? 看看今天实现第一关的效果这个第一个游戏不算太难首先我 ...
计算机2 游戏攻略,史上最坑爹的游戏2全关卡游戏攻略大全
史上最坑爹的游戏2全关卡游戏攻略大全, 史上最坑爹的游戏2再次重出江湖,注意这一次是全新的第二部哦,相对于前作来说,这款新作的可玩度再次有所提升,绝对是2014最搞笑的单机游戏.下面为大家带来游戏全 ...
【史上最坑爹的游戏】001 游戏介绍及开始页面的实现
最近史上最坑爹的游戏挺风靡的,而且又更新了2,本系列文章将来一步步把这个游戏做出来. 1. 游戏介绍相信很多人都玩过这款游戏,如果你没玩过的话,建议你下载一个试试,那么学习此系列文章,你将更有fee ...
最新cocos2d-x 3.0博客教学小游戏[史上最坑爹的游戏] 004第三关:让坦克过桥
写在前面的话 ,最近的时间比较紧张,没有多余的时间来写博客,也没有什么实际来写代码,通过写这些博客我发现了一些问题,游戏中用到的技术都是一些基本的很平常的技术,大家只要努力的学习,就一定能够学会的,做 ...
最新cocos2d-x 3.0博客教学小游戏[史上最坑爹的游戏] 001主画面以及关卡选择画面的制作
cocs2d的开发环境我相信大家都能搭建好了,下面我们直接的进入正题,开始做我们的小游戏,如果对搭建环境还有不懂的童鞋请看我写的这篇博文 cocos2d-x 3.0游戏开发xcode5帅印博客教学 0 ...
最新cocos2d-x 3.0博客教学小游戏[史上最坑爹的游戏] 003第二关:点击绿色按钮100下
昨天做了［关闭卡死的电脑］这个关卡今天要做的是点击绿色按钮100下,这游戏真的坑爹,看你能不能玩过关,哈哈哈. 这关做起来比较简单游戏逻辑也比较简单,直接上第二关的源代码,注意最后面又当天的源码下载 ...
坑爹大冒险html5游戏在线玩,《史上最坑爹的大冒险》图文全通关攻略
<史上最坑爹的大冒险>是一款趣味解谜小游戏,目前已经登录了iOS平台.让我们一起来解密这款游戏吧. 这是一款很虐心的游戏,总共只能点击游戏150下.超过就需要重来.或者是去appStore ...
计算机游戏第72关,史上最难的游戏第72关第72关通关攻略
史上最难的游戏第72关第72关通关攻略 2014-04-03 来源: 996手游网编辑: 帽纸 () 史上最难的游戏是以暴走漫画为游戏剧情及背景,让无数小伙伴们抓狂的游戏.全新的关卡又更新了,为了 ...
最难游戏2计算机5关,史上最牛的游戏2攻略史上最牛的游戏1~5关攻略
史上最牛得的游戏是一系列有趣和激动人心的小游戏,测量您的反应时间(豪秒)和分辨力!!听名字就知道不简单,小编这里给大家奉上史上最牛的游戏1~5关的攻略史上最牛的游戏2攻略第1关第一关,其实就是挠脚 ...

【史上最坑爹的游戏】002 关卡选择画面的实现

1. 创建一个场景类：ScrollViewScene.h和ScrollViewScene.cpp

2. 场景工具类：实现左右滑动的效果

3. 建立不同的场景

【史上最坑爹的游戏】002 关卡选择画面的实现相关推荐

最新文章

热门文章