# Cocos小游戏系列之方块弹珠 > 原文：https://pjhubs.com/2018/05/01/Cocos%E5%B0%8F%E6%B8%B8%E6%88%8F%E7%B3%BB%E5%88%97%E4%B9%8B%E6%96%B9%E5%9D%97%E5%BC%B9%E7%8F%A0/ > > 作者：PJHubs · 发布于 2018-05-01 · 标签：Cocos、游戏开发 ## 简介 这是我的游戏开发系列第一讲，我会在拥有下一个大串空闲的时间中持续开展此系列内容。这其中可能会涉及Cocos、Unity、白鹭、虚幻、LayaBox等游戏引擎。 先说明一点，方块弹珠这个名字我是直接拿微信小游戏上一块名为《方块弹珠》的微信小游戏的名字，去年暑假在某公司用了Cocos2D-X做了同类型两个版本的游戏，这次做的方块弹珠是第一个版本的精简版。在开始做这个系列之前，因为不再想用Cocos2D-X做任何东西了（当初第一次碰游戏开发太费劲了），有考虑过到底是用Cocos还是Unity，其实当初很大的动摇是来自于Cocos优秀的跨平台特性，而且App Store上前十的排行榜也告诉了我Cocos是多么“独秀”，不是说Unity不好啊，而是说Unity有更适合它的地方（等着我的AR开发系列😝）。 所以在“方块弹珠”这个游戏中我并未花费太多的时间去扣细节，花了两天半的时间完成了它。之前用Cocos2D-X中所踩下的坑，在使用Cocos Creator的过程中一样会遇到，不过Cocos Creator（以下简称：cc）却提供了一些“骚操作”直接告诉你应该如何绕过或者解决它。在使用cc的这段几天中，给了我一个非常幸福并且直观的感受——**做游戏就应该有个好的IDE**。😂 当然cc就目前市面上的游戏引擎来看，确实是做到了“世界第二，国内第一”的名号，但这也不保证了它是一点缺点没有。首先，我要吐槽的是API文档写的真的一点都不全，或者你也可以认为对萌新一点都不友好。大量的问题直接搜API文档都没结果，找到的只能是像“蜻蜓点水”般一语带过，或者上下文没法衔接上，不过这还是比去年暑假时的那版好多了，至少简练了很多。其次，cc这界面做的跟简直Unity一毛一样，曾一度怀疑是不是cc沾了Unity的光而已😓。最后，在使用cc的过程当中某些时候会出现一些迷之bug，不过在1.9.1版本的cc对这些bug处理的已经比较好了，不过还是有漏网之鱼，比如在当前Scene下添加新的Canvas后，原先的Canvas上的布局会有一定几率乱了。 项目体验：[http://api.pjhubs.com/bounceGame/](http://api.pjhubs.com/bounceGame/) ## 构建 因为cc现在的主体就是js全家桶，反正现在js啥都能做了，个人觉得跟py是平分秋色了。正是因为cc是js全家桶，也就导致了其能利用Native的runtime特性输出比肩Native的性能。这其中涉及到很多细节，包括如何拖拽sprite、修改相关属性等等，如果还用之前文章的写法估计会被累死，因此中会划分功能模块进行讲解。 ### 第一步——初识套路 如果你之前没有做过任何与游戏相关的内容，没有使用过IDE进行开发工作，那么推荐先**仔仔细细**研究一番这篇关于[制作第一个Hello World游戏](http://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html)的官方教程。 ### 第二步——拆分需求 先给大家放几张图，看看我是如何进行需求拆分的。 其实可以从上边的图中找出一点共性： 1. 都有指引小球发射的轨迹且发射小球； 2. 方块或星球能够对小球的撞击做出反应； 3. 小球能够累计； 4. 方块能够随着等级的上升增加难度。 以上是我抽出来的共性，当然还有一些其它的小的共性就不说了。这其中最大的共性是小球能够和周围的物体，包括方块、地面、边框等物体发生物理效果。这个物理效果才是我们去用这些诸如Cocos、Unity、LayaBox等所谓的物理引擎去完成，物理引擎就是用来处理如何在2D平面或者3D空间中模拟真实物理环境中的物理效果的。 ### 功能模块搭建 1. 搭建游戏主体框架，我们需要一个“框”充当围墙框住整个游戏界面，下图中箭头所指示的三条线都是`Sprite`，而且是加了碰撞体和刚体的精灵，记得在给`Sprite`添加碰撞体和刚体后开启**接触接听器**，这样才能够在对应的回调方法中接收到碰撞双方。而被红框框住的部分，也是个`Sprite`，需要的操作同围墙一致。 2. 通过第一步的搭建过程和上文所展示的三张图，相信大家也都看出来了方块和小球是持续不断的在增加并且我们无法预知玩家最后会进行到哪一步，所以我们是不能直接像添加围墙和地面一样直接进行拖拽，而是要动态的生成，而进行动态生成，我们可以直接就new一个sprite，然后再设置相关属性，还可以把这些重复操作封装成一个新的类进行使用，但是我们都用上cc了，肯定是不能这么玩的，cc提供了`prefab`（预制资源）这么个东西，其实说白了它相当于一个“静态”类，这个“静态”类只需要在cc中通过图形界面去设置相关属性即可，不用自己手撸代码去封装一个类（官方文档上有讲怎么做）。我们需要把方块、小球都做成预制资源。 3. 有了方块和小球的预制资源后，我们还需要诸如分数Label、玩法提示Label、小球数量Label等等“独立”的静态资源，这些资源可以直接进行拖拽显示，因为在整个场景的生命周期中，它们只需要出现一次就好了。 4. 在发射之前小球得知道自己的发射方向，而这个发射方向是通过指针的指向去确定的，通过指针的指向去判断小球的发射方向需要用到三角函数的知识，涉及到了弧度角度转化等的问题，以下是小球根据指针方向发射的代码， 5. 小球撞击到方块上时，方块颜色会随着方块本身的数值减小而变化，这个变化我们是不可能去通过rgb这三个通道直接去计算的，因为这得涉及到三个值的规律变化，我们得通过其他色值变化的方法去进行，而且还是只修改一个值就可引起颜色的变化，那其实指的就是HSV模型了。在HSV颜色模型中，H代表的是色相/色调，S代表饱和度，V代表亮度。H的取值是角度即0~360°，红色是0，240是蓝，其余的颜色可以根据角度自行计算啦~[丢个链接](https://baike.baidu.com/item/HSV/547122)。每当生成新方块时均调用一次根据当前生成方块的数值计算而出的HSV模型值，再转成RGB赋值回去就行啦~ 6. 这其中还涉及到了很多比如节点之间互相持有的问题，因为自己从cocos2d-x转换到cc上，从一个面向页面的开发到面向数据流的开发其实很难转换过来，在开发过程中老是按照老一套的MVC思想去做。 哎呀。千言万语难以说明白，本想要通过三篇文章的量去讲明白这个小游戏开发的过程，但时间上不太允许我写的太多了，先在此跟大家说声抱歉，不能够很好的讲解。当然这个项目只完成了1.0，这其中有一个隐藏bug，小球在一定数量的积累下，标识球会消失了，而且方块按照我之前的想法应该是当小球对其产生碰撞之后，方块的颜色应该要要被递减更新颜色。 ### 项目地址 [https://github.com/windstormeye/cocos/tree/master/bounce](https://github.com/windstormeye/cocos/tree/master/bounce)