cocos2dx-v3.4 2048（四）：游戏逻辑的设计与实现

时间:2022-04-27
本文章向大家介绍cocos2dx-v3.4 2048（四）：游戏逻辑的设计与实现，主要内容包括前言、设计、小结、基本概念、基础应用、原理机制和需要注意的事项等，并结合实例形式分析了其使用技巧，希望通过本文能帮助到大家理解应用这部分内容。

前言

2048的游戏逻辑比较简单，向四个方向移动单元格，若相邻的单元格数字相同，则合并成一个新的单元格，且数字为之前的两倍；若不同，则移动到目的方向上的首个非空位置；

当盘面没有空格，且无法移动时（即不存在两个相同的单元格相邻）游戏结束

设计

游戏逻辑的代码主要在GameLayer类中实现，包括绘制背景，管理Grid，移动事件监听和执行

#pragma once
#include "cocos2d.h"
#include "Grid.h"

USING_NS_CC;

class GameLayer :
	public cocos2d::Layer
{
public:
	static GameLayer* getInstance();
	virtual bool init();
	virtual void initBg();
	void initGrids();
	void loadGrids(int type);
	void clearGrids();

	void restartGame();
	void undoGame();
	void randGenGrid();

	virtual void onEnter() override;
	virtual void onExit() override;
	bool onTouchBegan(Touch *touch, Event* event);
	void onTouchMoved(Touch* touch, Event* event);
	void onTouchEnded(Touch* touch, Event* event);

	Grid* _grids[4][4];
	int _lastGrids[4][4];

private:
	CREATE_FUNC(GameLayer);
	void clearLastGrids();
	void saveLastGrids();
	void recoverLastGrids();

	// move function
	bool moveToTop();
	bool moveToBottom();
	bool moveToRight();
	bool moveToLeft();

	int getPreGridIndex(const int direction, int row, int column);
	int moveGrid(const int direction, int row, int column, int targetRow, int targetColumn);
	void moveAndUpdate(int value, int targetRow, int targetColumn);
	void moveOnly(int row, int column, int targetRow, int targetColumn);
	void moveAndClear(int row, int column, int targetRow, int targetColumn);

	bool ifOver();

	Vec2 _begin;
	Vec2 _end;
	bool _isOver;
	static GameLayer* _instance;
};

enum Direction
{
	LEFT,
	RIGHT,
	UP,
	DOWN
};

头文件如上，首先我们对其进行简单的分析

  • init, initBg 绘制背景
  • initGrids, loadGrids, clearGrids是对_grids数组的处理，而_grids数组中保存的则是单元格Grid或nullptr
  • restartGame, undoGame 分别对应菜单的重新开始和后退按钮
  • randGenGrid, 随机在盘面上的空格处选中一个生成初始单元格
  • onEnter, onExit 分别表示进入该Node和离开自动调用的函数，分别用来初始化手势监听和保存数据
  • onTouchBegan, onTouchMoved, onTouchEnded 滑动界面的三个函数
  • clearLastGrids, loadLastGrids, recoverLastGrids 显然是上一步的相关操作了
  • moveToXXX, 朝某方向移动
  • getPrefGridIndex获取某单元格在移动方向上前一个非空单元格，用于判断两者是否可以合并消除
  • moveGrid, moveAndUpdate, moveOnly, moveAndClear 移动单元格的几个函数，后面详细说明
  • ifOver 判断游戏是否结束
  • _begin, _end 手指滑动屏幕时的起始位置和结束位置； _isOver 是否结束的标志
  • enum Direction表示移动方向的enum

1. 基本功能设计

在init函数中实现背景的绘制，即一个大背景和4x4个小的单元格背景， 均使用LayerColor类完成

bool GameLayer::init()
{
	do{
		CC_BREAK_IF(!Layer::init());

		this->setContentSize(Size(300, 300));
		this->setPosition(10, 65);

		initBg();
	}while(0);
	return true;
}

void GameLayer::initBg()
{
	// init the rand seed
	struct timeval now;
	gettimeofday(&now, NULL);
	srand((unsigned int)(now.tv_sec * 1000 + now.tv_usec / 1000));

	auto bg = LayerColor::create(Color4B(186,172,159,255), 300, 300);
	this->addChild(bg);
	for(int i = 0; i < 4; i++)
	{
		for(int j = 0; j < 4; j++)
		{
			auto cellBg = LayerColor::create(Color4B(213, 205, 194, 255), 65, 65);
			cellBg->setPosition(73 * j + 8, 73 * i + 8);
			this->addChild(cellBg);
		}
	}
	//first start, recover the stat from the locord file
	loadGrids(UserDefault::getInstance()->getIntegerForKey("type"));
}

