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数组置空,设置为初始状态… 代码如下,比较容易理解;这里需要说明的是EMPTYDOUBLE_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语句必不可少;然后就是调用该函数的时机,在滑动屏幕之后,实现移动单元格之前调用, 查看代码会发现在MoveOnlyMoveAndClear函数中调用,而且还是首行调用

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时继续,也是后续调用onTouchMovedonTouchEnded的前提

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编译,加广告几个附属功能的介绍了,当然在代码中其实也没有实现….. 后面再看啥时候补全-.-||

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

利用threshold实现的遮罩引导

点击“开始引导”,则进入引导操作。除指定的按钮可以操作外,其它区域均不可点击。这种应用当新功能或是新产品上线后,用来引导用户来使用产品/功能,是十分有用的。fa...

12410
来自专栏AhDung

【C#】无损转换Image为Icon

此法的问题是,如果图像是透明背景,那么得到的Icon的边缘就是毛糙的,像是先垫了一层背景色然后再去色的效果,很不如人意,用过的朋友都知道。尚未研究是bmp.Ge...

13930
来自专栏码神联盟

碎片化 | 第四阶段-41-struts2字节流生成验证码-视频

如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/r056700jckx.html 验证码实现 需求: 在登录的页面,增...

30690
来自专栏向治洪

iOS 滚动视图的复用问题解决方案

LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题。它...

20960
来自专栏向治洪

iOS 滚动视图的复用问题解决方案

##LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题...

278100
来自专栏hightopo

HT for Web基于HTML5的图像操作(一)

19020
来自专栏一个会写诗的程序员的博客

MySQL 直接存储图片并在 html 页面中展示,点击下载

23520
来自专栏HT

HT for Web基于HTML5的图像操作(一)

HT for Web独创的矢量图片设计架构,使其具有强大丰富的动态图形呈现能力,但从最近热议的“Adobe Photoshop 是否已经过时?”的话题,大家能体...

41390
来自专栏前端说吧

JS-抽奖系统-实现原理

1.3K40
来自专栏林德熙的博客

win10 uwp 分治法

算法涉及到了一个平面几何的知识。就是三角形p1p2p3的面积等于以下行列式的二分之一: % <![CDATA[ \begin{array}{cccc} | ...

9010

扫码关注云+社区

领取腾讯云代金券