铁人赛後感言 - 趣闻分享、30天回顾、四大收获、Canvas游戏後续发展

本次铁人赛的作品，你玩过了吗?

先分享一件趣闻

在我上礼拜完成这个音乐游戏後，我将它分享给了一些人看，包括我的印度室友，没想到他深有感触，在凌晨5点的时候把我叫上顶楼看星星，他称这颗树就像是他人生的写照，有着许许多多的枝叶（人际关系），看似丰富、却总是会有掉落的一天，事实上，两周前他才和前女友分手，让他觉得生而为人总是孤单的，即使你试图用一颗心去挽救这一切，却发现自己所能做的，是多麽的不起眼、和多麽的无力。

爱心是游标的位置、生命值则对应了树叶所剩余的数量，可以看到右边已经秃了一大块

每颗树都是独一无二的

上面这段故事让我相当震惊，原来，即使你的成就一点也不伟大，却还是能撼动某一个不起眼的角落，有多少人，驻足在铁人的报名填写画面、困惑着自己的未来，该选哪个题目、又该选哪个组别，自我挑战组是不是标准比较低？总会有很多疑惑的声音吧，有一刻我也想过，要不就自我挑战吧，到时候写得差也没关系。纵使有这些纷扰在，我认为当你把自己视为作者的那一刻，你的文章和作品，便是独一无二的，也是具有灵魂的，也许我无法欣赏它，但一定会有愿意欣赏它的人。

室友的回馈令我相当惊喜，同时让我了解到，原来一个简单的游戏可以这麽有深度，虽然我没有把树枝作为人际关系的比喻，不过我确实认真的把它当作一颗树看待，希望让玩家感受到这是一颗真实的树，因此前前後後用了6篇文在造树，让其具有丰富的随机性和真实性，如果有看过github，就会发现我在树的原型方法上注解掉了一些代码，当时我在尝试如何让树枝更加曲折丰富，用了多条贝兹曲线，以及用fill和stroke会有不同效果，不过最後还是采用了最简单且兼顾效能的爱心型贝兹曲线，这方面未来若有研究大概又可出一篇吧！

个人最喜欢的是开头这棵树所展现的生命力，右边分支比较晚出头，却不比左边来的小
尤其是每次点击画面都能重新再长一颗树的小彩蛋，如果直接点Start就错过了

我认为，能让这位印度室友如此有共鸣的理由，便是在细节处的刻画了吧！而且，如果在开头画面听着音乐，驻足好一阵子，便会发现背景的落叶不只是动画，而是树的生命真的在流逝，最终会呈现其光秃秃的样貌，而此时点击画面已经并不会让树再次生长了。

30天回顾

参加铁人赛的其中一个好处，就是回去读自己文章时，会有意想不到的感受，回想起当下自己原来是这麽想的呀！以我来说就是第一周特别认真在写文章，就会有过了一个月的自己再回去看年轻时自己的感觉，试着把很多东西写得很详细，加上第一章本身就比较混合了两个主题，涉及的面向很杂，可能就不是很好抓重点，得有耐心的一直读下去，不过对我来说是一个蛮好的体验，可以学习怎麽把话讲清楚，实作则是简单的音乐频谱图：

CH1 Canvas音乐播放器
当中的渐层动态效果不是特别重要，份量大概也只够写半篇文，所以就一直没找到机会写，若有兴趣的话底下留言敲碗，後续再挑一个章节来讲色彩转换。

接下来第二章是动画基础中的基础，我自己心里大概有底，这边的Demo大概会比较单调一些，我用的不是物理效果，而是比较偏向Flash动画去调整路径曲线，不过对於动画流程有一个完整的描写，我在这过程中也是对於帧数的控制和掌握更加清楚，尤其是要把程序码整理给读者，有些地方是第一次做，花了不少功夫。

CH2 Canvas动画入门、CH2 Canvas动画基础

第三章是中间的一个过渡期，进入物件篇後，我开始犹豫要从理论还是实作下手，先前我尝试提供足够的理由告诉读者，不是因为JS有物件才要用物件，而是透过物件可以规模化的产出程序码，这一大优势，不过这边我突然对一个问题没有答案「如果物件建构式就能解决的问题，为什麽我要引入Class类别函式呢？」，也因此到头来还是用最基本的函式来做树叶，因为我找不到一个很好的理由，也许是我对JS或Class写法的理解不够吧，於是我从开赛前Class的写法，回归了基本的物件用法，起码，这对於初学者来说，肯定是更单纯，并且能打好地基吧！

CH3 Binary Tree 物件递回、CH3 Binary Tree 树梢装饰

到了第四章对我来说是一个重头戏，算是受Flash音乐游戏「音乐捕手Music Catch 2」的启发，让我想尝试做这样令人放松的游戏，里头的音乐创造了很独特且静谧的空间，像是星空、梦境、也像是水波、镜面，不过Flash真的是时代的眼泪了，现在只剩别人拍的影片纪录可以看了，果然这些老游戏已不具备有被移植到HTML上的价值，再也玩不到了，这就是我去年花了大把时间想实现的动画效果，那时懵懂的我没用过Unity，当然也不会知道粒子系统，想着反正动画这麽规律！直接造轮子没什麽问题吧？不要瞎掰好嘛

