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

最近有一款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）在螢幕上面，上下左右滑動，可以看到輸出效果：

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