【2048强势来袭】第一期：搭建上下左右手势识别的框架

最近有一款2048的游戏火爆了，咱们也来试试。

本游戏使用的是cocos2d-x 3.0alpha1版本。

本篇文章将来讲解2048游戏中的手势识别：上下左右。

1. 创建“TZFE”项目（2048数字英文单词的开头）

（1）在cocos2d-x 3.0alpha1版本中，创建一个“TZFE”项目，如果不懂的话，请参考这篇文章：/article/1380578.html

（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）在屏幕上面，上下左右滑动，可以看到输出效果：



最后要特别感谢一下帅印。