基于Cocos Creator开发的打砖块游戏

一、简介

• Cocos简而言之就是一个开发工具，详见官方网站
• TypeScript简而言之就是开发语言，是JavaScript的一个超集详解官网

今天我们就来学习如何写一个打砖块的游戏，很简单的一个入门级小游戏。

二、实现过程

2.1 布局部分

首先来一个整体的工程界面：

一看就很简单吧，就几个元素+脚本(之所以分开写是为了便于查错)。

再来一个游戏界面：很简洁有木有？当然啦，美观的工作需要各位小伙伴自行发挥啦。好了，下面进入正题…

首先，创建一个新的“世界”名字叫game。将场景设置为640X960

然后，你在这个世界花了1亿买了一块地皮，当然得有地契“BG”（在Canvas下新增一个空节点将大小改为640X960，或者你自己选择一张背景，拖在Canvas下设置大小就ok了，至于其他的就默认）

好了，有地皮了，你就可以“为所欲为”了。先添加砖块吧：

将砖块拖到Canvas下，然后拖回Texture就成了预制体（很简单有木有）。

至于大小什么的可以用代码控制。

因为是砖块，要和小球碰撞，所以要加上物理碰撞。

知识点

• cc.RigidBodyType.Static：静态刚体，零质量，零速度，即不会受到重力或速度影响，但是可以设置他的位置来进行移动
• cc.RigidBodyType.Dynamic：动态刚体，有质量，可以设置速度，会受到重力影响
• cc.RigidBodyType.Kinematic：运动刚体，零质量，可以设置速度，不会受到重力的影响，但是可以设置速度来进行移动
• cc.RigidBodyType.Animated：动画刚体，在上面已经提到过，从 Kinematic 衍生的类型，主要用于刚体与动画编辑结合使用

这里我们选择：

• Type：Static(静止)，在那等着小球来碰撞。然后给他添加一个包围盒PhysicsBoxCollider
• PhysicsBoxCollider 类型，摩擦力、弹性系数请自由发挥

再来是我们的主角：

同样的给他一个碰撞组件，Type: Dynamic；然后添加包围盒

下面就是托盘，也是Static

然后添加一个空节点，大小比BG小一些，他的作用其实就是“围墙”，避免小球或托盘飞出场景。同时添加碰撞组件和包围盒。

然后还有个foot_line，这个就是监测小球掉下去游戏结束。

还有个count ，后面再说这个计数。好了，罗里吧嗦的布局就完成了。

2.2 代码部分

我们首先建一个game的游戏脚本，用来初始化一些节点（其实所有的代码都可以放在一个脚本里，但是遇到复制的程序的时候不便于查错，所以该分开写的还是要分开写。

首先呢，我们要加载一些节点变量。写代码的时候带上注释是好习惯哦！

我们来一个创建砖块的方法吧：

我采用的是中规中矩的生成方法，通过i和j控制行和列，然后在设置横向间距即可最后生成的结果为：（其他的样式，只要找到规律生成即可。）

再来我们看onload方法：