寒風的Cocos2dx之旅之剪刀、石头、布系列专题1

本节小编为读者们讲述如何在cocos2d上做一个剪刀石头布的游戏，游戏画面如下：

首先看到这个画面：我们来分析一下它到底有几个层？有菜单层、显示结果层、显示分数层、显示菜单背景层。宏观角度上看：有3个层：背景层->精灵层->菜单层。

让我们看看SettingScene.h头文件中都定义了什么：

#include "cocos2d.h"
#include "HelloWorldScene.h"
class SettingScene:public cocos2d::Layer
{
public:
	static cocos2d::Scene* createScene();
	//初始化╮(╯▽╰)╭
    virtual bool init();
    //定义的监听回调函数╮(╯▽╰)╭
    void shitou(cocos2d::Ref* pSender);
    void jiandao(cocos2d::Ref* pSender);
	void bu(cocos2d::Ref* pSender);
	//宏定义*************************************PS：当时就是因为下边括号里是HelloWorld而纠结为何场景不能切换╮(╯▽╰)╭
	CREATE_FUNC(SettingScene);
	 //分别设定点击按钮的背景、分数框体的背景
    cocos2d::LayerColor* backcolor1;
	cocos2d::LayerColor* backcolor2;
	cocos2d::LayerColor* backcolor3;
	//定义显示数字的标签控件
    cocos2d::LabelTTF* LabelTTFCountScore;
	cocos2d::LabelTTF* LabelTTFWinScore;
	cocos2d::LabelTTF* LabelTTFLoseScore;
	cocos2d::LabelTTF* LabelTTFDrawScore;
	//定义计算出拳次数
	void ChuquanCount();
    //定义胜利次数
	void WinCount();
	//定义失败次数
	void LoseCount();
	//定义平局次数
	void DrawCount();
};

之后先在SettingScene.cpp中实现场景的回调：

Scene* SettingScene::createScene()
{
    auto scene = Scene::create();
	auto layer = SettingScene::create();
    scene->addChild(layer);
    return scene;
}

在Init()中定义：

	//设置按钮的背景
	backcolor1 = cocos2d::LayerColor::create(cocos2d::Color4B(0xFF,0x00,0x80),visibleSize.width-350,200);
	backcolor1->setPosition(Point(200,10));
	//backcolor1->setAnchorPoint(Point(200,0));
    this->addChild(backcolor1);
	//设置分数框体背景
	backcolor2= cocos2d::LayerColor::create(cocos2d::Color4B(30,144,255,255),140,150);
	backcolor2->setPosition(Point(30,340));
	this->addChild(backcolor2);
	//设置PLAY标签
	auto LabelTTFPlay=LabelTTF::create("Play:","HiraKakuProN-W3",30);
	LabelTTFPlay->setPosition(Point(250,190));
	LabelTTFPlay->setColor(Color3B(0,127));//*********************RGB颜色
	addChild(LabelTTFPlay);
	//设置分数标签
	auto LabelTTFCount=LabelTTF::create("count:",30);
	LabelTTFCount->setPosition(Point(80,460));
	addChild(LabelTTFCount);
	auto LabelTTFWin=LabelTTF::create("Win:",30);
	LabelTTFWin->setPosition(Point(80,430));
	addChild(LabelTTFWin);
	auto LabelTTFLose=LabelTTF::create("Lose:",30);
	LabelTTFLose->setPosition(Point(80,400));
	addChild(LabelTTFLose);
	auto LabelTTFDraw=LabelTTF::create("draw:",30);
	LabelTTFDraw->setPosition(Point(80,370));
	addChild(LabelTTFDraw);
	//游戏提示关键词：
	auto LabelTTFPlayer=LabelTTF::create("Player",40);
	LabelTTFPlayer->setPosition(Point(350,500));
	addChild(LabelTTFPlayer);
	auto LabelTTFCom=LabelTTF::create("Com",40);
	LabelTTFCom->setPosition(Point(650,500));
	addChild(LabelTTFCom);

现在我们把几个背景层建立好了，下边就是将菜单层放到我们的背景中：

        //添加所需要的精灵
	auto sprite01=Sprite::create("shitou.png");
	sprite01->setPosition(Point(300,100));
	this->addChild(sprite01);

	auto sprite02=Sprite::create("jiandao.png");
	sprite02->setPosition(Point(500,100));
	this->addChild(sprite02);

	auto sprite03=Sprite::create("bu.png");
	sprite03->setPosition(Point(700,100));
	this->addChild(sprite03);

	auto sprite04=Sprite::create("title.png");
	sprite04->setPosition(Point(500,550));
	this->addChild(sprite04);

	auto spritePlayer=Sprite::create("shitou.png");
	spritePlayer->setPosition(Point(350,350));
	this->addChild(spritePlayer);
	spritePlayer->setScale(1,1);

	auto spriteComputer=Sprite::create("shitou.png");
	spriteComputer->setPosition(Point(650,350));
	this->addChild(spriteComputer);
	spriteComputer->setScale(1,1);

	//加入具体的分数
	LabelTTFCountScore=LabelTTF::create("0",30);
	LabelTTFCountScore->setPosition(Point(150,460));
	addChild(LabelTTFCountScore);
	LabelTTFWinScore=LabelTTF::create("0",30);
	LabelTTFWinScore->setPosition(Point(150,430));
	addChild(LabelTTFWinScore);
        LabelTTFLoseScore=LabelTTF::create("0",30);
	LabelTTFLoseScore->setPosition(Point(150,400));
	addChild(LabelTTFLoseScore);
	LabelTTFDrawScore=LabelTTF::create("0",30);
	LabelTTFDrawScore->setPosition(Point(150,370));
	addChild(LabelTTFDrawScore);

PS：小编我当时编写程序的时候遇到了个问题，在这里想跟大家分享一下

①Layer这个类没法定义锚点，所以要setPosition来定义它的位置，在你定义背景的长度宽度基础上。

cocos2d::Color4B(30,150

括号里的前三个是颜色值RGB，百度一下RGB颜色表。最后一个是透明度，255是不透明，0是全透明。140和159分别代表背景区域的宽度和高度。

这样游戏界面就顺利完成了！