基於canvas和web audio實現低配版MikuTap

導言

最近發掘了一個特別happy的網頁小遊戲--MikuTap。打開以後沉迷了一下午，致使開發工做沒作完差點就要刪庫跑路了，還好boss瞥了我一眼就沒下文了。因而次日我就繼續沉迷，隨着一陣抽搐，這個遊戲索然無味以後，冷靜的我決定用canvas和web audio開發出一個低配版MikuTap。

---

先放上游戲的原連接: https://aidn.jp/mikutap/

再放上個人高仿低配連接: http://demo.zzuzsj.cn/zmiku

恬不知恥地再git庫連接: https://github.com/zzuzsj/Zsa...

在用canvas和web audio實現的基礎上學習了一下webpack的配置，算是搭建了一個比較簡易的webpack項目。webpack入門者能夠大概瞭解一下

模塊分析

---

簡易說一下個人代碼模塊

• main.js 實現頁面中的主題邏輯和事件邏輯，代碼比較混亂，沒有用類的概念管理，可是我比較懶，之後再說嘻嘻嘻
• audio.js 對應的是頁面中音樂播放模塊，經過web audio實現。音樂資源來自原網頁的json數據，是base64格式的，能夠先將base64轉爲arraybuffer而後再利用audioContext的decodeAudioData將arraybuffer數據轉爲buffer數據而後播放。值得注意的是：一個context.source只能播放一個音源，若是想播放不一樣音源須要建立不一樣的context.source
• back.js 我把mikutap的渲染部分分爲back和cont，back負責渲染畫面的背景切換，cont負責交互時的渲染花樣
• shapes.js 最初級的幾何體概念，好比線、圓、方形，提供最基礎的計算和渲染api
• shape.js 由不一樣的shapes組成，不一樣數量的初級幾何體經過必定的動效組成能夠成爲一種shape。可根據本身的想法不斷擴充，暫時只有八種
• cont.js 負責管理並渲染不一樣種類的shape，經過addShape增長頁面內容中的渲染樣式，達到實時交互的效果
• res.js 是頁面中的背景音樂和交互音樂的音源，爲base64格式

主體內容由這些類組成，進行必定的管理便可實現效果。

後續想法

---

不得不吐槽一下的是，canvas和webgl的性能仍是有必定差距的。個人低配版mikutap在交互操做比較高的狀況下，仍是比較卡的，沒有原網頁的流暢性，可能後續考慮webgl版本實現。
web audio api是一個很牛逼的東西，我只是初步實現了多個音源的播放，可是在節奏感這方面還有很大的改善，須要深刻學習（坑也很多。。）。
對應本身寫的shape和shapes模塊以爲還能夠，只要有想法，就能夠進行後續花式的擴充，說不定哪天就實現32種樣式了，想一想還有點小激動呢~

---

今天的分享到這裏就結束啦~
若是以爲個人代碼可能對你們有幫助~歡迎你們star~~
有疑問的能夠留評論問我