代码比较简单，看一下里面的随机数种子设置，使用当前的时间作为随机数种子，对于cocos2dx的随机数使用可以参考http://blog.csdn.net/liuyueyi25/article/details/45248179

2. _grids数组操作

_grids数组存放了4x4盘面上的对象，有数字的Grid对象和无数字的nullptr， 从前面的头文件也可以看出，这里主要有三个函数与数组相关

  • initGrids: 即初始化数组，将数组的内容全部设置为nullptr， 在首次运行游戏和重新开始的时候需要调用该函数
  • loadGrids： 从存储状态的文件中恢复之前的游戏格局，如每次启动游戏时或切换游戏模式时首先调用的就是loadGrids函数，只有存储文件中不包含该模式的故有格局时才会调用initGrids函数
  • clearGrids：清理_grids数组，释放所有对象

从上面的initGrids函数中可以看出，initGrids的处理功能有 初始数组， 清零LastGrids， 在盘面上随机生成两个单元格，这也是游戏起始时需要完成的工作

void GameLayer::initGrids()
{
	for(int row = 0; row < 4; row++)
	{
		for(int column = 0; column < 4; column++)
		{
			_grids[row][column] = nullptr;
		}
	}
	clearLastGrids();
	randGenGrid();
	randGenGrid();
}

loadGrids函数其实也包括了加载lastGirds数组，即从存储文件中恢复之前的游戏状态，包括当前的游戏格局（_grids[][]）, 其一步状态(_lastGrids[][])， 当然还有分数最高分，只不过这些放在了各自的类函数中实现了

简单分析一下上面流程，首先是判断存储状态是否存在，不存在时直接调用initGrids来初始化游戏状态；否则从文件中恢复

void GameLayer::loadGrids(int type)
{
	_isOver = false;
	auto f = UserDefault::getInstance();
	if(!f->isXMLFileExist() || !f->getBoolForKey(Value(type).asString().append("exits").c_str(), false))
		return initGrids();
	
	int value = 0;
	for(int i = 0; i < 4; i++)
	{
		for(int j = 0; j < 4; j++)
		{
			value = f->getIntegerForKey(Value(type*3).asString().append(Value(100+i*4+j).asString()).c_str());
			if(value == -1)
				_grids[i][j] = nullptr;
			else
			{
				_grids[i][j] = Grid::create();
				_grids[i][j]->initValue(value, i, j);
				this->addChild(_grids[i][j]);
			}
			_lastGrids[i][j] = f->getIntegerForKey(Value(type*3).asString().append(Value(i*4+j).asString()).c_str());
		}
	}
}

清除数组对象函数，当数组单元内容非空时，移除并设置为空即可

void GameLayer::clearGrids()
{
	for(int row = 0; row < 4; row++)
	{
		for(int column = 0; column < 4; column++)
		{
			if(_grids[row][column] != nullptr)
				_grids[row][column]->removeFromParent();
			_grids[row][column] = nullptr;
		}
	}
}

下面看一下重新开始游戏的函数，当新开局一次游戏时，初始化各种变量，并在盘面上新增两个单元格

void GameLayer::restartGame()
{
	_isOver = false;
	GameTool::getInstance()->resetScore();
	clearGrids();
	clearLastGrids();
	randGenGrid();
	randGenGrid();
}

3. _lastGrids数组操作

_lastGrids是保存上一步布局状态的int数组，其中的内容为-1， -2， 或者grids->getValue()值（>=0)

#define EMPTY -1 // 表示lastGrids中保存的是上次的布局
#define DOUBLE_EMPTY -2 // 表示_lastGrids中保存的是初始化的结果

首先我们看一下初始函数clearLastGrids, 取名不怎么贴切，当时编码时直接考虑的是将_lastGrids数组置空，设置为初始状态… 代码如下，比较容易理解；这里需要说明的是EMPTY和DOUBLE_EMPTY之间的区别，当盘面的某个单元格为空时，保存的是EMPTY或者DOUBLE_EMPTY, 其中前者表示_lastGrids中存放有效信息，即上一步的状态，而后者则表示_lastGrids中的内容为初始值，没有意义；

