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:

 
 
  
  $cdcocos2d-x
  
  $./setup.py
  
  $sourceFILE_TO_SAVE_SYSTEM_VARIABLE
  
  $cocosnewMyGame-pcom.your_company.mygame-lcpp-dNEW_PROJECTS_DIR
  
  $cdNEW_PROJECTS_DIR/MyGame
 
 
@H_404_87@ 

  按照上面操作执行 
 
  
  IvenYangtekiMacBook-Pro-2:Documentszeroyang$cocosnew2048-pcom.your_company.2048-lcpp
  
  Runingcommand:new
  
  >Copytemplateinto/Users/zeroyang/Documents/2048
  
  >Copyingcocos2d-xfiles...
  
  >Renameprojectnamefrom'HelloCpp'to'2048'
  
  >Replacetheprojectnamefrom'HelloCpp'to'2048'
  
  >Replacetheprojectpackagenamefrom'org.cocos2dx.hellocpp'to'com.your_company.2048'
  
  IvenYangtekiMacBook-Pro-2:Documentszeroyang$
 
 @H_404_87@ 

  我们创建了一个基于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'isanautoreleaSEObject
  
  autoscene=Scene::create();
  
  
  
  //'layer'isanautoreleaSEObject
  
  autolayer=GameScene::create();
  
  
  
  //addlayerasachildtoscene
  
  scene->addChild(layer);
  
  
  
  //returnthescene
  
  returnscene;
  
  }
 
 @H_404_87@ 

  GameScene::createScene()方法，首先创建了一个场景，然后创建layer将自己add到该场景。并返回。 
 

  在bool GameScene::init()中加入bgLayer 和显示score label 和 pause菜单 
 
  
  SizevisibleSize=Director::getInstance()->getVisibleSize();
  
  
  
  //加入游戏背景
  
  //1
  
  autolayerColorBG=LayerColor::create(Color4B(180,170,160,255));
  
  this->addChild(layerColorBG);
  
  
  
  
  
  //pause
  
  //2
  
  MenuItemFont::setFontName("Consolas");
  
  MenuItemFont::setFontSize(80);
  
  automenuItemPause=MenuItemFont::create("PAUSE",CC_CALLBACK_1(GameScene::onPause,this));
  
  
  
  
  
  automenu=Menu::create(menuItemPause,NULL);
  
  addChild(menu);
  
  menu->setPosition(Point(visibleSize.width-150,visibleSize.height/2+250));
  
  
  
  //创建分数
  
  //3
  
  autocardNumberTitle=Label::createWithSystemFont("score","Consolas",80);
  
  cardNumberTitle->setPosition(Point(visibleSize.width-150,visibleSize.height/2+50));
  
  addChild(cardNumberTitle);
  
  
  
  score=0;
  
  cardNumberTTF=Label::createWithSystemFont("0",70);
  
  cardNumberTTF->setPosition(Point(visibleSize.width-150,visibleSize.height/2-50));
  
  addChild(cardNumberTTF);
 
 @H_404_87@ 

  1、创建了一个LayerColor对象layerColorBG，用于做游戏的背景。 游戏的背景也可以使用精灵通过图片创建 
 

  2、使用MenuItemFont，指定字体和大小，创建了一个menuItemPause 菜单项，菜单的响应函数onPause执行点击菜单的响应。 
 

  3、创建了两个label,一个显示score标题，一个显示分数。当得分变化时时更新分数的显示。 
 

  替换HelloWorldScene，加入GameScene； 
 

  打开AppDelegate.cpp，加入头文件#include "GameScene.h"， 在Cocos2d-x的入口bool AppDelegate::applicationDidFinishLaunching()作如下修改， 
 

  将 
 
  
  autoscene=HelloWorld::createScene();
  
  director->runWithScene(scene);
 
 @H_404_87@ 

  改为 
 
  
  autoscene=GameScene::createScene();
  
  director->runWithScene(scene);
 
 @H_404_87@ 

  Cocos2d-x用Director类管理场景，访问和改变场景。通过上面修改，将我的游戏场景运行起来。 
 

  运行查看效果： 
 

  游戏场景基本已经创建好，接下来我们来加入4*4的数字卡片。 
 
 
 新建Card 精灵 
 

  新建CardSprite类来表示数字方块，CardSprite是Sprite的子类。由显示背景的LayerColor和显示数字的Label组合而成。 负责显示2、4、8...数字方块和不同的背景色。 
 

  数字卡片的创建 
 
  
  //初始化
  
  voidCardSprite::initCard(intnumber,153); font-weight:bold; background-color:inherit">intwight,153); font-weight:bold; background-color:inherit">intheight,153); font-weight:bold; background-color:inherit">floatCardSpriteX,153); font-weight:bold; background-color:inherit">floatCardSpriteY)
  
  {
  
  //初始化数字
  
  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(),100);
  
  labelCardNumber->setPosition(Point(colorBackground->getContentSize().width/2,colorBackground->getContentSize().height/2));
  
  labelCardNumber->setTag(8);
  
  colorBackground->addChild(labelCardNumber);
  
  }
  
  else
  
  {
  
  //加入字体
  
  labelCardNumber=Label::createWithSystemFont("",colorBackground->getContentSize().height/2));
  
  labelCardNumber->setTag(8);
  
  colorBackground->addChild(labelCardNumber);
  
  }
  
  
  
  this->addChild(colorBackground);
  
  }
 
 @H_404_87@ 

  上面代码，通过指定位置和大小创建了一个显示背景的LayerColor对象，然后将创建显示数字的Label对象add到背景上，最后将其add到CardSprite上。 
 

  添加更新和获取数字方法 
 
