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

Awbeci 發布于2019-08-23 12:31 / 745人閱讀

摘要：導言最近發掘了一個特別的網頁小游戲。于是第二天我就繼續沉迷，隨著一陣抽搐，這個游戲索然無味之后，冷靜的我決定用和開發出一個低配版。我的低配版在交互操作比較高的情況下，還是比較卡的，沒有原網頁的流暢性，可能后續考慮版本實現。

導言

最近發掘了一個特別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~~
有疑問的可以留評論問我

云服務器 GPU云服務器低配版低配版的騰訊云服務器 web端基于webrtc實現直播基于webrtc實現對講

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98671.html

【教學向】再加150行代碼教你實現一個低配版的web component庫（1） —設計篇

摘要：為的內置一個方法，用法和原生的事件機制一毛一樣。前言上兩篇Mvvm教程的熱度超出我的預期，很多碼友留言表揚同時希望我繼續出下一篇教程，當時我也半開玩笑說只要點贊超10就兌現承諾，沒想到還真破了10，所以就有了今天的文章。準備工作熟讀【教學向】150行代碼教你實現一個低配版的MVVM庫（1）- 原理篇【教學向】150行代碼教你實現一個低配版的MVVM庫（2）- 代碼篇本篇是在...

Clect 2019-08-20 18:58 評論0 收藏0
使用h5新特性，輕松監聽任何App自帶返回鍵

摘要：前言如今新特性新標簽新規范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新，輕松監聽任何自帶的返回鍵，包括安卓機里的物理返回鍵，從而實現項目開發中進一步的需求。 1、前言如今h5新特性、新標簽、新規范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。作為前端程序員，我覺得我們還是有必要積...

paney129 2019-08-22 15:22 評論0 收藏0
使用h5新特性，輕松監聽任何App自帶返回鍵

摘要：前言如今新特性新標簽新規范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新，輕松監聽任何自帶的返回鍵，包括安卓機里的物理返回鍵，從而實現項目開發中進一步的需求。 1、前言如今h5新特性、新標簽、新規范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。作為前端程序員，我覺得我們還是有必要積...

MoAir 2019-08-01 18:41 評論0 收藏0