简单来说，开始一局游戏时，_lastGrids中的信息无效，点击undo无效；当至少移动一次之后，_lastGrids信息有效了，因此点击undo后恢复到之前的游戏状态

void GameLayer::clearLastGrids()
{
	for(int row = 0; row < 4; row++)
	{
		for(int column = 0; column < 4; column++)
		{
			_lastGrids[row][column] = DOUBLE_EMPTY;
		}
	}
}

当移动了当前的单元格之后，就需要保存之前的游戏状态，其函数代码如下， 这里需要确定只有移动了单元格的时候才能更新_lastGrids，且只执行一次， 因此前面的if语句必不可少；然后就是调用该函数的时机，在滑动屏幕之后，实现移动单元格之前调用， 查看代码会发现在MoveOnly和MoveAndClear函数中调用，而且还是首行调用

void GameLayer::saveLastGrids()
{
	if(++isMove != 1)
		return;

	for(int row = 0; row < 4; row++)
	{
		for(int column = 0; column < 4; column++)
		{
			if(_grids[row][column] != nullptr)
				_lastGrids[row][column] = _grids[row][column]->getScoreValue();
			else
				_lastGrids[row][column] = EMPTY;
		}
	}
}

保存后就是恢复之前的状态了，当然是在菜单的undo点击后的触发事件了，代码如下

void GameLayer::recoverLastGrids()
{
	for(int row = 0; row < 4; row++)
	{
		for(int column = 0; column < 4; column++)
		{
			if(_lastGrids[row][column]  > EMPTY)
			{
				_grids[row][column] = Grid::create();
				_grids[row][column]->initValue(_lastGrids[row][column], row, column);
				this->addChild(_grids[row][column]);
			}
			else
				_grids[row][column] = nullptr;
		}
	}
}

在这里再看一下undoGame的代码，仅当_lastGrids信息有效时才能恢复到之前的状态，该函数处理两件事，显示清除当前的_grids数组对象，然后恢复之前的状态

void GameLayer::undoGame()
{
	if(_lastGrids[0][0] != DOUBLE_EMPTY) 
	{
		clearGrids();
		recoverLastGrids();
	}
}

4. 注册滑动监听事件

当手指在屏幕滑动时调用相关的函数如何实现？本小节则主要对这方面进行说明

EventListenerTouchOneByOne是我们主要使用的类，首先是注册相关事件，在onEnter函数中实现，该类有三个函数指针onTouchBegan, onTouchMoved, onTouchEnded

void GameLayer::onEnter()
{
	Layer::onEnter();
	auto listener = EventListenerTouchOneByOne::create();
	listener->setSwallowTouches(true);
	listener->onTouchBegan = CC_CALLBACK_2(GameLayer::onTouchBegan, this);
	listener->onTouchMoved = CC_CALLBACK_2(GameLayer::onTouchMoved, this);
	listener->onTouchEnded = CC_CALLBACK_2(GameLayer::onTouchEnded, this);
	_eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
}

4.1 onTouchBegan函数

onTouchBegan表示刚开始触摸屏幕时调用，会返回一个bool型变量，为false时该次触摸结束；为true时继续，也是后续调用onTouchMoved和onTouchEnded的前提

bool GameLayer::onTouchBegan(Touch* touch, Event* event)
{
	if(_isOver)//if game over, then restart the game
	{
		auto fail = this->getChildByName("fail");
		fail->setVisible(false);
		restartGame();
		return false;
	}

	_begin = touch->getLocation();
	auto rect = Rect(this->getPosition().x, this->getPosition().y, this->getContentSize().width, this->getContentSize().height);
	return rect.containsPoint(_begin); // means only touch the game box, then response
}

以上代码中，我们首先查看onTouchBegan,第一步获得触摸点的坐标 _begin = touch->getLocation();  ，然后判断该坐标是否在盘面内，即表示只有在盘面内滑动才有效，这里的判断方法是调用Rect的containPoint函数，实际上使用下面的代码可以直接实现相同的功能。

bool GameLayer::onTouchBegan(Touch* touch, Event* event)
{
	if(_isOver)//if game over, then restart the game
	{
		auto fail = this->getChildByName("fail");
		fail->setVisible(false);
		restartGame();
		return false;
	}

	return this->getBoundingBox().containsPoint(_begin); // means only touch the game box, then response
}

