【2048強勢來襲】第一期:搭建上下左右手勢識別的框架

legendof1991發表於2014-04-15

最近有一款2048的遊戲火爆了,我們們也來試試。

本遊戲使用的是cocos2d-x 3.0alpha1版本。

本篇文章將來講解2048遊戲中的手勢識別:上下左右。


1. 建立“TZFE”專案(2048數字英文單詞的開頭)


(1)在cocos2d-x 3.0alpha1版本中,建立一個“TZFE”專案,如果不懂的話,請參考這篇文章:http://blog.csdn.net/legendof1991/article/details/22778173


(2)刪除專案中不必要的程式碼,為後續開發做準備,使程式碼如下:

HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer
{
public:
    static cocos2d::Scene* createScene();

    virtual bool init();  

    CREATE_FUNC(HelloWorld);

};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"

USING_NS_CC;

Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    
    auto layer = HelloWorld::create();

    scene->addChild(layer);

    return scene;
}

bool HelloWorld::init()
{

    if ( !Layer::init() )
    {
        return false;
    }
    
    //Size visibleSize = Director::getInstance()->getVisibleSize();
    //Point origin = Director::getInstance()->getVisibleOrigin();

    return true;
}

2. 在HelloWorldScene.h標頭檔案中新增事件監聽回撥和滑向上下左右方法,當然別忘了新增成員函式

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer
{
public:
    static cocos2d::Scene* createScene();

    virtual bool init();  

    CREATE_FUNC(HelloWorld);

	//在這裡加入手勢識別的事件檢測
	//監聽事件回撥:觸控開始和觸控結束
	virtual bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event);
	virtual void onTouchEnded(cocos2d::Touch *touch, cocos2d::Event *unused_event);

	//滑向上下左右的方法
	bool doUp();
	bool doDown();
	bool doLeft();
	bool doRight();

private:
	//點選元素
	int firstX,firstY,endX,endY;
};

#endif // __HELLOWORLD_SCENE_H__

3. 在HelloWorldScene.cpp中具體實現函式


(1)實現onTouchBegan()函式

//事件監聽回撥:觸控開始
bool HelloWorld::onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event)
{
	//獲取觸控的X軸和Y軸
	Point touchPoint = touch->getLocation(); //獲取OpenGL座標(即cocos2d-x座標,原點在左下角)
	touch->getLocationInView();
	firstX=touchPoint.x;
	firstY=touchPoint.y;

	return true;
}

(2)實現onTouchEnded()函式

//事件監聽回撥:觸控結束
void HelloWorld::onTouchEnded(cocos2d::Touch *touch, cocos2d::Event *unused_event)
{
	//獲取X軸和Y軸的移動範圍
	Point touchPoint=touch->getLocation(); //獲取OpenGL座標(即cocos2d-x座標,原點在左下角)
	endX=firstX - touchPoint.x;
	endY=firstY - touchPoint.y;

	//判斷X軸和Y軸的移動距離,如果X軸的絕對值大,則向左右滑動,如果Y軸的絕對值大,則向上下滑動
	if(abs(endX) > abs(endY))
	{
		//手勢向左右
		//判斷向左還是向右
		if(endX+5>0)
		{
			//向左
			doLeft();
		}
		else
		{
			//向右
			doRight();
		}
	}
	else
	{
		//手勢向上下
		//判斷手勢向上還是向下
		if(endY+5>0)
		{
			//向下
			doDown();
		}
		else
		{
			//向上
			doUp();
		}

	}
}

(3)當然別忘了要實現上下左右滑動的函式

//滑向上下左右的方法
bool HelloWorld::doUp()
{
	log("doUp");
	return true;
}

bool HelloWorld::doDown()
{
	log("doDown");
	return true;
}

bool HelloWorld::doLeft()
{
	log("doLeft");
	return true;
}

bool HelloWorld::doRight()
{
	log("doRight");
	return true;
}

4. 在init()函式中建立監聽事件


	auto touchListener=EventListenerTouchOneByOne::create();
	touchListener->onTouchBegan=CC_CALLBACK_2(HelloWorld::onTouchBegan,this);
	touchListener->onTouchEnded=CC_CALLBACK_2(HelloWorld::onTouchEnded,this);
	_eventDispatcher->addEventListenerWithSceneGraphPriority(touchListener,this);


5. 執行專案


(1)專案執行後,效果如下:


(2)在螢幕上面,上下左右滑動,可以看到輸出效果:


最後要特別感謝一下帥印。



相關文章