Cocos2d-X之别踩白块

原文：http://www.jb51.cc/article/p-kimawtbd-bho.html

自己学了快两个月的cocos2d-x了，前几天自己看着教学视频，跟着做了一个小游戏——别踩白块。

今天来说一说我自己是如何写这个项目的。逻辑有点乱，不知道看不看得懂。。。。

首先，这个游戏有两个场景，一个是开始场景，一个是失败场景。

---

开始场景如下：

开始场景里面有三类块：

1. 起始块（黄色，有Start Game）
2. 正常块（黑白块）
3. 结束块（绿色，有You Win）

起始块如下：

正常块如下：

结束块如下：

因为这个游戏都是以块为单位的所以可以将这些块统称为抽象块，所以要给块来写一个 create 方法如下：

<code class="hljs sql has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">static Block * <span class="hljs-operator" style="Box-sizing: border-Box;"><span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">create</span>(<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">Size</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">size</span>,Color3B color,String str,<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">float</span> strSize,Color3B strColor);</span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,238,238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,221,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li></ul>

这个函数里面有五个参数，第一个参数是块的大小 size ；第二个参数是块的颜色 color ；第三个参数是在块上要显示的字符串 str ；第四个参数是字符串的大小 strSize ；第五个参数是字符串的颜色 strColor 。

我们创建块的时候要确定块的大小，如

• 起始块：宽为，winSize.width；高为，winSize.height/4
• 正常块：宽为，winSize.width/4；高为，winSize.height/4
  这里除以4是将屏幕给分成了4×4个正常块
• 结束块：宽为，winSize.width；高为，winSize.height

注意：这里的 winSize 就是屏幕的大小。