4.2 onTouchMoved函数

这个函数更多的使用在拖拽某个对象的时候使用，如拖动某个单元，使其跟随手指的移动而移动，即一个动态改变对象坐标的过程，当然本游戏中并没有涉及到这一块，因此查看代码的时候会看到函数体是空的，其实在代码中，完全可以不写该函数的 这里我贴一下cocos例子中的函数代码，实现了一个动态修改对象坐标的功能

void TestController::onTouchMoved(Touch* touch, Event  *event)
{
    auto touchLocation = touch->getLocation();    
    float nMoveY = touchLocation.y - _beginPos.y;

    auto curPos  = _itemMenu->getPosition();
    auto nextPos = Vec2(curPos.x, curPos.y + nMoveY);

    if (nextPos.y < 0.0f)
    {
        _itemMenu->setPosition(Vec2::ZERO);
        return;
    }

    if (nextPos.y > ((g_testCount + 1)* LINE_SPACE - VisibleRect::getVisibleRect().size.height))
    {
        _itemMenu->setPosition(0, ((g_testCount + 1)* LINE_SPACE - VisibleRect::getVisibleRect().size.height));
        return;
    }

    _itemMenu->setPosition(nextPos);
    _beginPos = touchLocation;
    s_tCurPos   = nextPos;
}

4.3 onTouchEnded函数

手指离开屏幕后调用的函数，这里当进入该函数后，就需要判断调用相应的移动方向函数了(moveToXXX)，代码容易理解，直接贴出, 加了一个防误触发判断机制，当手指滑动距离过小时，不响应

void GameLayer::onTouchEnded(Touch* touch, Event* event)
{
	_end = touch->getLocation();
	auto value = _end - _begin;

	if(abs(value.x) > abs(value.y)) // left or right move
	{
		if(value.x - 5 > 0) // to right
			moveToRight();
		//else if(value.x + 5 < 0) // to left
		else if(value.x + 5 < 0)
			moveToLeft();
		else
			return;
	}
	else
	{
		if(value.y - 5 > 0) // to up
			moveToTop();
		else if(value.y + 5 < 0)
			moveToBottom();
		else
			return;
	}

	if(isMove > 0) // if moved, then add a new Grid item
		randGenGrid();

	// judge if game over
	_isOver = ifOver();
}

5. 移动单元格

移动单元格可以说是2048的主要逻辑算法体现所在了，这里以向右移动为代表进行详细说明，下图中由图一向右移动为图二的状态

向右移动，即每一行的单元格“尽可能”的向右移动，因此我们以行为单位进行判断，在某一行的判断逻辑为：

1. 选择最右的非空单元格 ---》

2.  找到该单元格紧临的非空单元格  ---》

3.  判断两者是否可以消除  -----》

4.1  可以则合并两个单元格，返回前一个单元格索引 –1 

4.2  不可以则将该单元格”尽可能”的右移，并返回前一个单元格的索引

5. 执行步骤2

这里查看moveToRight代码如下

bool GameLayer::moveToRight()
{
	auto target = 3;
	auto preColumn = 0;
	for(int row = 0; row < 4; row ++)
	{
		target = 3;
		for(int column = 3; column >= 0; column --)
		{
			if(_grids[row][column] == nullptr)
				continue;
			preColumn = moveGrid(Direction::LEFT, row, column, row, target);
			if(preColumn == ERRORINDEX)
				break;
			target--;
		}
	}
	return isMove>0;
}

该函数内部直接调用了moveGrid函数，而moveGrid就实现了单元格的移动，并且返回下一个开始判断的位置,到这里再看上面的代码，preColumn有半毛钱的用… 改改改，新的代码如下：

bool GameLayer::moveToRight()
{
	auto target = 3;
	for(int row = 0; row < 4; row ++)
	{
		target = 3;
		for(int column = 3; column >= 0; column --)
		{
			if(_grids[row][column] == nullptr)
				continue;
			column = moveGrid(Direction::LEFT, row, column, row, target);
			if(column == ERRORINDEX)
				break;
			target--;
		}
	}
	return isMove>0;
}

ok，更新上面的代码，接着研究moveGrid函数，该函数实现将_grids[row][column]移动到_grids[row][target]的位置上