//获取数据
  
  intCardSprite::getNumber()
  
  {
  
  returnnumber;
  
  }
  
  
  
  //设置数据
  
  voidCardSprite::setNumber(intnum)
  
  {
  
  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,180));
  
  }
  
  .....
  
  if(number==2048){
  
  colorBackground->setColor(Color3B(0,0));
  
  }
  
  }
 
 @H_404_87@ 

  CardSprite的成员变量number保存卡片显示的数字，colorBackground 在不同number下显示不同的颜色。 
 
 
 在场景中加入4*4的数字卡片 
 

  数字卡片创建好后，就需要在游戏场景中加入。2048游戏中有4*4的数字卡片。加入卡片需要考虑卡片的布局，和屏幕的宽高，间隔。GameScene的成员变量二维指针cardArr保存对数字卡片的引用。根据屏幕显示区域的大小，计算好卡片的大小和布局位置。将创建好的卡片add到GameScene。 
 
  
  //根据屏幕大小创建卡片
  
  voidGameScene::createCardSprite(Sizesize)
  
  {
  
  //求出单元格的宽和高
  
  intcardSize=(size.height-36)/4;
  
  //绘制出4X4的单元格
  
  for(inti=0;i<4;i++)
  
  {
  
  intj=0;j<4;j++)
  
  {
  
  //需要屏幕分辨率适配
  
  CardSprite*card=CardSprite::createCardSprite(0,cardSize,cardSize*i+80,cardSize*j+20);
  
  cardArr[i][j]=card;
  
  addChild(card);
  
  }
  
  }
  
  }
 
 @H_404_87@ 
 
 随机生成2和4 
 

  cocos2d-x中提供了CCRANDOM_0_1()宏 
 
/**@defCCRANDOM_0_1
  
  returnsarandomfloatbetween0and1
  
  */
  
  #defineCCRANDOM_0_1()((float)rand()/RAND_MAX)
 
 @H_404_87@ 

  生成float范围是[0.f,1.f]。 我们需要在4*4的矩阵上，随机取数字卡片初始为2或4。使用如下方法 
 
  
  inti=CCRANDOM_0_1()*4;//生成0~3随机数
 
 @H_404_87@ 

  将float转为int，得到0~3的随机数 
 
//创建生成随机卡片
  
  voidGameScene::createCardNumber()
  
  {
  
  
  
  while(1){
  
  //生成0~3随机数
  
  intj=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;
  
  }
  
  }
  
  }
 
 @H_404_87@ 
 
 初始化2048场景 
 

  初始化2048游戏场景，就是将创建好的场景中加入4*4的数字卡片和2个显示数值的卡片。 在GameScene::init()方法加入 
 
//创建4X4卡片
  
  createCardSprite(visibleSize);
  
  
  
  //初始时生成两个2
  
  createCardNumber();
  
  createCardNumber();
 
 @H_404_87@ 

  运行效果如图： 
 
 
 小结 
 

  在这节我们已经完成了游戏的主场景和4*4的数字卡片。但是还缺少游戏上下左右滑动移动数字卡片，得分，游戏结束等逻辑。 在下一节我们将加入游戏的逻辑、数据存储和如何在android上运行。 
 

  点击下载 
 游戏源码。 
 

 

  

  
FROM:http://www.cocoachina.com/cocos/20140627/8964.html
 原文链接：https://www.f2er.com/cocos2dx/340060.html

Cocos2d-x 2048游戏教程 第一部分

猜你在找的Cocos2d-x相关文章

Cocos2d-x 2048游戏教程第一部分