使用Cocos2d-x開發(fā)2048游戲教程（Part1）

2014-06-27 15:16:31來(lái)源：Cocos2d-x作者：

一個(gè)根本停不下來(lái)的游戲。。�？纯凑l(shuí)能玩到2048。2048 是一款數(shù)學(xué)游戲，通過(guò)上下左右滑動(dòng)讓兩兩相同的數(shù)字碰撞就會(huì)誕生一個(gè)翻倍的.最近2048游戲火的一塌糊涂！

一個(gè)根本停不下來(lái)的游戲。。。看看誰(shuí)能玩到2048。2048 是一款數(shù)學(xué)游戲，通過(guò)上下左右滑動(dòng)讓兩兩相同的數(shù)字碰撞就會(huì)誕生一個(gè)翻倍的.最近2048游戲火的一塌糊涂！

2048游戲規(guī)則很簡(jiǎn)單：

* 開始時(shí)棋盤內(nèi)隨機(jī)出現(xiàn)兩個(gè)數(shù)字，出現(xiàn)的數(shù)字僅可能為2或4

* 玩家可以選擇上下左右四個(gè)方向，若棋盤內(nèi)的數(shù)字出現(xiàn)位移或合并，視為有效移動(dòng)

* 玩家選擇的方向上若有相同的數(shù)字則合并，每次有效移動(dòng)可以同時(shí)合并，但不可以連續(xù)合并

* 合并所得的所有新生成數(shù)字想加即為該步的有效得分

* 玩家選擇的方向行或列前方有空格則出現(xiàn)位移

* 每有效移動(dòng)一步，棋盤的空位（無(wú)數(shù)字處）隨機(jī)出現(xiàn)一個(gè)數(shù)字（依然可能為2或4）

* 棋盤被數(shù)字填滿，無(wú)法進(jìn)行有效移動(dòng)，判負(fù)，游戲結(jié)束

* 棋盤上出現(xiàn)2048，判勝，游戲結(jié)束

下面我們就來(lái)利用Cocos2d-x動(dòng)手創(chuàng)建一個(gè)2048游戲！運(yùn)行在iOS和Android 上。

項(xiàng)目介紹

引擎版本：Cocos2d-x 3.0
開發(fā)工具：Xcode5
效果圖：

游戲只粗略實(shí)現(xiàn)大概邏輯，基本可玩。畫面簡(jiǎn)陋還需小伙伴繼續(xù)完善。

工程建立

1. 下載 Cocos2d-x 3.0

2. 解壓cocos2d-x-3.0.zip,進(jìn)入cocos2d-x-3.0，運(yùn)行 setup.py

2. 運(yùn)行 cocos 腳本創(chuàng)建工程

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

按照上面操作執(zhí)行

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$

我們創(chuàng)建了一個(gè)基于Cocos2d-x 3.0版本的2048空工程。

進(jìn)入工程目錄查看工程結(jié)構(gòu)如圖：

AppDelegate.cpp是Cocos2d-x自動(dòng)生成的一個(gè)類，它控制著游戲的生命周期。
HelloWorldScene是Cocos2d-x自動(dòng)生成的一個(gè)類，HelloWorld場(chǎng)景。

使用xcode打開剛創(chuàng)建的工程，proj.ios_mac/2048.xcodeproj，編譯運(yùn)行如下， cocos2d-x 默認(rèn)為我們創(chuàng)建了一個(gè)模板工程。運(yùn)行結(jié)果如圖：

接下來(lái)，我們動(dòng)手修改工程，加入自己的游戲場(chǎng)景。

游戲場(chǎng)景創(chuàng)建

Cocos2d-x 使用Scene表示游戲的場(chǎng)景，類似于電影中的場(chǎng)景。場(chǎng)景大致可以分為以下幾類：展示類場(chǎng)景。播放視頻或簡(jiǎn)單的在圖像上輸出文字，來(lái)實(shí)現(xiàn)游戲的開場(chǎng)介紹、勝利和失敗提示、幫助介紹，選項(xiàng)類場(chǎng)景，主菜單、設(shè)置游戲參數(shù)等，游戲場(chǎng)景。這是游戲的主要內(nèi)容。

游戲的內(nèi)容是通過(guò)層Layer,疊加展示的。Layer是寫游戲的重點(diǎn)，精靈Sprite、標(biāo)簽Label、菜單Menu等都是add到層上展示。

新建GameScene

新建GameScene類，創(chuàng)建游戲的主場(chǎng)景。GameScene 是Layer的子類，負(fù)責(zé)顯示score、pause 菜單，以及 4*4 的數(shù)字卡片。管理游戲的交換邏輯和分?jǐn)?shù)更新。

createScene靜態(tài)方法的實(shí)現(xiàn)。

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()方法，首先創(chuàng)建了一個(gè)場(chǎng)景，然后創(chuàng)建layer將自己add到該場(chǎng)景。并返回。

在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));

//創(chuàng)建分?jǐn)?shù)

//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);