moveGrid函数逻辑为：

  • 首先获取前一个非空单元格的索引,即调用 getPreGridIndex函数
  • 获得该单元格的坐标preRow, preCol, 这里主要是switch语句中的代码实现
  • 判断两个单元格是否可以合并，可以则合并单元格，并调用相关的特效函数；否则仅移动_grids[row][column]
  • 返回下一个判断的索引值
// move the grid to target place and return the pre_grid index
int GameLayer::moveGrid(const int direction, int row, int column, int targetRow, int targetColumn)
{
	int addScore = 0;

	int preColumnOrRow = getPreGridIndex(direction, row, column);
	if(preColumnOrRow == ERRORINDEX)
	{
		moveOnly(row, column, targetRow, targetColumn);
		return ERRORINDEX;
	}

	int preRow, preCol;
	int tag = -1;
	switch(direction)
	{
	case Direction::LEFT:
		tag = 1;
	case Direction::RIGHT:
		preRow = row;
		preCol = preColumnOrRow;
		break;
	case Direction::DOWN:
		tag = 1;
	case Direction::UP:
		preRow = preColumnOrRow;
		preCol = column;
		break;
	}

	if(_grids[row][column]->compareTo(_grids[preRow][preCol])) // can merge two number
	{
		auto value = _grids[row][column]->getScoreValue();
		moveAndClear(row, column, targetRow, targetColumn);
		moveAndClear(preRow, preCol, targetRow, targetColumn);
		moveAndUpdate(++value, targetRow, targetColumn);
		GameTool::getInstance()->updateScore(pow(2, ++value));
		return preColumnOrRow;
	}

	moveOnly(row, column, targetRow, targetColumn);
	return preColumnOrRow + tag;
}

下面则分析getPreGridIndex函数，获得前一个非空单元格的索引值，在向右移动的示例中，也就是获得目标单元格左边非空单元格的column值，所以代码如下

#define ERRORINDEX -1
int GameLayer::getPreGridIndex(const int direction, int row, int column)
{
	switch(direction)
	{
	case Direction::LEFT:
		while(--column >= 0)
			if(_grids[row][column] != nullptr)
				return column;
		break;
	case Direction::RIGHT:
		while(++column <= 3)
			if(_grids[row][column] != nullptr)
				return column;
		break;
	case Direction::UP:
		while(++row <= 3)
			if(_grids[row][column] != nullptr)
				return row;
		break;
	case Direction::DOWN:
		while(--row >= 0)
			if(_grids[row][column] != nullptr)
				return row;
		break;
	}
	return ERRORINDEX;
}

接着就是 moveGrid中调用的移动函数了，其中 moveOnly是单纯的移动单元格到目的地 

void GameLayer::moveOnly(int row, int column, int targetRow, int targetColumn)
{
	if(row == targetRow && column == targetColumn)
		return;

	saveLastGrids(); //save current _grids state in _lastGrids[][]
	//auto action = MoveTo::create(0.1f, Vec2(73*targetColumn + 8, 73*targetRow+ 8));
	_grids[row][column]->moveOnly(targetRow, targetColumn);
	_grids[targetRow][targetColumn] = _grids[row][column];
	_grids[row][column] = nullptr;
}

moveAndClear, moveAndUpdate函数则是移动合并，直接调用grid对应的函数即可，这里也体现了之前设计grid将所有的动画封装到该类中的优越性了

void GameLayer::moveAndUpdate(int value, int targetRow, int targetColumn)
{
	auto temp = Grid::create();
	temp->initValue(value, targetRow, targetColumn);
	_grids[targetRow][targetColumn] = temp;
	this->addChild(_grids[targetRow][targetColumn]);
	temp->moveAndUpdate();
}

void GameLayer::moveAndClear(int row, int column, int targetRow, int targetColumn)
{
	saveLastGrids();

	_grids[row][column]->moveAndClear(targetRow, targetColumn);
	_grids[row][column] = nullptr;
}

小结

到这里，2048的主逻辑判断已经讲述完毕，单元格的移动合并判断是整个游戏中的难点了，上面的设计中也算是较为清晰的描述了整个过程，具体的项目工程可以参考： https://github.com/liuyueyi/2048 若测试有bug欢迎指针

后面剩下的就是保存数据到文件，音乐，android编译，加广告几个附属功能的介绍了，当然在代码中其实也没有实现….. 后面再看啥时候补全-.-||

随机文章
本站知识点必读
最近更新