摘要:導言最近發掘了一個特別的網頁小游戲。于是第二天我就繼續沉迷,隨著一陣抽搐,這個游戲索然無味之后,冷靜的我決定用和開發出一個低配版。我的低配版在交互操作比較高的情況下,還是比較卡的,沒有原網頁的流暢性,可能后續考慮版本實現。
導言
最近發掘了一個特別happy的網頁小游戲--MikuTap。打開之后沉迷了一下午,導致開發工作沒做完差點就要刪庫跑路了,還好boss瞥了我一眼就沒下文了。于是第二天我就繼續沉迷,隨著一陣抽搐,這個游戲索然無味之后,冷靜的我決定用canvas和web audio開發出一個低配版MikuTap。
在用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~~ 有疑問的可以留評論問我
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98671.html
摘要:為的內置一個方法,用法和原生的事件機制一毛一樣。 前言 上兩篇Mvvm教程的熱度超出我的預期,很多碼友留言表揚同時希望我繼續出下一篇教程,當時我也半開玩笑說只要點贊超10就兌現承諾,沒想到還真破了10,所以就有了今天的文章。 準備工作 熟讀 【教學向】150行代碼教你實現一個低配版的MVVM庫(1)- 原理篇【教學向】150行代碼教你實現一個低配版的MVVM庫(2)- 代碼篇 本篇是在...
摘要:前言如今新特性新標簽新規范等有很多,而且正在不斷完善中,各大瀏覽器商對它們的支持,也是相當給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新,輕松監聽任何自帶的返回鍵,包括安卓機里的物理返回鍵,從而實現項目開發中進一步的需求。 1、前言 如今h5新特性、新標簽、新規范等有很多,而且正在不斷完善中,各大瀏覽器商對它們的支持,也是相當給力。作為前端程序員,我覺得我們還是有必要積...
摘要:前言如今新特性新標簽新規范等有很多,而且正在不斷完善中,各大瀏覽器商對它們的支持,也是相當給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新,輕松監聽任何自帶的返回鍵,包括安卓機里的物理返回鍵,從而實現項目開發中進一步的需求。 1、前言 如今h5新特性、新標簽、新規范等有很多,而且正在不斷完善中,各大瀏覽器商對它們的支持,也是相當給力。作為前端程序員,我覺得我們還是有必要積...
閱讀 2157·2021-09-22 10:56
閱讀 1465·2021-09-07 10:11
閱讀 1800·2019-08-30 15:54
閱讀 2290·2019-08-30 15:44
閱讀 2306·2019-08-29 12:40
閱讀 3031·2019-08-28 18:25
閱讀 1735·2019-08-26 10:24
閱讀 3186·2019-08-23 18:39