一個根本停不下來的游戲。。。看看誰能玩到2048。2048 是一款數學游戲，通過上下左右滑動讓兩兩相同的數字碰撞就會誕生一個翻倍的.最近2048游戲火的一塌糊涂！
一個根本停不下來的游戲。。。看看誰能玩到2048。2048 是一款數學游戲，通過上下左右滑動讓兩兩相同的數字碰撞就會誕生一個翻倍的.最近2048游戲火的一塌糊涂！
2048游戲規則很簡單：
* 開始時棋盤內隨機出現兩個數字，出現的數字僅可能為2或4
* 玩家可以選擇上下左右四個方向，若棋盤內的數字出現位移或合并，視為有效移動
* 玩家選擇的方向上若有相同的數字則合并，每次有效移動可以同時合并，但不可以連續合并
* 合并所得的所有新生成數字想加即為該步的有效得分
* 玩家選擇的方向行或列前方有空格則出現位移
* 每有效移動一步，棋盤的空位（無數字處）隨機出現一個數字（依然可能為2或4）
* 棋盤被數字填滿，無法進行有效移動，判負，游戲結束
* 棋盤上出現2048，判勝，游戲結束
下面我們就來利用Cocos2d-x動手創建一個2048游戲！運行在iOS和Android 上。
項目介紹
- 引擎版本：Cocos2d-x 3.0
- 開發工具：Xcode5
-
效果圖：
-
游戲只粗略實現大概邏輯，基本可玩。畫面簡陋還需小伙伴繼續完善。
工程建立
1. 下載 Cocos2d-x 3.0
2. 解壓cocos2d-x-3.0.zip,進入cocos2d-x-3.0，運行 setup.py
2. 運行 cocos 腳本創建工程
Example:
$ cd cocos2d-x
$ ./setup.py
$ source FILE_TO_SAVE_SYSTEM_VARIABLE
$ cocos new MyGame -p com.your_company.mygame -l cpp -d NEW_PROJECTS_DIR
$ cd NEW_PROJECTS_DIR/MyGame
按照上面操作執行
IvenYangtekiMacBook-Pro-2:Documents zeroyang$ cocos new 2048 -p com.your_company.2048 -l cpp
Runing command: new
> Copy template into /Users/zeroyang/Documents/2048
> Copying cocos2d-x files...
> Rename project name from 'HelloCpp' to '2048'
> Replace the project name from 'HelloCpp' to '2048'
> Replace the project package name from 'org.cocos2dx.hellocpp' to 'com.your_company.2048'
IvenYangtekiMacBook-Pro-2:Documents zeroyang$
我們創建了一個基于Cocos2d-x 3.0版本的2048空工程。
進入工程目錄查看工程結構如圖：
- AppDelegate.cpp是Cocos2d-x自動生成的一個類，它控制著游戲的生命周期。
- HelloWorldScene是Cocos2d-x自動生成的一個類，HelloWorld場景。
使用xcode打開剛創建的工程，proj.ios_mac/2048.xcodeproj，編譯運行如下， cocos2d-x 默認為我們創建了一個模板工程。運行結果如圖：
接下來，我們動手修改工程，加入自己的游戲場景。
游戲場景創建
Cocos2d-x 使用Scene表示游戲的場景，類似于電影中的場景。場景大致可以分為以下幾類：展示類場景。播放視頻或簡單的在圖像上輸出文字，來實現游戲的開場介紹、勝利和失敗提示、幫助介紹，選項類場景，主菜單、設置游戲參數等，游戲場景。這是游戲的主要內容。
游戲的內容是通過層Layer,疊加展示的。Layer是寫游戲的重點，精靈Sprite、標簽Label、菜單Menu等都是add到層上展示。
新建GameScene
新建GameScene類，創建游戲的主場景。GameScene 是Layer的子類，負責顯示score、pause 菜單，以及 4*4 的數字卡片。管理游戲的交換邏輯和分數更新。
createScene靜態方法的實現。
Scene* GameScene::createScene()
{
// 'scene' is an autorelease object
auto scene = Scene::create();
// 'layer' is an autorelease object
auto layer = GameScene::create();
// add layer as a child to scene
scene->addChild(layer);
// return the scene
return scene;
}
GameScene::createScene()方法，首先創建了一個場景，然后創建layer將自己add到該場景。并返回。
在bool GameScene::init()中加入bgLayer 和顯示score label 和 pause菜單
Size visibleSize = Director::getInstance()->getVisibleSize();
//加入游戲背景
//1
auto layerColorBG = LayerColor::create(Color4B(180, 170, 160, 255));
this->addChild(layerColorBG);
//pause
//2
MenuItemFont::setFontName("Consolas");
MenuItemFont::setFontSize(80);
auto menuItemPause = MenuItemFont::create("PAUSE", CC_CALLBACK_1(GameScene::onPause, this));
auto menu = Menu::create(menuItemPause, NULL);
addChild(menu);
menu->setPosition(Point(visibleSize.width - 150, visibleSize.height/2 + 250));
//創建分數
//3
auto cardNumberTitle = Label::createWithSystemFont("SCORE","Consolas",80);
cardNumberTitle->setPosition(Point(visibleSize.width - 150, visibleSize.height/2 + 50));
addChild(cardNumberTitle);
score = 0;
cardNumberTTF = Label::createWithSystemFont("0", "Consolas", 70);
cardNumberTTF->setPosition(Point(visibleSize.width - 150, visibleSize.height/2 - 50));
addChild(cardNumberTTF);
- 創建了一個LayerColor對象layerColorBG，用于做游戲的背景。 游戲的背景也可以使用精靈通過圖片創建
- 使用MenuItemFont，指定字體和大小，創建了一個menuItemPause 菜單項，菜單的響應函數onPause執行點擊菜單的響應。
- 創建了兩個label,一個顯示SCORE標題，一個顯示分數。當得分變化時時更新分數的顯示。
替換HelloWorldScene，加入GameScene；
打開AppDelegate.cpp，加入頭文件#include "GameScene.h"， 在Cocos2d-x的入口bool AppDelegate::applicationDidFinishLaunching()作如下修改，
將
auto scene = HelloWorld::createScene();
director->runWithScene(scene);
改為
auto scene = GameScene::createScene();
director->runWithScene(scene);
Cocos2d-x用Director類管理場景，訪問和改變場景。通過上面修改，將我的游戲場景運行起來。
運行查看效果：
游戲場景基本已經創建好，接下來我們來加入4*4的數字卡片。
新建Card 精靈
新建CardSprite類來表示數字方塊，CardSprite是Sprite的子類。由顯示背景的LayerColor和顯示數字的Label組合而成。 負責顯示2、4、8...數字方塊和不同的背景色。
數字卡片的創建
//初始化
void CardSprite::initCard(int number, int wight, int height, float CardSpriteX, float CardSpriteY)
{
//初始化數字
this->number = number;
//加入卡片背景顏色
colorBackground = LayerColor::create(Color4B(200,190,180,255),wight-15,height-15);
colorBackground->setPosition(Point(CardSpriteX,CardSpriteY));
//判斷如果大于0就顯示，否則就不顯示
if (number > 0)
{
//加入字體
labelCardNumber = Label::createWithSystemFont(__String::createWithFormat("%i",number)->getCString(),"Consolas",100);
labelCardNumber->setPosition(Point(colorBackground->getContentSize().width/2, colorBackground->getContentSize().height/2));
labelCardNumber->setTag(8);
colorBackground->addChild(labelCardNumber);
}
else
{
//加入字體
labelCardNumber = Label::createWithSystemFont("","Consolas",100);
labelCardNumber->setPosition(Point(colorBackground->getContentSize().width/2, colorBackground->getContentSize().height/2));
labelCardNumber->setTag(8);
colorBackground->addChild(labelCardNumber);
}
this->addChild(colorBackground);
}
上面代碼，通過指定位置和大小創建了一個顯示背景的LayerColor對象，然后將創建顯示數字的Label對象add到背景上，最后將其add到CardSprite上。
添加更新和獲取數字方法
//獲取數據
int CardSprite::getNumber()
{
return number;
}
//設置數據
void CardSprite::setNumber(int num)
{
number = num;
//更新顯示的數字
if (num > 0)
{
labelCardNumber->setString(__String::createWithFormat("%i",number)->getCString());
}
else
{
labelCardNumber->setString("");
}
//設置數字大小
if (num >= 0)
{
labelCardNumber->setSystemFontSize(100);
}
.......
if (num >= 1024)
{
labelCardNumber->setSystemFontSize(40);
}
//判斷數字的大小來調整顏色
if(number == 0){
colorBackground->setColor(Color3B(200,190,180));
}
.....
if (number == 2048) {
colorBackground->setColor(Color3B(0,130,0));
}
}
CardSprite的成員變量number保存卡片顯示的數字，colorBackground 在不同number下顯示不同的顏色。
在場景中加入4*4的數字卡片
數字卡片創建好后，就需要在游戲場景中加入。2048游戲中有4*4的數字卡片。加入卡片需要考慮卡片的布局，和屏幕的寬高，間隔。GameScene的成員變量二維指針cardArr保存對數字卡片的引用。根據屏幕顯示區域的大小，計算好卡片的大小和布局位置。將創建好的卡片add到GameScene。
//根據屏幕大小創建卡片
void GameScene::createCardSprite(Size size)
{
//求出單元格的寬和高
int cardSize = (size.height - 36) / 4;
//繪制出4X4的單元格
for (int i = 0; i < 4; i++)
{
for (int j = 0; j < 4; j++)
{
//需要屏幕分辨率適配
CardSprite *card = CardSprite::createCardSprite(0, cardSize, cardSize, cardSize*i+80, cardSize*j+20);
cardArr[i][j] = card;
addChild(card);
}
}
}
隨機生成2和4
cocos2d-x中提供了CCRANDOM_0_1()宏
/** @def CCRANDOM_0_1
returns a random float between 0 and 1
*/
#define CCRANDOM_0_1() ((float)rand()/RAND_MAX)
生成float范圍是[0.f,1.f]。 我們需要在4*4的矩陣上，隨機取數字卡片初始為2或4。使用如下方法
int i = CCRANDOM_0_1() * 4; //生成0~3隨機數
將float轉為int，得到0~3的隨機數
//創建生成隨機卡片
void GameScene::createCardNumber()
{
while (1) {
int i = CCRANDOM_0_1() * 4; //生成0~3隨機數
int j = CCRANDOM_0_1() * 4;
log("[%d][%d]",i,j);
if (cardArr[i][j]->getNumber() == 0)
{
//2和4的生成率為9:1
cardArr[i][j]->setNumber(CCRANDOM_0_1()*10 < 1 ? 4 : 2);
break;
}
if (!shouldCreateCardNumber()) {
break;
}
}
}
初始化2048場景
初始化2048游戲場景，就是將創建好的場景中加入4*4的數字卡片和2個顯示數值的卡片。 在GameScene::init()方法加入
//創建4X4卡片
createCardSprite(visibleSize);
//初始時生成兩個2
createCardNumber();
createCardNumber();
運行效果如圖：
小結
在這節我們已經完成了游戲的主場景和4*4的數字卡片。但是還缺少游戲上下左右滑動移動數字卡片，得分，游戲結束等邏輯。 在下一節我們將加入游戲的邏輯、數據存儲和如何在android上運行。
你可以在獲取游戲源碼（點擊下載源碼）。
