Cocos2d-x 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
3. 运行 cocos 脚本创建工程
 
Example:
 
 
  1. $ cd cocos2d-x 
  2. $ ./setup.py 
  3. $ source FILE_TO_SAVE_SYSTEM_VARIABLE 
  4. $ cocos new MyGame -p com.your_company.mygame -l cpp -d NEW_PROJECTS_DIR 
  5. $ cd NEW_PROJECTS_DIR/MyGame 
按照上面操作执行
 
 
  1. IvenYangtekiMacBook-Pro-2:Documents zeroyang$ cocos new 2048 -p com.your_company.2048 -l cpp  
  2. Runing command: new 
  3. > Copy template into /Users/zeroyang/Documents/2048 
  4. > Copying cocos2d-x files... 
  5. > Rename project name from 'HelloCpp' to '2048' 
  6. > Replace the project name from 'HelloCpp' to '2048' 
  7. > Replace the project package name from 'org.cocos2dx.hellocpp' to 'com.your_company.2048' 
  8. 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静态方法的实现。
 
 
  1. Scene* GameScene::createScene() 
  2. // 'scene' is an autorelease object 
  3. auto scene = Scene::create(); 
  4.  
  5. // 'layer' is an autorelease object 
  6. auto layer = GameScene::create(); 
  7.  
  8. // add layer as a child to scene 
  9. scene->addChild(layer); 
  10.  
  11. // return the scene 
  12. return scene; 
GameScene::createScene()方法,首先创建了一个场景,然后创建layer将自己add到该场景。并返回。
 
在bool GameScene::init()中加入bgLayer 和显示score label 和 pause菜单
 
 
  1. Size visibleSize = Director::getInstance()->getVisibleSize(); 
  2.  
  3. //加入游戏背景 
  4. //1 
  5. auto layerColorBG = LayerColor::create(Color4B(180, 170, 160, 255)); 
  6. this->addChild(layerColorBG); 
  7.  
  8.  
  9. //pause 
  10. //2 
  11. MenuItemFont::setFontName("Consolas"); 
  12. MenuItemFont::setFontSize(80); 
  13. auto menuItemPause = MenuItemFont::create("PAUSE", CC_CALLBACK_1(GameScene::onPause, this)); 
  14.  
  15.  
  16. auto menu = Menu::create(menuItemPause, NULL); 
  17. addChild(menu); 
  18. menu->setPosition(Point(visibleSize.width - 150, visibleSize.height/2 + 250)); 
  19.  
  20. //创建分数 
  21. //3 
  22. auto cardNumberTitle = Label::createWithSystemFont("SCORE","Consolas",80); 
  23. cardNumberTitle->setPosition(Point(visibleSize.width - 150, visibleSize.height/2 + 50)); 
  24. addChild(cardNumberTitle); 
  25.  
  26. score = 0; 
  27. cardNumberTTF = Label::createWithSystemFont("0""Consolas", 70); 
  28. cardNumberTTF->setPosition(Point(visibleSize.width - 150, visibleSize.height/2 - 50)); 
  29. addChild(cardNumberTTF); 
1、创建了一个LayerColor对象layerColorBG,用于做游戏的背景。 游戏的背景也可以使用精灵通过图片创建
2、使用MenuItemFont,指定字体和大小,创建了一个menuItemPause 菜单项,菜单的响应函数onPause执行点击菜单的响应。
3、创建了两个label,一个显示SCORE标题,一个显示分数。当得分变化时时更新分数的显示。
 
替换HelloWorldScene,加入GameScene;
 
打开AppDelegate.cpp,加入头文件#include "GameScene.h", 在Cocos2d-x的入口bool AppDelegate::applicationDidFinishLaunching()作如下修改,
 
 
 
  1. auto scene = HelloWorld::createScene(); 
  2. director->runWithScene(scene); 
改为
 
 
  1. auto scene = GameScene::createScene(); 
  2. director->runWithScene(scene); 
Cocos2d-x用Director类管理场景,访问和改变场景。通过上面修改,将我的游戏场景运行起来。
 
运行查看效果: 
游戏场景基本已经创建好,接下来我们来加入4*4的数字卡片。
 
新建Card 精灵
新建CardSprite类来表示数字方块,CardSprite是Sprite的子类。由显示背景的LayerColor和显示数字的Label组合而成。 负责显示2、4、8...数字方块和不同的背景色。
 
数字卡片的创建
 
 
  1.   //初始化 
  2. void CardSprite::initCard(int number, int wight, int height, float CardSpriteX, float CardSpriteY) 
  3.     //初始化数字 
  4.     this->number = number; 
  5.     //加入卡片背景颜色 
  6.     colorBackground = LayerColor::create(Color4B(200,190,180,255),wight-15,height-15); 
  7.     colorBackground->setPosition(Point(CardSpriteX,CardSpriteY)); 
  8.  
  9.     //判断如果大于0就显示,否则就不显示 
  10.     if (number > 0) 
  11.     { 
  12.         //加入字体 
  13.         labelCardNumber = Label::createWithSystemFont(__String::createWithFormat("%i",number)->getCString(),"Consolas",100); 
  14.         labelCardNumber->setPosition(Point(colorBackground->getContentSize().width/2, colorBackground->getContentSize().height/2)); 
  15.         labelCardNumber->setTag(8); 
  16.         colorBackground->addChild(labelCardNumber); 
  17.     } 
  18.     else 
  19.     { 
  20.         //加入字体 
  21.         labelCardNumber = Label::createWithSystemFont("","Consolas",100); 
  22.         labelCardNumber->setPosition(Point(colorBackground->getContentSize().width/2, colorBackground->getContentSize().height/2)); 
  23.         labelCardNumber->setTag(8); 
  24.         colorBackground->addChild(labelCardNumber); 
  25.     } 
  26.  
  27.     this->addChild(colorBackground); 
