HTML5 Code Jam 活动分享

上周末(3月24-3月25),我兴致勃勃的跑去深圳参加HTML5研究小组组织的Code Jam,之前一直在微博上关注他们的活动、作品,这回终于有机会亲身去见识、体验,兴奋不已呀~~

这个Code Jam活动是一个32小时的封闭开发,现场完成策划、组队、开发、展示,绝对是充满激情创意的一个活动——没错,就是它了

另外再Show一下我们的作品:Kill Kony:http://killkony.sinaapp.com/,这么短时间弄出个这样的东西也不容易~ (手势输入,欢迎体验~ 支持iOS触屏设备哟~)

 

创意 Idea~

这个游戏的idea是我们团队超有爱心的策划美眉提出的,让更多的人知道有Kony这个恶人的存在(不知道Kony是谁?请猛击这里),每个人内心都是善良的,正义无国界!

初步的设想中还有些更复杂的游戏规则,但是考虑到时间问题,在这一版本中把那些需求都砍掉了,只留下了最核心的部分。虽然使用手势操作在用户体验上有点别扭,但当时抱着技术探讨的心态,也就没想这么多了(手势操作还是挺有新意的,或许是后来拿奖的关键原因吧)。

整个游戏本来是想走小清新的可爱风格的,可惜由于美工方面人力较为分散,把可爱风走成了“土著风”,不过也蛮符合故事背景的,也是我们的特色之一呀~ [哈哈] ~

 

爆发 Big Bang!

为啥叫做“Big Bang”呢?因为,这就是一次Big Bang(可能是《生活大爆炸》看多了)~

活动开始是每个人的自我介绍和创意介绍。有机会和真正的大牛们亲密接触,那种感觉真是爽呀~ 而且大家的策划都是很有新意的,让人大开眼界~ 此外,各种“基”、各种“腐”、各种“母爱”、各种“勾搭”,也让现场欢笑连连。

当时我们的团队有6个人,一个策划美眉,一个美工美眉,两个开发(我就是其中一个小开发了),两个兼职美工(同时支持多支队伍……)。组好队之后,发现我们团队的4个核心成员竟然都是未毕业的学生,虽然无人可“抱大腿”,但是我们还是充满了信心,年轻人嘛,潜力无限~

html5是个尚未成型的新技术,有很多的东西可以探索,是一个充满神秘的领域,游戏开发也是一个我很少接触的东西,当一堆新鲜事物突然涌入你大脑的时候,真有种宇宙爆炸的感觉。32个小时我估计也就休息了2个小时左右,绝对的废寝忘食,连上洗手间也是一路小跑,一心只想着把作品弄好。真正开发的时间可能还不到24小时,绝对能体验到那种潜能爆发的感觉……

 

经验 Experience

这次开发中还是有不少经验、教训和收获的,非常感谢队友的给力,我也从中学到不少东西~

协作

其实整个开发过程中,最大的问题应该是协作的问题。由于现场网络不好,我们是用U盘互相拷文件来协同的……而且在这么短的时间内开发,如何解决开发的分工合作问题也是关键。开发方面,我们采取的是一种“事件模型”方法进行合作,每个模块只需专注于自己的逻辑,通过事件触发来传递消息,大大减少了模块之间的耦合度,提高了开发的效率。其核心就是一个“观察者模式”,可以直接去参考源码,或者看我之前写的一篇博客《JS观察者模式》。

项目管理方面则用的是原始而有效的“白板方式”,虽然没有白板,但是我带去了一叠稿纸,项目排期、产品细节、程序逻辑等等这些交流的东西都用纸笔写下来、画出来,一目了然,说不清楚的东西就写清楚、画清楚。不让交流只停留在嘴上,也方便随时回顾,把问题弄清楚了再下手,对这种短时间、小团队的合作还是很有帮助的。

简化问题

32小时内要做出一款好的、完善的产品很困难,并且在策划、开发、美工基本并行工作的情况下更加不容易了,划分小迭代、增量开发是必须且关键的。刚一开始,我们花了些时间讨论了很多关于游戏可玩性、操作方法、攻击特效等东西,但后来都没有加到产品中,在这种快速的开发中其实真的不应该太去揪细节,关键在于不断完善,与其空口说大话,不如先踏踏实实把已有的方案做出来。

在技术方案上,其实刚开始也选了个很大的框架-impact.js,这框架的确相对成熟可靠,但也徒增了学习成本,在这样一个小项目中,其实有很多的特性都用不上,或许会把问题给弄复杂了。后来是选择使用自己封装的小框架,学习成本低,也更容易弄清楚整个逻辑的来龙去脉,反而可以事半功倍。

不过合理的使用类库、框架还是有好处的,在活动的最后有人推荐了一个手势识别的库: dollar.js,如果当初采用这个类库就可以把手势识别这部分做的更好了。

性能

另外一方面就是性能的问题,主要的性能问题在于绘制图片,我们的游戏有5层的景深,需要不断的重绘背景图片,刚开始由于切图大小的问题,在绘图之前使用scale对图片进行了缩放,在桌面浏览器上没问题,可是一到移动设备上就直接内存占用过多而自动退出了(找了好久才发现这个问题)……

同时不同设备画完一帧的时间也不同,如果用setInterval的方式循环调用的话,可能前一帧还没画完,后一帧就开始了,然后卡着卡着……就挂了。为了解决这个问题,又引入了一个节拍器的概念,同时使用了一个新的API-requestAnimationFrame,只在上一帧绘图完成之后才触发下一帧的绘制,并通过节拍器控制动画节奏,避免了setInterval的问题。

 

最后谦虚的贴个小奖状:(奖状内容有误,应该是最佳技术团队奖~)

 

发布者

Rolf

伪文艺IT攻城师,热爱前端,热爱互联。

《HTML5 Code Jam 活动分享》有6个想法

  1. 看来收获甚丰呀,玩过你们的游戏了,手势触控操作流畅度还不错哦,如果配个乐,会加分不少,不过在32小时内的作品,在我心中已经是技术大牛了呀

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

[喜欢] [嘻嘻] [奋斗] [问号] [鼓掌] [泪] [酷] [强] [耶] [握手] [心] [给力] [神马] [围观] [奥特曼] more »