前言
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 column,int targetRow,int targetColumn); void moveAndUpdate(int value,int targetColumn); void moveOnly(int row,int targetColumn); void moveAndClear(int row,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,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://www.jb51.cc/article/p-pjaqlsif-bem.html
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,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,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,column,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,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 targetColumn) { int addscore = 0; int preColumnOrRow = getPreGridIndex(direction,column); if(preColumnOrRow == ERRORINDEX) { moveOnly(row,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,targetColumn); moveAndClear(preRow,targetColumn); moveAndUpdate(++value,targetColumn); GameTool::getInstance()->updatescore(pow(2,++value)); return preColumnOrRow; } moveOnly(row,targetColumn); return preColumnOrRow + tag; }
下面则分析getPreGridIndex函数,获得前一个非空单元格的索引值,在向右移动的示例中,也就是获得目标单元格左边非空单元格的column值,所以代码如下
#define ERRORINDEX -1 int GameLayer::getPreGridIndex(const int direction,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 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 targetColumn) { auto temp = Grid::create(); temp->initValue(value,targetColumn); _grids[targetRow][targetColumn] = temp; this->addChild(_grids[targetRow][targetColumn]); temp->moveAndUpdate(); } void GameLayer::moveAndClear(int row,int targetColumn) { saveLastGrids(); _grids[row][column]->moveAndClear(targetRow,targetColumn); _grids[row][column] = nullptr; }
小结
到这里,2048的主逻辑判断已经讲述完毕,单元格的移动合并判断是整个游戏中的难点了,上面的设计中也算是较为清晰的描述了整个过程,具体的项目工程可以参考: https://github.com/liuyueyi/2048 若测试有bug欢迎指针
后面剩下的就是保存数据到文件,音乐,android编译,加广告几个附属功能的介绍了,当然在代码中其实也没有实现….. 后面再看啥时候补全-.-||