上面代码,通过指定位置和大小创建了一个显示背景的LayerColor对象,然后将创建显示数字的Label对象add到背景上,最后将其add到CardSprite上。
 
添加更新和获取数字方法
 
 
  1.   //获取数据 
  2. int CardSprite::getNumber() 
  3.     return number; 
  4.  
  5. //设置数据 
  6. void CardSprite::setNumber(int num) 
  7.     number = num; 
  8.     //更新显示的数字 
  9.     if (num > 0) 
  10.     { 
  11.         labelCardNumber->setString(__String::createWithFormat("%i",number)->getCString()); 
  12.     } 
  13.     else 
  14.     { 
  15.         labelCardNumber->setString(""); 
  16.     } 
  17.  
  18.     //设置数字大小 
  19.     if (num >= 0) 
  20.     { 
  21.         labelCardNumber->setSystemFontSize(100); 
  22.     } 
  23.     ....... 
  24.     if (num >= 1024) 
  25.     { 
  26.         labelCardNumber->setSystemFontSize(40); 
  27.     } 
  28.  
  29.     //判断数字的大小来调整颜色 
  30.     if(number == 0){ 
  31.         colorBackground->setColor(Color3B(200,190,180)); 
  32.     } 
  33.     ..... 
  34.     if (number == 2048) { 
  35.         colorBackground->setColor(Color3B(0,130,0)); 
  36.     } 
CardSprite的成员变量number保存卡片显示的数字,colorBackground 在不同number下显示不同的颜色。
 
在场景中加入4*4的数字卡片
数字卡片创建好后,就需要在游戏场景中加入。2048游戏中有4*4的数字卡片。加入卡片需要考虑卡片的布局,和屏幕的宽高,间隔。GameScene的成员变量二维指针cardArr保存对数字卡片的引用。根据屏幕显示区域的大小,计算好卡片的大小和布局位置。将创建好的卡片add到GameScene。
 
 
  1. //根据屏幕大小创建卡片 
  2. void GameScene::createCardSprite(Size size) 
  3.     //求出单元格的宽和高 
  4.     int cardSize = (size.height - 36) / 4; 
  5.     //绘制出4X4的单元格 
  6.     for (int i = 0; i < 4; i++) 
  7.     { 
  8.         for (int j = 0; j < 4; j++) 
  9.         { 
  10.             //需要屏幕分辨率适配 
  11.             CardSprite *card = CardSprite::createCardSprite(0, cardSize, cardSize, cardSize*i+80, cardSize*j+20); 
  12.             cardArr[i][j] = card; 
  13.             addChild(card); 
  14.         } 
  15.     } 
 
随机生成2和4
cocos2d-x中提供了CCRANDOM_0_1()宏
 
 
  1. /** @def CCRANDOM_0_1 
  2.  returns a random float between 0 and 1 
  3.  */ 
  4. #define CCRANDOM_0_1() ((float)rand()/RAND_MAX) 
生成float范围是[0.f,1.f]。 我们需要在4*4的矩阵上,随机取数字卡片初始为2或4。使用如下方法
 
 
  1. int i = CCRANDOM_0_1() * 4;        //生成0~3随机数 
将float转为int,得到0~3的随机数
 
 
  1. //创建生成随机卡片 
  2. void GameScene::createCardNumber() 
  3.  
  4.     while (1) { 
  5.         int i = CCRANDOM_0_1() * 4;        //生成0~3随机数 
  6.         int j = CCRANDOM_0_1() * 4; 
  7.  
  8.         log("[%d][%d]",i,j); 
  9.  
  10.         if (cardArr[i][j]->getNumber() == 0) 
  11.         { 
  12.             //2和4的生成率为9:1 
  13.             cardArr[i][j]->setNumber(CCRANDOM_0_1()*10 < 1 ? 4 : 2); 
  14.             break
  15.         } 
  16.  
  17.         if (!shouldCreateCardNumber()) { 
  18.             break
  19.         } 
  20.     } 
 
初始化2048场景
初始化2048游戏场景,就是将创建好的场景中加入4*4的数字卡片和2个显示数值的卡片。 在GameScene::init()方法加入
 
 
  1. //创建4X4卡片 
  2. createCardSprite(visibleSize); 
  3.  
  4. //初始时生成两个2 
  5. createCardNumber(); 
  6. createCardNumber(); 
运行效果如图:
 
 
小结
在这节我们已经完成了游戏的主场景和4*4的数字卡片。但是还缺少游戏上下左右滑动移动数字卡片,得分,游戏结束等逻辑。 在下一节我们将加入游戏的逻辑、数据存储和如何在android上运行。
 
点击下载 游戏源码



FROM: http://www.cocoachina.com/cocos/20140627/8964.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值