开源夏令营之项目汇报10（结题报告）

日期：2014年8月30日，星期六

项目：腾讯开源 html5光影粒子引擎

导师：何骏

学生：董宁

好吧，我承认csdn-code的git我使用不恰当，今天上传项目的时候又把之前的搞丢了，所以只能传完后期项目再把前期项目补交一下了。

时间过的很快，今天已经是8月30日了，本来打算今天写项目汇报10然后明天写结题报告，

结果仔细一想，还是干脆一起写吧。

我记得当初我写中期报告的时候很自信，因为我前期做的还行，

可是这次不同，我后期项目做的不是很好，个人认为有点辜负何老师的栽培啊！

不过我真的尽力了，不管最后能不能通过终期检查，我都要感谢何老师，

因为如果不是何老师选我，

我不会跟csdn走的这么近，也就不会有了后期的到csdn实习，

更不会知道html5原来这么强大，这么火，

也更不会有项目经历。

何老师算是我的伯乐吧，如果以后真的有机会去深圳腾讯，我一定要请您吃顿大餐，以示感激。

好了，言归正传，

老实讲，前期项目我是七月在家一直坐下来的，

后来七月底八月初的时候正式到csdn实习，

所以后期项目只能是每天下班之后的晚上和周末正是做，

后期项目真的要比前期项目难的多，

上次与何老师通电话，

我能理解老师的意思，

也能想象的出来，老师要的粒子编辑器大概是这个样子的，如下图。



这张图是一个jar格式的粒子编辑器，只不过何老师的意思是把这个做成web的，这是我的理解。

我想过这个问题，

如果想在网页上实现这个效果，以我目前的能力只会java applet，不过据我了解java applet早已过时，而且实现起来是相当复杂的。

所以上次和老师商量做一个非傻瓜似的，高级粒子编辑器，如下图



由上图可见，左面是一个textarea，右面是一个iframe，

我们通过修改左面的代码，单击那个button，

直接可以在右面看到修改之后的特效，

其实很明显可以看得出，我这个比老师要求那个差远了，简直是天壤之别。

最开始设计这个的时候，还是有一定困难的，

比如左面放上代码，单击button，

根本不在右面显示，直接跳到新的页面，

比如我把创建粒子，开始绘制等一系列都封装好，做出一个函数，然后直接调用这个函数，配上相应的参数，

这就需要用到eval函数，

我学了相当一段时间的eval函数，

业研究了相当长一段时间的封装，

结果就是单击button，特效卡了。

以至于何老师交给我的封装任务，我没能完成。

后来为了后期项目最起码有个交代，

我按照了自己的思路来，

就比如上面截图的那个demo，

我不考虑它的封装，

直接把它的所有代码放在左面的textarea里，

以前如果用eval函数的话，左面的textarea是只能放javascript的，

所以这次干脆eval也不用，

我自己写了一个runcode.js，

点击button，触发runcode事件，直接运行textarea中的代码，如下图



刚开始，我在右面定义的可不是iframe，只是一个div，所以特效根本不在右面显示，

也是经过了一段时间的摸索才解决这个问题的。

所以虽说我这个编辑器做得很水，也是一点点摸索出来的。

按照这个方法完成了四个demo之后，问题又来了，

何老师的意思是要有一个select option，

然后选择哪个粒子，就出那个对应的特效，

真的很抱歉，我研究了几天，还是没做出来。

所以我采用了前期项目中的index，

也就是说点击哪个demo，就能编辑哪个。

不过何老师的要求我没达到，为了挽回一些，

我在index上加入了及时粒子特效，

也就是说打开index，直接能看到一些特效！如下图



如果所示，右面是一个div，这个div除了能显示途中的google，

还能显示一些文字特效和图片特效，

我印象很深，何老师跟我夸奖了proton的粒子特效，

所以后期我也特意研究了一下我在开题报告中的那个google的截图，

后来发我发现，那个根本不是文字特效，而是图片特效，

也就是说你放上去合适的图片，

它都能描绘出来，

而我这个也做到了，

就是说随便找一张png格式的图，

然后命名为car1.png，放在html的目录里，

我的这个index的div完全可以绘制出你的图的效果。

虽然没能完成何老师要的封装和select option，

但不知道这个能否挽回一下下。

我在后期的时候又仔细阅读了这个项目的具体要求，

我看老师写道，如果有时间的话可以做一款小游戏，

为了弥补，我尝试着做了一下，

不过只是基于canvas的，还没涉及到粒子方面，

我做的是一个简单，很简单的连连看，如下图



我用色块代表了同样的图案，点击一样的就会消掉，全部点击完成之后，就会进入下一关。

做这个游戏的时候真的很郁闷，

中途有段时间，完全不出效果！

再加上前面我没做出的傻瓜式粒子编辑器，

我明白一个道理，

就是不要瞧不起那些难看的网站，

想做成那样也是很难的。

最后，我在解释一个问题，

我这次往code上传了四个项目，

除了游戏和那个前期项目以外，

后期项目一个是IE的，一个是chrome的，

这两个版本用ie打开都是完全正常的，

用chrome打开的话，

index'中的及时特效会显示不正常，

这个问题我在上周就发现了，

遗憾的是，经过了这一周的努力我还是没能解决。

提交之前，我在每个文件里都加上相应的文档说明readme.txt，

方便别人对粒子编辑器的操作。

以上就是我整个暑假项目的结题报告，

无论是否能通过检查，

我最开心的就是能认识何老师，

因为我的梦想就是进腾讯，做梦都想不到做手机qq5.0的牛人就是我的导师，这也是我的荣幸。

通过这一暑假的项目，

让我学习到了很多难以言喻的东西，

最重要的是，我以后可以自豪的在简历中写我接过腾讯的项目！

我记得当初和我竞争这个项目的有很多名牌大学的研究生，

而我不过是普通一本的一个大二刚结束的渣渣，

最后还是要感谢何老师能给我这次机会。

没能做出傻瓜式粒子编辑器和封装的particles.js，在这里跟您说声抱歉。

接下来的两年大学生活，我还会继续努力，多参加一些这样的活动。