现在把 Block 类写好：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-preprocessor" style="color: rgb(68,68,68); Box-sizing: border-Box;">#ifndef __Block_H_</span>
<span class="hljs-preprocessor" style="color: rgb(68,68); Box-sizing: border-Box;">#<span class="hljs-keyword" style="Box-sizing: border-Box;">define</span> __Block_H_</span>
<span class="hljs-preprocessor" style="color: rgb(68,68); Box-sizing: border-Box;">#include "cocos2d.h"</span>
USING_NS_CC;
class Block : <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">public</span> Sprite
{
<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">public</span>:
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">static</span> Block * <span class="hljs-title" style="Box-sizing: border-Box;">create</span>(Size size,Color3B strColor);
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">bool</span> init(Size size,Color3B strColor);

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//类内部静态成员在单独的内存里的，</span>
    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//在定义的时候已经存在了，它不属于某一个对象，只属于这个类</span>
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">static</span> Vector<Sprite *> vec; <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//用来存放已经创建好的块</span>
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">static</span> Vector<Sprite *> getBlockVector();

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//产生get方法和set方法</span>
    CC_SYNTHESIZE(<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">int</span>,_LineIndex,LineIndex);

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//向下移动块，并且清除</span>
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">void</span> moveDownAndCleanUp();
};

<span class="hljs-preprocessor" style="color: rgb(68,68); Box-sizing: border-Box;">#<span class="hljs-keyword" style="Box-sizing: border-Box;">endif</span></span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li><li style="Box-sizing: border-Box; padding: 0px 5px;">19</li><li style="Box-sizing: border-Box; padding: 0px 5px;">20</li><li style="Box-sizing: border-Box; padding: 0px 5px;">21</li><li style="Box-sizing: border-Box; padding: 0px 5px;">22</li><li style="Box-sizing: border-Box; padding: 0px 5px;">23</li><li style="Box-sizing: border-Box; padding: 0px 5px;">24</li><li style="Box-sizing: border-Box; padding: 0px 5px;">25</li></ul>

将 Block 类写好后，就可以开始写游戏逻辑了。

1. 游戏一开是就进入开始场景，只要玩家一开始点击黑块游戏就会开始。
2. 玩家只能按顺序点击黑块，即每次都是点击最下面的黑块。
3. 玩家只要正确地点击了黑块，那个被点击的黑块就会变成灰色，
   被点击那一行块就会往下移动，并且在屏幕上方添加一新行。
4. 玩家在点击玩所有的黑块后，即赢得胜利，出现结束块。
5. 若玩家点到了白块则游戏失败，切换到游戏失败的场景。

失败场景如下：

---

开始游戏，我们需要将屏幕最开始的布局给设置好，大家可能已经注意到 Block 类中有一个行号函数

Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">CC_SYNTHESIZE(<span class="hljs-keyword" style="color: rgb(0,LineIndex);</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li></ul>

行号函数就是用来设置（set）和得到（get）块的行号的，行号在屏幕上只有0到3行，
如下图所示

首先我们需要三个函数，分别添加开始块，正常块和结束块。

在开始的布局中第0行添加开始块，第 1，2，3行添加正常块。
在点击完所有的黑块后添加结束块。

添加开始块的函数如下：

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-literal" style="color: rgb(0,102,102); Box-sizing: border-Box;">void</span> LayerGame<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::addStartLineBlock</span>()
{
    Size startBlockSize <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> Size(winSize<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>width,winSize<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>height/<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">4</span>);
    Block <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span> b <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> Block<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::create</span>(startBlockSize,Color3B<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::YELLOW</span>,<span class="hljs-string" style="color: rgb(0,136,0); Box-sizing: border-Box;">"Start Game"</span>,<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">30</span>,102); Box-sizing: border-Box;">::BLUE</span>);
    b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setPosition(Point(<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">0</span>,102); Box-sizing: border-Box;">0</span>));
    this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>addChild(b);
    b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setLineIndex(<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">0</span>);<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//设置行号为0</span>
    _lineCount<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">++</span>;<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//行数+1，注意，不是行号，行号只有0，1，2，3这4行，而行数可以一直增加</span>
}</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li></ul>

添加正常块的函数如下：

Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',102); Box-sizing: border-Box;">::addnormalLineBlocks</span>(int LineIndex)
{
    Size normalBlockSize <span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">.</span>width/<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">4</span>,102); Box-sizing: border-Box;">4</span>);
    int idx <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> rand()<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">%</span><span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">4</span>;<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//取一个0到3之间的随机值</span>
    for(int i <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">0</span>; i <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;"><</span> <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">4</span>; i<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">++</span>)<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//一下添加一行，即4块</span>
    {
        Block <span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">::create</span>(normalBlockSize,i <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">==</span> idx <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">?</span> Color3B<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::BLACK</span> : Color3B<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::WHITE</span>,<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">/*设置黑白块*/</span>
                                  <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">""</span>,102); Box-sizing: border-Box;">::WHITE</span>);
        b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setLineIndex(LineIndex);
        <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//根据 i 和 LineIndex 来设置位置</span>
        b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setPosition(Point( i <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span> winSize<span class="hljs-built_in" style="color: rgb(102,LineIndex <span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">4</span> ) );
        this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>addChild(b);
    }
    _lineCount<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">//行数+1</span>
}</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li></ul>

添加结束块的函数如下：

