iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

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

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

自序

大家好,我是來自中山大學的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語言特性已有基本掌握的入門者,在整理這次的教案時,我意識到一個問題:我根本不知道來看我文章的會是誰,雖然不外乎就是想做遊戲的人吧!只是這個範圍仍然太大,難以調整內容,因此,跟大家說明一下我會怎麼敏捷式調整每天的內容。

https://ithelp.ithome.com.tw/upload/images/20210908/20135197VPvzT1kIMu.jpg
在每個章節,我都會準備像是這樣的圖,讓大家清楚該章節須掌握的相關技術,越下面(基本)我會越少提到,甚至直接帶過,越上面(進階)我會花越多篇幅講解,這樣的好處是:可以讓每篇文的內容聚焦重點,又兼顧一項技術的完整性,缺點就是,如果我忽略太多,入門者可能會感到過多的挫折。其實,身為非本科生入行的我,很懂得在網路上自學時的困境,即使有足夠的學習資源,卻很少有人能教你看mdn文件,教你用什麼關鍵字搜尋,及時幫你解惑、糾正觀念,而現代人早已花費大把時間在制式化的課業學習中,又怎麼有精力去要求自己花更多時間額外學習呢?若沒有超凡的毅力,讓你每隔幾天去Udacity扎實學習,也是不太現實的。

多留言跟我互動吧!

因此,我的建議是,如果你真的對某個章節的內容感到困惑,那就放膽問吧!只要你願意留言,我就會根據適應程度來調整後續的大鋼,不過,假如某篇文的大鋼是上面這張圖,請不要突兀地問我Classes怎麼用,畢竟我不是js字典,要在網路上負責任地回答問題,我只會準備好這八個章節的內容,超鋼的部分,我就不誤人子弟了!不過,只要文章內有提到的,都盡量問沒關係,或是你覺得能跟文章產生聯繫的,只要合乎邏輯就行。


下一篇
Chapter1-DJ最愛的音頻動感圖像(I)基本流程圖 & 操作DOM介面
系列文
從零開始打造網頁遊戲-造輪子你也辦的到!31

2 則留言

0
Mao
iT邦新手 2 級 ‧ 2021-09-09 13:27:04

我的夢想就是做一個自己的網頁社群遊戲!
Canvas 一直在我的學習計畫內,好期待大大的文章!

感謝支持!

這個系列用的都是原生js,先建立起觀念和架構,熟悉之後就可以再去學習不同的套件了!(網路上有很多別人寫好的canvas函式庫)

0
Mizok
iT邦新手 5 級 ‧ 2021-09-23 01:54:52

在搜尋的時候剛好注意到這個系列
我也是寫Canvas相關的技術文章 XD ~
有機會的話希望可以多跟大大交流一下!

我要留言

立即登入留言