CH4 Canvas背景动画（I）
CH4 Canvas背景动画（II）
CH4 Canvas背景动画（III）

也花了一段时间累积，最初版本的原始码是拿不出手见人的，去年12月，直接越级打怪为落叶归根这首歌做了一个网页，有着简易PPT功能的歌词动画投影片，当中有许多的落叶随风而逝，如果不想一页页播放歌词，可以用数字键1-5快速切换到其他场景，总共大约有30多张投影片。

其实还有另外三首歌，包含迪士尼冷门的曲子，不过当初的程序码一首歌的js动辄就上千行，没有简洁的架构，布局也相当混乱，在几首曲子来回修改的地方花了一大堆时间，抓了一堆bug，全因对浏览器的很多特性不理解。所以我大概了解，对於入门者来说，要产出这样的专案，会有不少坑等着去踩，包括audio元件、图片素材的使用，这也是我前期先用一二章做准备的理由之一，事後看来，用章节来切分算是相当不错的做法。

每个礼拜的心境都不一样

刚讲到这三个章节就花了18天，一方面是每天花费的时间比我想的还要多，另一方面是即使多花了点时间，仍然没办法在4天内完成一个章节。第一周结束的时候觉得，虽然有些辛苦，观看量也不差，心里觉得要对得起这几十个每天准时看文章的人，到第二周情况就不太一样了，没有那麽多读者会陪着你走完这条路，他们也有自己的人生，即使阅读文章只是5~10分钟左右的事，我开始意识到铁人赛终究是孤单的，得靠自己走完全程，这也是铁人赛的精神，没有人会陪伴你、也没人会妨碍你，敌人只有自己。

意识到这点其实就坦然许多了，同时我也开始调整策略，之前都比较早开始写，就会导致时间越晚越焦虑，接下来就晚点起步，大概7.8点再开始，然後11点多完成（虽然到头来都会超过12点，编修排版用句、或是准备截图和程序码的呈现）

铁人赛的收获

大约三周过去，我就开始跟人分享这段期间的收获了，我几乎可以肯定的是，铁人赛的回报是相当的高，主要体现在几点：

1. 学习怎麽表达，把概念讲出来、说一个故事或比喻

（我还准备了两篇使命必达先生的故事，想搭配拉面篇讲解prototype，不过最後没机会塞进30天里，有兴趣一样底下敲碗XD）

2. 为了不要讲错内容、误人子弟，会更积极的去查阅文件或仿间说法，验证自己的观念

（平常会觉得7.8成懂就好，能实作就好，遇到问题再说）

3. 对於程序码的编排增加不同角度的观点，从原本自己方便为主，到开始思考如何更有步骤地拆解架构

（比如去问音乐系的同学怎麽视谱，即看即演奏，它会说先看节拍、乐句、调性，接着每个小节的和弦，最後才看音符。要从大方向到细节，而自己撰写程序码的盲点，就如同重复演奏同一首曲子，经常只看向细节之处，忽略了大方向）

4. 有一个很明确的目标，可以带来相当大的动力，只要这辆火车不会出轨！而且在火车头的视野最好，会意外的扩大格局、看到很多相关资源，是以前自己从来不知道的。

（比方说第三章的二元树就是本次最大的学习，毕竟写网页不太需要演算法，递回这玩意，在时隔将近十年後再次挑战，也是不错的体验）

至於副作用嘛，大概是後面会想休息整整一周，毕竟这100多的小时花是花下去了，累是一定会累，建议是好好规划後面玩乐的部分XD，才能早点回满血。

说回游戏本身

进展到第五章的时候我非常兴奋，几乎是在我进到画树的章节後，我就对整个游戏的轮廓很有感觉，经常在想像最终呈现的效果，不过事实证明，还好我没有直接冲到100%，有先完成一个原型拿去给别人试玩，因为有了印度室友的回馈，让我对於故事、情节有更多的想像，事实上前阵子实况圈有一款蛮红的游戏「节奏医生」，就是基於音乐的主玩法下，增添了很多丰富的像素美术和故事剧情，我觉得根据这点来设计关卡会是很好的想法，我们这系列共完成了3种动画，至少就能做3种场景。也许，那是一个寒冷的冬天，室内温暖的炉火照亮了墙壁上的画作，一幅幅是男女主人翁的回忆，今天是圣诞夜，窗外一个个雪人正是稍早他们嬉笑着一起造的，然而他们却因一些小事而吵架了，当女主只身一人，落寞地望向窗外的雪人，心中便满是不舍。

核心玩法也不变，就是外头的雪会不断落下，玩家要设法接住他们，不过这次要保护的对象变成了雪人，为了屋檐、树梢上堆积的雪，掉下来压坏雪人。

算是蛮期待的後续的变化的，不过可能就这几个月慢慢更新噜，最近也有在看three.js，也许明年会尝试3D也说不定，至於一直未解的效能问题未来会用web worker来解决JS单线程的问题，采用CPU多核心的多线程方法增加算力，记得有个读者对效能议题蛮有兴趣，也可以先去认识一下这个特殊的API。