自序

大家好，我是来自中山大学的Jerry，接触javascript大约三年了，虽然不像业界的各路大神日夜专研，不过熬夜爆肝写code的日子也是不少，可以参考最近我搭配Canvas作的响应式LandingPage，每每用程序实现了精美的画面，就让我赞叹当今世界的进步，虽然称不上是精品/艺术，这样的质感是我所追求的，也因此选了一条如此偏门的道路，别人选择快速的css trasition animation，而我用canvas从零开始，就像组装乐高一样，体会到创造本身满满的乐趣。

当初因为机电专题设计人机介面，从C++串接网页，而接触了javascript，才知道原来网页能透过修改DOM来实时呈现许多资讯，打开了我在资讯视觉化的大门，那时我看到每个功能，都被我拿来图像化，像是arduino距离感测器的资讯、WebCam色彩转换後的HSV直方图，刚开始自己造轮子当然也是Bug满天飞，不过也多亏了那段日子朝夕相处，对於Cavnas API日渐熟悉，也打下了一定的基础。

这次的题目则是因为去年偶然看到了有文章在介绍 Web Audio API，当时就想要来DIY一下，这几个月正好进行到一个段落，那麽就打铁趁热，来总结一下写篇教学文吧！

这次挑战30天带大家用原生JS做一个网页游戏，其中主要会谈到:

1. Canvas API
2. Web Audio API
3. Object 物件导向
4. Array
5. Classes 类别函式
6. HSV 色彩模型

大概先列这几个吧！一方面想写的简单易懂，让入门者可以快速上手，又想写的详尽完整，提供一套良好的程序撰写观念，中间平衡点不好拿捏呢！也因为内容较多，在制作游戏途中那些"虽然是必要的"步骤，但跟JS较无相关的我都会事先做好，简单几句话带过拉！绝对不会用题外话来灌水，不用担心。

要做一个怎麽样的网页游戏?

因为Jerry我从小接触钢琴，因此特别喜欢纯音乐和一些以前的Flash音乐游戏，像是音乐捕手就是一个相当治癒人心的例子，去年暑假听说Flash要被google抛弃时，就决定要复刻这款游戏，因此踏上了研究web audio api的旅程，不巧当时正值浏览器开始对跨域请求(cross-origin)严格限制的时期，虽然有了一点小成果，却因为当时的我连CORS都不懂，就在9月中断了(音乐不能播放这点，考倒了我)，直至今年暑假，对後端多了些许知识的我，重启了这个专案，不仅颠覆了以前的写法，也把许多地方改动得更加简洁，所以就拿来分享给每一位想学Canvas的朋友，所以这系列的重点，也是帮助大家从有趣的实作中，来学习/复习JS拉！也希望这30天我一边写教案一边能迸发出更多的创意，彼此激荡一下吧!（Canvas同好在哪里~~~XDD）

大纲

Chapter1 DJ最爱的音频动感图像
Chapter2 Canvas动画+物件基础
Chapter3 Canvas动画+类别函式
Chapter4 玩音乐拉

完成游戏原型，来去拿给别人试玩

Chapter5 使命必达先生的追本溯源之旅
Chapter6 修改游戏玩法
Chapter7 例外处理和效能优化
Chapter8 添加UI

更:结果只完成了五个章节(汗

补充

在板上逛了本届铁人赛不同人物的文章，看到大家发文的理由都不尽相同，有陪着大家一起学习的，也有满腹经纶要分享的，当中更是不乏好文章，很开心今年有机会参与铁人赛，一起共襄盛举，不过也让我产生犹豫：文章的内容要长要短？要写给刚入门尚不熟悉JS的新手？还是对JS语言特性已有基本掌握的入门者，在整理这次的教案时，我意识到一个问题：我根本不知道来看我文章的会是谁，虽然不外乎就是想做游戏的人吧！只是这个范围仍然太大，难以调整内容，因此，跟大家说明一下我会怎麽敏捷式调整每天的内容。

在每个章节，我都会准备像是这样的图，让大家清楚该章节须掌握的相关技术，越下面(基本)我会越少提到，甚至直接带过，越上面(进阶)我会花越多篇幅讲解，这样的好处是：可以让每篇文的内容聚焦重点，又兼顾一项技术的完整性，缺点就是，如果我忽略太多，入门者可能会感到过多的挫折。其实，身为非本科生入行的我，很懂得在网路上自学时的困境，即使有足够的学习资源，却很少有人能教你看mdn文件，教你用什麽关键字搜寻，及时帮你解惑、纠正观念，而现代人早已花费大把时间在制式化的课业学习中，又怎麽有精力去要求自己花更多时间额外学习呢？若没有超凡的毅力，让你每隔几天去Udacity扎实学习，也是不太现实的。

多留言跟我互动吧!

因此，我的建议是，如果你真的对某个章节的内容感到困惑，那就放胆问吧！只要你愿意留言，我就会根据适应程度来调整後续的大钢，不过，假如某篇文的大钢是上面这张图，请不要突兀地问我Classes怎麽用，毕竟我不是js字典，要在网路上负责任地回答问题，我只会准备好这八个章节的内容，超钢的部分，我就不误人子弟了！不过，只要文章内有提到的，都尽量问没关系，或是你觉得能跟文章产生联系的，只要合乎逻辑就行。