鐵人檔案
（第一篇文章將於9/8發佈）
身為業餘玩家，接觸Canvas API大約三年了，什麼套件都不熟悉，唯獨DIY最厲害，所以這次要挑戰用原生JS（又稱 Vanilla JS）打造治癒人心的休閒音樂遊戲，那麼，就跟我一起從微小平凡之處，體驗Vanilla JS的強大設計彈性和可能性吧！
－－－－－－
1. 利用Canvas API和Web audio API來製作動畫和音頻可視化，
2. 並學會製作自己的簡易框架，強化物件基礎概念和透過類別(Classes)實體化物件，
3. 藉由繪製Logic Flow流程圖釐清程式邏輯，以及利
自序 大家好，我是來自中山大學的Jerry，接觸javascript大約三年了，雖然不像業界的各路大神日夜專研，不過熬夜爆肝寫code的日子也是不少，可以參考最...
在開始前，還沒看過序章的朋友們，可以點擊進去，教學大綱和主題方向都寫在裡面囉！ 看完這章節，你會學到... 地基一定要打穩，如果基本的還不會的話，建議先去w...
完成上傳機制後，等著我們的是．．． 今天的一開始先花一點點時間，把昨天的事件監聽做完吧！這邊準備好一個基本的介面： Css就不做教學了XD，大家用自己喜歡的樣...
加油!這章節快完成了 根據上面這張圖，我們寫好了以下的程式碼，就成功得到經由傅立葉轉換的音頻訊號了，取得了名為dataArray音頻陣列，耶比~~可以開始圖像化...
話不多說先上圖 從左到右依序執行，最後該函式會再呼叫自己一次，圖中淡化的區塊是下個章節的主題 然後把它跟程式碼做對應： function Animatio...
前言 事情是這樣的，其實我都是事先寫好code，當天才寫文章，本來昨天有三個重要的點要額外拉出來講的，就這麼被我忘了！擔心有人真的很認真照著步驟跟著做了，卻在上...
這個章節呢，同樣會以實作為主，在解決問題中帶大家學習，逐漸引入JS的語言特性，前面一樣會從簡單的開始，後面八成會開始越講越快，若有不明白的歡迎留言詢問! 路徑和...
如何計算每一偵的位移 首先我們改寫一下昨天的格式，還記得昨天我們用到的是這樣的寫法： cursorX+= distanceX / period; cursorY...
接下來終於要談談，讓我們更輕鬆的物件了 其實網路上有很多相關的文章，都可以帶你更深入JS時，但常常問題在於，他們的舉例都不夠實際，並不是說不好，而是「需求的問題...
物件是什麼？為什麼需要它呢？ 讓我們接續上回 完成昨天的演示後，也許有人會覺得，處理落葉動畫的流程很簡單，就是「讓落葉自然落下」然後「在畫布上繪製落葉」兩步驟而...
