通过Cocos2d-html5库自带的../samples/tests文件来学习Cocos2d-html5游戏引擎

这学期要开设”web程序设计课”，总觉得做一个博客或者是某某管理系统，虽然颇为考验一个人的编程水平，却很是无趣，所以我计划做html5游戏，游戏毕竟对没有接触过编程的人来说是很神奇的物品（满足笔者小小的虚荣心）。

 

在网上搜索了很久，也没有找到关于Cocos2d-html5的比较正式的文档（不过关于Cocos2d-x的文档倒是很多）。所以我决定不依靠教程也不依靠文档，单单看引擎库里的tests代码来学习该引擎，这应该会是一个比较有趣的体验（虽然不一定会成功，但自学能力对于coder是非常重要的技能）。

 

前段时间刚刚看过一篇“如何学一门新技术”的文章。文章传递的思想是：如果你要学一门新技术，不要从最基础的语言开始慢慢准备，那样会磨光你的耐心，而是应该直接动手做你要做的工程，后期再来关注语言细节和基础。放在Cocos2d-html5引擎学习上就是，虽然笔者对于JavaScript，html5,css3的了解甚少，但还是毅然拿起了引擎开干，等过段时间，有需要了，再来好好补偿基础内容。

 

以上的内容仅仅是开篇的感想，以下才是干货。

 

首先看看tests文件夹的内容：

 



 

 

1.文件夹的内容是具体的测试文件，先不考虑。

2.build.xml是编译引擎生成的文件清单报告。

3.main.js游戏的入口

4.tests_resources-html5.js定义游戏将要使用的资源的文件。

5.tests-boot-html5.js引擎的配置文件。

6.test_main.js该游戏（测试例程）的主要结构文件，类似于C++的main。

7.其它和jsb有关的内容，不考虑。



 

 

main.js的最后一行（63）表明游戏从TestController（场景或层）开始。

 

考虑TestController这个类，

这个类继承了LayerGradient，呈现了一个层，层的颜色是渐变的，层上有两个菜单：第一个菜单有两个菜单项（关闭按钮，控制是否自动测试的开关按钮），第二个菜单有对应不同测试项目的多个菜单项。还实现了滚动鼠标和拖动鼠标第二个菜单滚动的响应事件。（有关各个类，函数的具体内容，留待研究单个测试实例时考虑，现在主要把握游戏逻辑）

 

如上述，游戏启动后，呈现了这样一个层。

 

当我们点击第二个菜单中的任意一项时，会触发菜单项的响应函数，生成目标测试例的场景，并将当前主场景替换为该场景，我们会在该场景中实现该测试例的所有操作。

 

考虑所有测试例场景有共性，所以我们实现一个TestScene 类并在该类中实现各个场景的共性功能，以供其它所有场景类继承。

 

场景上有一个菜单，菜单上有一个返回TestController层的菜单项。

 

考虑所有测试例的层有共性，所以实现一个BaseTestLayer实现所有层的共性功能，以供其它所有层继承。

 

层上有，两个代表测试内容的标题，一个菜单上面有3个菜单项，分别表示重新测试，下一个测试，上一个测试。

 

完成以上逻辑后，就可以一个个实现测试例了，主要是实现一个个层。

 

注意：我们在不同文件中定义的变量，如果希望被其它文件找到的话，就需要特别注意文件的包含顺序，如下图：

 

 





 

后面的文件可以找到前面的文件定义的变量，但是前面的文件时无法找到后面的文件定义的变量，关于这个问题，初期困扰了笔者许久。

 

结束了外层逻辑的建立后，就可以一个一个的考虑测试例，来深刻的研究这个引擎。所以现在对于外层的这些类和函数不了解也没有关系。