基于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~~
有疑问的能够留评论问我