創(chuàng)建了一個(gè)LayerColor對(duì)象layerColorBG，用于做游戲的背景。游戲的背景也可以使用精靈通過(guò)圖片創(chuàng)建
使用MenuItemFont，指定字體和大小，創(chuàng)建了一個(gè)menuItemPause 菜單項(xiàng)，菜單的響應(yīng)函數(shù)onPause執(zhí)行點(diǎn)擊菜單的響應(yīng)。
創(chuàng)建了兩個(gè)label,一個(gè)顯示SCORE標(biāo)題，一個(gè)顯示分?jǐn)?shù)。當(dāng)?shù)梅肿兓瘯r(shí)時(shí)更新分?jǐn)?shù)的顯示。

替換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類管理場(chǎng)景，訪問(wèn)和改變場(chǎng)景。通過(guò)上面修改，將我的游戲場(chǎng)景運(yùn)行起來(lái)。

運(yùn)行查看效果：

游戲場(chǎng)景基本已經(jīng)創(chuàng)建好，接下來(lái)我們來(lái)加入4*4的數(shù)字卡片。

新建Card 精靈

新建CardSprite類來(lái)表示數(shù)字方塊，CardSprite是Sprite的子類。由顯示背景的LayerColor和顯示數(shù)字的Label組合而成。負(fù)責(zé)顯示2、4、8...數(shù)字方塊和不同的背景色。

數(shù)字卡片的創(chuàng)建

//初始化

void CardSprite::initCard(int number, int wight, int height, float CardSpriteX, float CardSpriteY)

{

//初始化數(shù)字

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);

}

上面代碼，通過(guò)指定位置和大小創(chuàng)建了一個(gè)顯示背景的LayerColor對(duì)象，然后將創(chuàng)建顯示數(shù)字的Label對(duì)象add到背景上，最后將其add到CardSprite上。

添加更新和獲取數(shù)字方法

//獲取數(shù)據(jù)

int CardSprite::getNumber()

{

return number;

}

//設(shè)置數(shù)據(jù)

void CardSprite::setNumber(int num)

{

number = num;

//更新顯示的數(shù)字

if (num > 0)

{

labelCardNumber->setString(__String::createWithFormat("%i",number)->getCString());

}

else

{

labelCardNumber->setString("");

}

//設(shè)置數(shù)字大小

if (num >= 0)

{

labelCardNumber->setSystemFontSize(100);

}

.......

if (num >= 1024)

{

labelCardNumber->setSystemFontSize(40);

}

//判斷數(shù)字的大小來(lái)調(diào)整顏色

if(number == 0){

colorBackground->setColor(Color3B(200,190,180));

}

.....

if (number == 2048) {

colorBackground->setColor(Color3B(0,130,0));

}

CardSprite的成員變量number保存卡片顯示的數(shù)字，colorBackground 在不同number下顯示不同的顏色。

在場(chǎng)景中加入4*4的數(shù)字卡片

數(shù)字卡片創(chuàng)建好后，就需要在游戲場(chǎng)景中加入。2048游戲中有4*4的數(shù)字卡片。加入卡片需要考慮卡片的布局，和屏幕的寬高，間隔。GameScene的成員變量二維指針cardArr保存對(duì)數(shù)字卡片的引用。根據(jù)屏幕顯示區(qū)域的大小，計(jì)算好卡片的大小和布局位置。將創(chuàng)建好的卡片add到GameScene。

//根據(jù)屏幕大小創(chuàng)建卡片

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);

}

隨機(jī)生成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的矩陣上，隨機(jī)取數(shù)字卡片初始為2或4。使用如下方法

int i = CCRANDOM_0_1() * 4; //生成0~3隨機(jī)數(shù)

將float轉(zhuǎn)為int，得到0~3的隨機(jī)數(shù)

//創(chuàng)建生成隨機(jī)卡片

void GameScene::createCardNumber()

{

while (1) {

int i = CCRANDOM_0_1() * 4; //生成0~3隨機(jī)數(shù)

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場(chǎng)景

初始化2048游戲場(chǎng)景，就是將創(chuàng)建好的場(chǎng)景中加入4*4的數(shù)字卡片和2個(gè)顯示數(shù)值的卡片。在GameScene::init()方法加入

//創(chuàng)建4X4卡片

createCardSprite(visibleSize);

//初始時(shí)生成兩個(gè)2

createCardNumber();

運(yùn)行效果如圖：

小結(jié)

在這節(jié)我們已經(jīng)完成了游戲的主場(chǎng)景和4*4的數(shù)字卡片。但是還缺少游戲上下左右滑動(dòng)移動(dòng)數(shù)字卡片，得分，游戲結(jié)束等邏輯。在下一節(jié)我們將加入游戲的邏輯、數(shù)據(jù)存儲(chǔ)和如何在android上運(yùn)行。

你可以在獲取游戲源碼（點(diǎn)擊下載源碼）。

關(guān)鍵詞：Cocos2d-x 2048 游戲