HTML5和在线的劲乐团

最近一直构思着做一个在线的劲乐团。我期待着过去之后的 hackathon 环节，能找些人一起做一下。

28号的上午一直在家做一些准备工作。劲乐团的音符数据，都是从一个开放的Be-Music Script 格式转过来的。另外，网上也有不少 O2Jam note file(.ojn, .ojm) 资源，都是二进制文件，而且不一定是开放格式，所以先不考虑了。转数据的脚本最开始是参考 github 上的一个项目 O2.js， 不过这个项目现在很草稿，里面的解析脚本有问题。一上午在家，把BMS 转成 frame 位置到音符的映射表。基本可以让音符自己往下掉了。做的过程中也遇到了不少坑。比如，O2Mania 游戏中，对按键键位的定义，跟原始的BMS 格式定义不一样，导致解析后音符错位。折腾到12点半才出门。活动一点钟开始的，我估计坐公交换地铁，肯定会迟到了，于是直接打车过去。

下车之后，问人才找到地方，在一个小区里，场地是一个咖啡厅，两个房间。人挺多，看起来报名的人都有一两百，当然没全来，还有没报名现场直接签 到的，有是多个人。我扫下名单，没我名字，然后在后面加上去了。我去里面房间，找一个位子坐下了。现场有免费的饮料、点心。刚好中午没吃饭，于是吃些点心 充饥。我谁都不认识，刚开始也没怎么跟别人聊。过了好一会儿杜欢才来，然后讲座开始。第一个讲座是淘宝的李晶将怎么用 HTML5 做网站，讲了不少兼容性问题，我站后面跟杜欢听了下。第二讲是杜欢的，关于 HTML5 的游戏开发。第二讲和第三讲我都没仔细听。因为音乐和音符出现明显的不同步，发现了脚本生成的数据中，BPM（beats per minute）不对。然后改脚本，大概是那时候BPM解析的问题解决了。

讲座完了之后，就是传说中的 hackathon 环节了。我直接过去找杜欢，结果他说可能没空参与… 还好杜欢旁边坐着的是上上次创新工厂的 HTML5 交流会上认识的邱迪，然后我把我的想法跟他说了一下，顺便邀请另外两人一起做。项目介绍花了好长时间 =，= 后来觉得费时，我直接说分工了。4个人，我继续解决音乐和音符的同步问题，邱迪做游戏流程控制，男A做 canvas 效果，女B 做canvas 外部的页面… 我的代码直接放 github 上的，男A 用 mac，可以直接 clone git 项目，邱迪和女B 木有 git，只好用U盘…… hackathon 在紧张的气氛中开始了……

Hackathon 过程中，我做的事情基本上是 数值的调整以及代码合并。计算 frame 位置的公式是我昨晚推导出来的。直接按照公式，音符下落的速度很快。也不知道是公式的问题，还是实际fps 不准，我把生成数据脚本中的 fps 参数，从32 改到128，下落速度基本ok了；然后是调初始帧的数值，都是很细节的东西，不一一说了。后来合并代码，邱迪的开始界面写了两个，一个是 HTML，一个是用 canvas 画出来的。合了号半天才成功。女B做的东西改了canvas 的宽度，引发一系列问题，后来直接放弃了… 她住的似乎比较远，代码给我之后她提前回家了。男A的代码是做按键时的渐变效果。我看他是先自己写测试页面再来改我代码…… 靠谱。合代码也不顺利，一开始效果不理想，然后叫杜欢帮忙看，他也查文档做调整，还是实现了预期效果。代码合好了之后我才松口气吃饭去…… 对了，Google 连晚餐都提供了……

作品展示。我还是挺紧张，台下是想的东西到了台上都忘了说。3个小时，刷几道算法题还可以，做游戏的话时间太短。而且感觉 是 Hackathon 的参与者大多比较小白，我也算一个吧…… 然后是作品评分，然后就有了一个二等奖。领奖时还是紧张了，CCTV都谢了都没谢Google… 奖品是一个音响，由于开发基本上是我主导，我就把奖品独吞了…… 回去的地铁上跟男A聊了下，男A同学在读研，创新工厂实习，做豌豆荚的；本科居然是学的经管，挺靠谱的一人，赞一个…

回来之后再仔细看这个活动博客：http://www.enjoyhtml5.com， 才发现活动是 Google Chrome 技术推广部组织的。我也顺便推广下 chrome 。我笔记本 Ubuntu 11.04 上，我都把自带的 firefox 4 都删掉了。普通使用的话，firefox 没有不能被 chrome 取代的地方；firefox 的程序框架也比chrome 厚重；稳定性和易用性也是 chrome 胜出。即使是对于咱们程序员而言，研究出chromium 的安全漏洞可以拿悬赏奖金，你看firefox 代码有这好处么……

update at 5.31:

在 github 上建立了一个 project page, 可以看 sample: http://liruqi.github.com/gin-samples/o2/ 可能会后续做完善。

 

from http://liruqi.wordpress.com/2011/05/29/google-html5-training-and-hackathon/