iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

從零開始打造網頁遊戲-造輪子你也辦的到! 系列

(第一篇文章將於9/8發佈)
身為業餘玩家,接觸Canvas API大約三年了,什麼套件都不熟悉,唯獨DIY最厲害,所以這次要挑戰用原生JS(又稱 Vanilla JS)打造治癒人心的休閒音樂遊戲,那麼,就跟我一起從微小平凡之處,體驗Vanilla JS的強大設計彈性和可能性吧!
------
1. 利用Canvas API和Web audio API來製作動畫和音頻可視化,
2. 並學會製作自己的簡易框架,強化物件基礎概念和透過類別(Classes)實體化物件,
3. 藉由繪製Logic Flow流程圖釐清程式邏輯,以及利

鐵人鍊成 | 共 31 篇文章 | 35 人訂閱 訂閱系列文 RSS系列文
DAY 1

序章:最幸福的事,莫過於當你看到code變成一幅幅美麗的畫

自序 大家好,我是來自中山大學的Jerry,接觸javascript大約三年了,雖然不像業界的各路大神日夜專研,不過熬夜爆肝寫code的日子也是不少,可以參考最...

2021-09-08 ‧ 由 jerrythepotato 分享
DAY 2

Chapter1-DJ最愛的音頻動感圖像(I)基本流程圖 & 操作DOM介面

在開始前,還沒看過序章的朋友們,可以點擊進去,教學大綱和主題方向都寫在裡面囉! 看完這章節,你會學到... 地基一定要打穩,如果基本的還不會的話,建議先去w...

2021-09-09 ‧ 由 jerrythepotato 分享
DAY 3

Chapter1-DJ最愛的音頻動感圖像(II)只要是認識Canvas的都覺得它很High歐

完成上傳機制後,等著我們的是... 今天的一開始先花一點點時間,把昨天的事件監聽做完吧!這邊準備好一個基本的介面: Css就不做教學了XD,大家用自己喜歡的...

2021-09-10 ‧ 由 jerrythepotato 分享
DAY 4

Chapter1-DJ最愛的音頻動感圖像(III)媽媽叫你不要玩音樂,現在知道當DJ很難了吧

加油!這章節快完成了 根據上面這張圖,我們寫好了以下的程式碼,就成功得到經由傅立葉轉換的音頻訊號了,取得了名為dataArray音頻陣列,耶比~~可以開始圖像...

2021-09-11 ‧ 由 jerrythepotato 分享
DAY 5

Chapter1-DJ最愛的音頻動感圖像(IV)讓音樂動起來!開篇基礎設定和動畫框架

話不多說先上圖 從左到右依序執行,最後該函式會再呼叫自己一次,圖中淡化的區塊是下個章節的主題 然後把它跟程式碼做對應: function Animatio...

2021-09-12 ‧ 由 jerrythepotato 分享
DAY 6

Chapter1 - 補充 CORS + autoplay政策 + requestAnimeFrame致命缺點

前言 事情是這樣的,其實我都是事先寫好code,當天才寫文章,本來昨天有三個重要的點要額外拉出來講的,就這麼被我忘了!擔心有人真的很認真照著步驟跟著做了,卻在上...

2021-09-13 ‧ 由 jerrythepotato 分享
DAY 7

Chapter2 - Canvas動畫(I)玩轉路徑和位移 動畫原來這麼簡單

這個章節呢,同樣會以實作為主,在解決問題中帶大家學習,逐漸引入JS的語言特性,前面一樣會從簡單的開始,後面八成會開始越講越快,若有不明白的歡迎留言詢問! 路徑和...

2021-09-14 ‧ 由 jerrythepotato 分享
DAY 8

Chapter2 - Canvas動畫(II)用國中數學拆解Ease-out和Ease-in

如何計算每一偵的位移 首先我們改寫一下昨天的格式,還記得昨天我們用到的是這樣的寫法: cursorX+= distanceX / period; cursorY...

2021-09-15 ‧ 由 jerrythepotato 分享
DAY 9

Chapter2 - Canvas動畫(III)讓我們跳過微積分 用輕鬆的方式畫落葉吧

接下來終於要談談,讓我們更輕鬆的物件了 其實網路上有很多相關的文章,都可以帶你更深入JS時,但常常問題在於,他們的舉例都不夠實際,並不是說不好,而是「需求的問題...

2021-09-16 ‧ 由 jerrythepotato 分享
DAY 10

Chapter2 - 用物件看真實世界(I)寫程式為什麼需要物件?如何簡化畫落葉的流程?

物件是什麼?為什麼需要它呢? 讓我們接續上回 完成昨天的演示後,也許有人會覺得,處理落葉動畫的流程很簡單,就是「讓落葉自然落下」然後「在畫布上繪製落葉」兩步驟而...

2021-09-17 ‧ 由 jerrythepotato 分享