 到这里，我们就可以设置好最开始的布局了，写一个StatGame函数如下：
 
<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">void LayerGame<span class="hljs-value" style="Box-sizing: border-Box;">::startGame()
{
    addStartLineBlock();</span>
    <span class="hljs-function" style="Box-sizing: border-Box;">addnormalLineBlocks(<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span>)</span>;
    <span class="hljs-function" style="Box-sizing: border-Box;">addnormalLineBlocks(<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">2</span>)</span>;
    <span class="hljs-function" style="Box-sizing: border-Box;">addnormalLineBlocks(<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">3</span>)</span>;
}</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li></ul>
 
 现在来有了最开始的布局了,就可以开始写点击事件了，因为我看的视频教程是cocos2d-x3.0以下的版本，而我自己用的却是3.0的版本，所以，就造成了我写的代码3.0以下的版本和3.0版本的混搭……
 
 首先设置触摸监听：
 
Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//3.0版本</span>
    auto listener <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> EventListenerTouchOneByOne<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::create</span>();
    listener<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setSwallowtouches(<span class="hljs-literal" style="color: rgb(0,102); Box-sizing: border-Box;">true</span>);<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//吞噬</span>
    listener<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>onTouchBegan <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> CC_CALLBACK_2(LayerGame<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::onTouchBegan</span>,this);
    this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>_eventdispatcher<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>addEventListenerWithSceneGraPHPriority(listener,this);</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li></ul>
 
 然后在写点击事件函数：
 
Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">bool LayerGame<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::onTouchBegan</span>(Touch <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span>touch,Event <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span>unused_event)
{
    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//遍历所有存在vec中的块 C++11方法</span>
    for (auto obj : Block<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::getBlockVector</span>())
    {
        Block <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> (Block <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span>)obj;
        <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//判断是否点击到该块，且行号为1</span>
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> (b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>boundingBox()<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>containsPoint(touch<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getLocation()) <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">&&</span>
            b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getLineIndex() <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">==</span> <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span>)
        {
            <span class="hljs-keyword" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getColor() <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">==</span> Color3B<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::BLACK</span>)<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//点到黑块</span>
            {
                <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//播放音效</span>
                SimpleAudioEngine<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::getInstance</span>()<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>playEffect(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"onclick.wav"</span>);
                <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//开始计时</span>
                this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>startTimer();
                <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//将被点击的黑块变灰</span>
                b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setColor(Color3B<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::GRAY</span>);
                <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//被点击的这行下移</span>
                this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>moveDown();
            }
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">else</span> <span class="hljs-keyword" style="color: rgb(0,102); Box-sizing: border-Box;">::GREEN</span> )<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//点到结束块</span>
            {
                <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">"gamewin.wav"</span>);
                <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//终止计时</span>
                this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>stopTimer();
                <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//下移</span>
                this<span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">::WHITE</span>)<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//点到白块</span>
            {
                <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">"wrong.wav"</span>);
                Scene <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span> scene <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> LayerFailed<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::scene</span>();
                Director<span class="hljs-tag" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>replaceScene(scene);<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//切换到失败场景</span>
            }
            break;
        }
    }
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> <span class="hljs-literal" style="color: rgb(0,102); Box-sizing: border-Box;">false</span>;
}</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li><li style="Box-sizing: border-Box; padding: 0px 5px;">19</li><li style="Box-sizing: border-Box; padding: 0px 5px;">20</li><li style="Box-sizing: border-Box; padding: 0px 5px;">21</li><li style="Box-sizing: border-Box; padding: 0px 5px;">22</li><li style="Box-sizing: border-Box; padding: 0px 5px;">23</li><li style="Box-sizing: border-Box; padding: 0px 5px;">24</li><li style="Box-sizing: border-Box; padding: 0px 5px;">25</li><li style="Box-sizing: border-Box; padding: 0px 5px;">26</li><li style="Box-sizing: border-Box; padding: 0px 5px;">27</li><li style="Box-sizing: border-Box; padding: 0px 5px;">28</li><li style="Box-sizing: border-Box; padding: 0px 5px;">29</li><li style="Box-sizing: border-Box; padding: 0px 5px;">30</li><li style="Box-sizing: border-Box; padding: 0px 5px;">31</li><li style="Box-sizing: border-Box; padding: 0px 5px;">32</li><li style="Box-sizing: border-Box; padding: 0px 5px;">33</li><li style="Box-sizing: border-Box; padding: 0px 5px;">34</li><li style="Box-sizing: border-Box; padding: 0px 5px;">35</li><li style="Box-sizing: border-Box; padding: 0px 5px;">36</li><li style="Box-sizing: border-Box; padding: 0px 5px;">37</li><li style="Box-sizing: border-Box; padding: 0px 5px;">38</li><li style="Box-sizing: border-Box; padding: 0px 5px;">39</li><li style="Box-sizing: border-Box; padding: 0px 5px;">40</li><li style="Box-sizing: border-Box; padding: 0px 5px;">41</li><li style="Box-sizing: border-Box; padding: 0px 5px;">42</li></ul>
 
 现在看看点击事件函数的中的moveDown函数：
 
Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',102); Box-sizing: border-Box;">::moveDown</span>()
{
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> (this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getLineCount() <span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">20</span>)<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//如果行号小于20</span>
    {
        this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>addnormalLineBlocks(<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">4</span>);<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//则添加一正常行，并设置行号为4</span>
    }
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> (<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">!</span>showEnd)<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//如果行号不小于20且标志showEnd为false</span>
    {
        this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>addEndLineBlock();<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//则添加结束块</span>
        showEnd <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> <span class="hljs-literal" style="color: rgb(0,102); Box-sizing: border-Box;">true</span>;<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//并将showEnd设置为true</span>
    }
    for (auto obj : Block<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::getBlockVector</span>())<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//遍历这一行所有块</span>
    {
        Block <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span>)obj;
        b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>moveDownAndCleanUp();<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//将他们下移且从渲染树中删除</span>
    }
}</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li></ul>
 
 moveDown函数中又有一个moveDownAndCleanUp函数，我们把它写在了Block类里面
 
 上面moveDown函数和moveDownAndCleanUp函数都是为了实现玩家在点击时的滚屏效果。
 
 
 前面说的都是游戏顺利完成的情况，下面来说，游戏失败的情况——在点击到白块时，游戏失败
 我们用了一个if语句来判断是否点击到了白块：
 
Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0,102); Box-sizing: border-Box;">::WHITE</span>)
{
    SimpleAudioEngine<span class="hljs-tag" style="color: rgb(0,0); Box-sizing: border-Box;">"wrong.wav"</span>);
    Scene <span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">::scene</span>();
    Director<span class="hljs-tag" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>replaceScene(scene);
}</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li></ul>
 
 如果踩到白块，则播放 wrong 音效，并且切换到游戏失败的场景。
 
 补充，在游戏中我们还加入了计时功能和播放音乐的功能
 
 首先说说计时功能：
 
 1.首先设置一个标志和一个变量
 
 2.再创建一个 Label 来显示时间
 
 3.然后再 写两个函数计时器startTimer和stopTimer
 
 4.然后将startTimer与stopTimer分别放入触摸响应函数的if条件中
 
Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',102); Box-sizing: border-Box;">::BLACK</span>)
{
    SimpleAudioEngine<span class="hljs-tag" style="color: rgb(0,0); Box-sizing: border-Box;">"onclick.wav"</span>);
    this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>startTimer();<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//开启计时器</span>
    b<span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">::GRAY</span>);
    this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>moveDown();
}

<span class="hljs-keyword" style="color: rgb(0,102); Box-sizing: border-Box;">::GREEN</span> )
{
    SimpleAudioEngine<span class="hljs-tag" style="color: rgb(0,0); Box-sizing: border-Box;">"gamewin.wav"</span>);
    this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>stopTimer();<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//关闭计时器</span>
    this<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>moveDown();
}
</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li></ul>
 
 再说说播放音乐的功能：
 
 1.首先要包含头文件
 
<code class="hljs PHP has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">#include "SimpleAudioEngine.h"</span>
using <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">namespace</span> <span class="hljs-title" style="Box-sizing: border-Box;">CocosDenshion</span>;</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,85); font-family:'microsoft yahei'; font-size:14px; line-height:35px"> 2.再在相应部分加入播放音效的代码
 
Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',102); Box-sizing: border-Box;">::BLACK</span>)
{
    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//播放点击音效</span>
    SimpleAudioEngine<span class="hljs-tag" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>startTimer();
    b<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>moveDown();
}
<span class="hljs-keyword" style="color: rgb(0,102); Box-sizing: border-Box;">::GREEN</span> )
{
    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//播放胜利音效</span>
    SimpleAudioEngine<span class="hljs-tag" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>stopTimer();
    this<span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">::WHITE</span>)
{
    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//播放失败音效</span>
    SimpleAudioEngine<span class="hljs-tag" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>replaceScene(scene);
}
</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li><li style="Box-sizing: border-Box; padding: 0px 5px;">19</li><li style="Box-sizing: border-Box; padding: 0px 5px;">20</li><li style="Box-sizing: border-Box; padding: 0px 5px;">21</li><li style="Box-sizing: border-Box; padding: 0px 5px;">22</li><li style="Box-sizing: border-Box; padding: 0px 5px;">23</li></ul>
 
 好了，到这里差不多完成了。上面给了一些代码片段，若需要看完整代码，请移步至：（github）别踩白块
 
 写得有点乱，若有不足之处还请斧正。