cocos2dx-v3.4 2048(四):单元格的设计与实现

前言


单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效

设计


#pragma once
#include "cocos2d.h"

USING_NS_CC;

class Grid:public cocos2d::Layer
{
public:
	static char* G2U(const char* gb2312);
	static void changeType(int type);
	static int getType();
	CREATE_FUNC(Grid);
	virtual bool init();

	CC_SYNTHESIZE(int, _value, ScoreValue);
	//void updateValue();
	void initValue(int value);
	void initValue(int value, int row, int column);
	bool compareTo(Grid* grid);

	void setLocalPosition(int row, int column);

	void moveAndClear(int targetRow, int targetColumn);
	void moveAndUpdate();

private:
	void loadMap();
	void updateBg();
	Label* _label;
	LayerColor* _bg;
};

首先我们看一下头文件中Grid类包含的函数,并对此进行说明介绍:

  • G2U用于中文显示,前一篇博文有说明
  • changeType, 和 getType主要是游戏类型的更换,由于本项目包含三个不同的模式(经典模式,小兵传奇,颜色模式),因此在模式切换时,需要更新单元格的显示内容;
  • initValue 显然是设置单元各显示值的函数;
  • compareTo 判断两个单元格的显示内容是否相同(用于游戏移动单元格时,判断是否可以合并两个单元格)’
  • setLocalPosition 根据所在的行列设置该单元格在父节点中的坐标;
  • moveAndClear移动并消除单元格的特效
  • moveAndUpdate合并单元格后新增单元格的特效
  • loadMap 获取单元格显示内容的所有值(本处函数取名有问题,因为包含所有显示内容的不是map数据结构,建议修改一下)
  • updateBg 设置背景色

1. 基本功能设计


单元格的基本类容就是显示数字和背景色,也就是绘制一个LayerColor和一个Label的问题,在init函数中初始化实现;初始化完毕后就是设置显示值以及坐标的问题,由initValue实现

initValue函数,用于初始化单元格的显示值、背景色、和显示位置,因此其结构如下:

void Grid::initValue(int value, int row, int column)
{
	setLocalPosition(row, column);
	initValue(value);
}

// init the first value of the grid, and the value should be 0 or 1
void Grid::initValue(int value)
{
	_value = value;
	updateBg();
}

void Grid::setLocalPosition(int row, int column)
{
	this->setPosition(column*73 + 8, row*73 + 8);
}

void Grid::updateBg()
{
	...
}

其中,由于显示值改变必然涉及到背景色的更新,因此设计的时候将initValue(int value)时,直接内调用了updateBg(且该函数设置为私有),更新背景色代码为:

void Grid::updateBg()
{
	_label->setString(map[_value]);
	Color3B color, fcolor = Color3B(255, 255, 255);

	switch(_value)
	{
	case 0:
		color = Color3B(247,213,97);
		fcolor = Color3B(120, 120, 120);
		break;
	case 1:
		color = Color3B(166, 232, 103);
		fcolor = Color3B(90, 90, 90);
		break;
	case 2:
		color = Color3B(87, 212, 154);
		break;
	case 3:
		color = Color3B(19, 181, 177);
		break;
	case 4:
		color = Color3B(68, 138, 202);
		break;
	case 5:
		color = Color3B(200, 97, 234);
		break;
	case 6:
		color = Color3B(225,115,181);
		break;
	case 7:
		color = Color3B(238,100, 141);
		break;
	case 8:
		color = Color3B(243, 157, 79);
		break;
	case 9:
		color = Color3B(245, 124, 78);
		break;
	case 10:
		color = Color3B(246, 76, 20);
		break;
	case 11:
		color = Color3B(210, 210, 10); //Color3B(105, 84, 187);
		break;
	case 12:
		color = Color3B(190, 194, 22); // Color3B(50, 86, 204);
		break;
	case 13:
		color = Color3B(160, 160, 10);
		break;
	case 14:
		color =  Color3B(50, 86, 204);// Color3B(24, 66, 149);
		break;
	default:
		color =  Color3B(24, 66, 149);
		break;
	}
	_label->setColor(fcolor);
	_bg->setColor(color);
	
	if(type != 1)
		return;

	if(_value > 15)
		_label->setSystemFontSize(20);
	else if(_value > 12)
		_label->setSystemFontSize(24);
	else if(_value > 8)
		_label->setSystemFontSize(26);

}

2. 显示内容设计


由于本项目有三个模式,不同模式单元格的显示内容不同,如下图:(从左到右,分别是经典模式,小兵传奇,纯色模式)

三种不同的模式中,显示内容如:

std::string map[16] = {"0"};
std::string guan[] = {"小兵", "下士", "中士", "上士", "少尉", "中尉", "上尉", "少校", "中校", "上校", "大校", "准将", "少将", "中将", "上将", "元帅"};
std::string num[] = {"2", "4", "8", "16", "32", "64", "128", "256", "512", "1024", "2048", "4096", "8192", "16384", "32768", "65536",  "131072", "262144", "524288"};

然后需要根据当前的模式来选择显示的内容集:

void Grid::loadMap()
{
	
	if(map[0].compare("0") == 0) //first load, then get the type from save file
	{
		type = UserDefault::getInstance()->getIntegerForKey("type", 0);
	}

	for(int i = 0; i<16; i++)
	{
		if(type == 0)
			map[i] = Grid::G2U(guan[i].c_str()); // soldier mode
		else if(type == 1)
			map[i] = num[i]; // classic mode
		else
			map[i] = ""; // color mode
	}
}

在该函数中,type作为全局变量使用,对于第二个for循环,type直接与0,1其他进行比较是个隐患,建议用enum进行修改(当时顺手直接用了常量)为了阅读简洁改成如下代码:

enum StateType{
	SOLDIER, // 0
	CLASSIC, // 1
	COLOR // 2
};
void Grid::loadMap()
{
	
	if(map[0].compare("0") == 0) //first load, then get the type from save file
	{
		type = UserDefault::getInstance()->getIntegerForKey("type", 0);
	}

	for(int i = 0; i<16; i++)
	{
		if(type == StateType::SOLDIER)
			map[i] = Grid::G2U(guan[i].c_str());
		else if(type == StateType::CLASSIC)
			map[i] = num[i];
		else if(type == StateType::COLOR)
			map[i] = "";
	}
}

从上面的代码中可以看出,直接影响显示内容的是变量type,其相关的函数为:

static int type = 0;
void Grid::changeType(int _type)
{
	type = _type;
	GameTool::getInstance()->loadScore(type);
	GameLayer::getInstance()->loadGrids(type);
}

int Grid::getType()
{
	return type;
}

当调用changeType时,需要重现加载分数和最高分,以及更新游戏模式后的游戏布局(从save file中获取状态并恢复)

3. 移动特效


单元格的移动特效有一下几种,刚出现时的淡入效果FadeIn,单纯的移动到目的地移动效果MoveTo,移动并消除特效,移动合并出一个新的单元格特效

3.1 新生成单元格特效

    写到这才发现在代码中进入特效实在GameLayer中随机生成一个单元格时,顺手写进去的,因此没有加入Grid函数中,显然是不符合本文的设计要求的,因此将相关代码搬了个家,首先在 Grid.h中添加 initAction(), 并在Grid.cpp中实现:

void Grid::initAction()
{
	auto a1 = ScaleTo::create(0.3f, 1);
	auto a2 = FadeIn::create(1);
	auto a3 = Spawn::create(a1, a2, nullptr);
	setScale(0);
	runAction(a3);
}

3.2 单纯移动特效

    单纯的移动单元格,可以直接调用MoveTo来实现,同样的该处代码直接顺手写在了GameLayer的moveOnly函数中,同样的迁移过来,新的代码为:

void Grid::moveOnly(int targetRow, int targetColumn)
{
	runAction(MoveTo::create(0.2f, Vec2(73 * targetColumn + 8, 73 * targetRow + 8)));
}

(插一句,设计很重要,顺手写会对后面调试以及审阅代码增加难度)

3.3 移动并消除特效

    当合并两个单元格时,至少需要消除其中的一个单元格,这里有两种设计思路:

  •         将两个可以合并的单元格都消除,然后新生成一个单元格,值为消除单元格+1;
  •         消除一个单元格,另外一个单元格值+1;

    无论选择哪一种方式,都至少有一个单元格是要调用移动并消除特效的,当然本项目选择了第二种方式,至于为什么,好吧当时写的时候这样更加简单,(当然推荐用第一种,节省了node创建回收开销)

    移动并消除主要包括移动、淡出、自销毁三个特效,具体代码如下:

void Grid::moveAndClear(int targetRow, int targetColumn)
{
	auto a1 = MoveTo::create(0.2f, Vec2(73 * targetColumn + 8, 73 * targetRow + 8));
	auto a2 = FadeOut::create(0.2f);
	auto a3 = Spawn::create(a1, a2, nullptr);
	auto a4 = CallFunc::create([&]{
		//log("remove child");
		this->removeFromParent();
	});
	this->runAction(Sequence::create(a3, a4, nullptr));
}

CallFunc是一个很有意思的类,表示调用函数的特效,上面代码的意思是当单元格移动到目的地时,将该单元格从父节点中移除(引用计数-1, 为0时会自动被回收)

3.4 移动合并特效

由于我们选择第二种方式,因此这个特效就是简单的淡入、放大缩小的特效,如下:

void Grid::moveAndUpdate()
{
	this->setVisible(false);
	auto action01 = ScaleTo::create(0.1f, 1.1f);
	auto action02 = ScaleTo::create(0.1f, 1);
	auto action03 = FadeIn::create(0.2f);
	auto action04 = Sequence::create(action03, CallFunc::create([&]{
		//log("add child");
		this->setVisible(true);
	}), action01, action02, nullptr);
	this->runAction(action04);
}

那么选择第一种方式呢,该如何编写相关代码?其实使用第一种也很简单,其分解过程为:

   移动到目的地 ---》 更新value ---》 放大缩小特效

void Grid::moveAndUpdate(int targetRow, int targetColumn)
{
	auto a1 = MoveTo::create(0.2f, Vec2(73 * targetColumn + 8, 73 * targetRow + 8));
	auto a2 = CallFunc::create([&]{
		//log("remove child");
		this->updateValue(); // value++ and update bg
	});
	auto a3 = ScaleTo::create(0.1f, 1.1f);
	auto a4 = ScaleTo::create(0.1f, 1);
	auto a5 = Sequence::create(a1, a2, a4, a4, nullptr);
	this->runAction(a5);
}

4. 判断单元格是否相等


判断单元格是否相等是合并单元格的前提,当两个单元格的value相等,即表示可合并;否则不能合并,代码如下:

bool Grid::compareTo(Grid* grid)
{
	if(grid == nullptr)
		return false;

	return _value == grid->getScoreValue();
}

看到上面的代码发现可以直接简化为一句:

bool Grid::compareTo(Grid* grid)
{
	return grid!=nullptr && _value == grid->getScoreValue();
}

(说一句,在判断指针参数的时候,需要首先确定指针非空,否则可能出现大家都知道的bug)

实现、小结


上面贴出了部分代码,并给出了说明, 这里不贴代码了, 源码请参考: https://github.com/liuyueyi/2048

小结一下:

Grid实现单元格的所有功能,如基本的绘制、显示,到移动淡入淡出特效,在Grid中实现这些代码可以减轻主游戏逻辑中的代码量,增强代码的阅读性

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术之路

指针数组和数组指针

指针数组 :就是指针的数组,数组的元素是指针;  数组指针:就是指向数组的指针。 简单举例说明:     int *p1[10];    声明了一个数组,数组的...

24190
来自专栏量化投资与机器学习

Python入门讲解

谢谢大家支持,可以让有兴趣的人关注这个公众号。让知识传播的更加富有活力,谢谢各位读者。 很多人问博主为什么每次的头像是奥黛丽赫本,因为她是博主女神,每天看看女...

308100
来自专栏企鹅号快讯

C加加是否到了生死存亡的时刻?不,C加加仍然在编程界任是不可替代的

C++是否逐步被取代 C++最能考察一个人对计算机知识掌握的能力。windows使用C、C++写的,现在又有qt、codeblocks等跨平台开发工具。可以这样...

26490
来自专栏编程

一步一步提高C+编程的方法和步骤!

门外汉:如果你还是刚刚接触c++,那么你应该先去买一本《C++编程思想》,这本书讲解非常详细,而且通俗易懂,当你将这些代码敲完之后,升级为菜鸟级别了 ? 菜鸟级...

22790
来自专栏企鹅号快讯

人工智能的语言-PYTHON

1989年的圣诞节33岁的荷兰人Guido van Rossum很是无聊,看完《Monty Python飞行马戏团》后,思绪便信马由缰地乱跑起来,脑子有一个声音...

291100
来自专栏编程思想之路

Androidstudio编译c/c++jni方法

开发环境:Androidstudio2.3 开发目的:在Androidstudio上编译c/c++jni并自动生成so库,在java类中引用。 开发过程...

224100
来自专栏企鹅号快讯

2017年10大主流编程语言最新排行榜出炉

前言 据美国科技公司Gizmodo报道,截至2014年9月24日,全世界采用IT操作系统的设备数量已经达到10亿台,IT推动中国移动互联网进入高速发展期,成为所...

25090
来自专栏编程

C语言怎么学习?以C语言模拟登录为例,学C语言该当如此方可成

好了不用看了,看直了也不会有妹子,看题了: C语言编写代码实现,模拟用户登录------看着是不是很简单?,是不是很轻松?,是不是就有这样的代码? (小编随便百...

49290
来自专栏微信终端开发团队的专栏

SQLite虚拟机

1 前言 本文主要介绍SQLite虚拟机VDBE,为了更好地了解SQLite虚拟机,文中也加入了一些Lua虚拟机内容来对比学习,更好地了解不同虚拟机之间的异同...

38360
来自专栏向治洪

JNI基础

JNI基础 将java中的字符串转换成C中字符串的工具方法 char* Jstring2CStr(JNIEnv* env, ...

290100

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励