Cocos2d-X之别踩白块

发布时间：2020-12-14 21:25:37 所属栏目：百科来源：网络整理

导读：原文：http://www.jb51.cc/article/p-kimawtbd-bho.html 自己学了快两个月的cocos2d-x了，前几天自己看着教学视频，跟着做了一个小游戏——别踩白块。今天来说一说我自己是如何写这个项目的。逻辑有点乱，不知道看不看得懂。。。。首先，这个游戏有两个场

原文：http://www.52php.cn/article/p-kimawtbd-bho.html

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

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

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

开始场景如下：

开始场景里面有三类块：

起始块（黄色，有Start Game）
正常块（黑白块）
结束块（绿色，有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 类写好后，就可以开始写游戏逻辑了。

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

失败场景如下：

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

 
 行号函数就是用来设置（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> 
 添加正常块的函数如下： 
 
 添加结束块的函数如下： 
 到这里，我们就可以设置好最开始的布局了，写一个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版本的混搭…… 
 首先设置触摸监听： 
 
 然后在写点击事件函数： 
 
 现在看看点击事件函数的中的moveDown函数： 
 
 moveDown函数中又有一个moveDownAndCleanUp函数，我们把它写在了Block类里面 
 上面moveDown函数和moveDownAndCleanUp函数都是为了实现玩家在点击时的滚屏效果。
  
 前面说的都是游戏顺利完成的情况，下面来说，游戏失败的情况——在点击到白块时，游戏失败
 我们用了一个if语句来判断是否点击到了白块： 
 
 如果踩到白块，则播放 wrong 音效，并且切换到游戏失败的场景。 
 补充，在游戏中我们还加入了计时功能和播放音乐的功能 
 首先说说计时功能： 
 1.首先设置一个标志和一个变量 
 2.再创建一个 Label 来显示时间 
 3.然后再 写两个函数计时器startTimer和stopTimer 
 4.然后将startTimer与stopTimer分别放入触摸响应函数的if条件中 
 
 再说说播放音乐的功能： 
 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.再在相应部分加入播放音效的代码 
 
 好了，到这里差不多完成了。上面给了一些代码片段，若需要看完整代码，请移步至：（github）别踩白块 
 写得有点乱，若有不足之处还请斧正。
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!