資訊專欄INFORMATION COLUMN
摘要：導(dǎo)言最近發(fā)掘了一個(gè)特別的網(wǎng)頁小游戲。于是第二天我就繼續(xù)沉迷，隨著一陣抽搐，這個(gè)游戲索然無味之后，冷靜的我決定用和開發(fā)出一個(gè)低配版。我的低配版在交互操作比較高的情況下，還是比較卡的，沒有原網(wǎng)頁的流暢性，可能后續(xù)考慮版本實(shí)現(xiàn)。
導(dǎo)言
最近發(fā)掘了一個(gè)特別happy的網(wǎng)頁小游戲--MikuTap。打開之后沉迷了一下午，導(dǎo)致開發(fā)工作沒做完差點(diǎn)就要?jiǎng)h庫跑路了，還好boss瞥了我一眼就沒下文了。于是第二天我就繼續(xù)沉迷，隨著一陣抽搐，這個(gè)游戲索然無味之后，冷靜的我決定用canvas和web audio開發(fā)出一個(gè)低配版MikuTap。
在用canvas和web audio實(shí)現(xiàn)的基礎(chǔ)上學(xué)習(xí)了一下webpack的配置，算是搭建了一個(gè)比較簡易的webpack項(xiàng)目。webpack入門者可以大概了解一下
模塊分析簡易說一下我的代碼模塊
main.js 實(shí)現(xiàn)頁面中的主題邏輯和事件邏輯，代碼比較混亂，沒有用類的概念管理，但是我比較懶，以后再說嘻嘻嘻
audio.js 對(duì)應(yīng)的是頁面中音樂播放模塊，通過web audio實(shí)現(xiàn)。音樂資源來自原網(wǎng)頁的json數(shù)據(jù)，是base64格式的，可以先將base64轉(zhuǎn)為arraybuffer然后再利用audioContext的decodeAudioData將arraybuffer數(shù)據(jù)轉(zhuǎn)為buffer數(shù)據(jù)然后播放。值得注意的是：一個(gè)context.source只能播放一個(gè)音源，如果想播放不同音源需要?jiǎng)?chuàng)建不同的context.source
back.js 我把mikutap的渲染部分分為back和cont，back負(fù)責(zé)渲染畫面的背景切換，cont負(fù)責(zé)交互時(shí)的渲染花樣
shapes.js 最初級(jí)的幾何體概念，比如線、圓、方形，提供最基礎(chǔ)的計(jì)算和渲染api
shape.js 由不同的shapes組成，不同數(shù)量的初級(jí)幾何體通過一定的動(dòng)效組成可以成為一種shape?？筛鶕?jù)自己的想法不斷擴(kuò)充，暫時(shí)只有八種
cont.js 負(fù)責(zé)管理并渲染不同種類的shape，通過addShape增加頁面內(nèi)容中的渲染樣式，達(dá)到實(shí)時(shí)交互的效果
res.js 是頁面中的背景音樂和交互音樂的音源，為base64格式
主體內(nèi)容由這些類組成，進(jìn)行一定的管理即可實(shí)現(xiàn)效果。
后續(xù)想法不得不吐槽一下的是，canvas和webgl的性能還是有一定差距的。我的低配版mikutap在交互操作比較高的情況下，還是比較卡的，沒有原網(wǎng)頁的流暢性，可能后續(xù)考慮webgl版本實(shí)現(xiàn)。
web audio api是一個(gè)很牛逼的東西，我只是初步實(shí)現(xiàn)了多個(gè)音源的播放，但是在節(jié)奏感這方面還有很大的改善，需要深入學(xué)習(xí)（坑也不少。。）。
對(duì)應(yīng)自己寫的shape和shapes模塊覺得還可以，只要有想法，就可以進(jìn)行后續(xù)花式的擴(kuò)充，說不定哪天就實(shí)現(xiàn)32種樣式了，想想還有點(diǎn)小激動(dòng)呢~
今天的分享到這里就結(jié)束啦~ 如果覺得我的代碼可能對(duì)大家有幫助~歡迎大家star~~ 有疑問的可以留評(píng)論問我
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98671.html
摘要：為的內(nèi)置一個(gè)方法，用法和原生的事件機(jī)制一毛一樣。 前言 上兩篇Mvvm教程的熱度超出我的預(yù)期，很多碼友留言表揚(yáng)同時(shí)希望我繼續(xù)出下一篇教程，當(dāng)時(shí)我也半開玩笑說只要點(diǎn)贊超10就兌現(xiàn)承諾，沒想到還真破了10，所以就有了今天的文章。 準(zhǔn)備工作 熟讀 【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫（1）- 原理篇【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫（2）- 代碼篇 本篇是在...
摘要：前言如今新特性新標(biāo)簽新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。接下來我將和各位分享一個(gè)特別好用的新特性目前也不是特別新，輕松監(jiān)聽任何自帶的返回鍵，包括安卓機(jī)里的物理返回鍵，從而實(shí)現(xiàn)項(xiàng)目開發(fā)中進(jìn)一步的需求。 1、前言 如今h5新特性、新標(biāo)簽、新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。作為前端程序員，我覺得我們還是有必要積...
摘要：前言如今新特性新標(biāo)簽新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。接下來我將和各位分享一個(gè)特別好用的新特性目前也不是特別新，輕松監(jiān)聽任何自帶的返回鍵，包括安卓機(jī)里的物理返回鍵，從而實(shí)現(xiàn)項(xiàng)目開發(fā)中進(jìn)一步的需求。 1、前言 如今h5新特性、新標(biāo)簽、新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。作為前端程序員，我覺得我們還是有必要積...
閱讀 2205·2021-09-22 10:56
閱讀 1496·2021-09-07 10:11
閱讀 1816·2019-08-30 15:54
閱讀 2304·2019-08-30 15:44
閱讀 2320·2019-08-29 12:40
閱讀 3040·2019-08-28 18:25
閱讀 1754·2019-08-26 10:24
閱讀 3201·2019-08-23 18:39
