简介最近发现了一款??非常欢乐的网页游戏——MikuTap。打开后就沉迷了一下午，开发工作还没做完就差点删库跑路了。还好老大看了我一眼，也没什么好说的。于是第二天继续沉迷其中。一阵抽搐，在游戏变得无聊之后，我冷静地决定开发一个带有画布和网络音频的低配版MikuTap。先放游戏原链接：https://aidn.jp/mikutap/然后放我高仿低配的链接：http://demo.zzuzsj.cn/zmiku厚颜无耻地链接git库：https://github.com/zzuzsj/Zsa...在使用canvas和webaudio学习webpack配置的基础上，算是一个比较简单的webpack项目。webpack初学者可以对模块解析有个大概了解，简单说一下我的代码模块main.js实现页面中的主题逻辑和事件逻辑。代码比较乱，没有使用类的概念来管理，不过我比较懒，以后再说。audio.js对应页面中的音乐播放模块，通过webaudio实现。音乐资源来自原始网页的json数据，是base64格式。可以先把base64转成arraybuffer，然后用audioContext的decodeAudioData把arraybuffer数据转成buffer数据再播放。值得注意的是一个context.source只能播放一个音源。如果要播放不同的音源，需要创建不同的context.sourceback.js。我把mikutap的渲染部分分为back和cont。back负责渲染画面的背景切换，而cont负责交互时的图案渲染。Shapes.js提供最基本的几何概念，如直线、圆和正方形，提供最基本的计算和渲染。成为一个形状。可以根据自己的想法不断扩展。暂时只有八种cont.js负责管理和渲染不同类型的形状。通过addShape在页面内容中添加渲染样式，达到实时交互的效果。res.js是页面中的背景音乐和交互音乐的音源是base64格式。主要内容就是由这几个类组成，经过一定的管理才能达到效果。后续思考中不得不吐槽的是canvas和webgl的性能还是有一定的差距。我的低配版mikutap在交互操作比较高的时候还是比较卡，没有原来网页的流畅度。以后可能会考虑实现webgl版本。网络音频api是一个非常强大的东西。本人也只是初步实现了多音源的播放，但是在节奏感上还是有很大的提升，需要深入研究（坑很多。。。）。对应自己写的shape和shapes模块，我觉得还可以。只要有想法，就可以进行后续的花式拓展。也许有一天，会实现32种样式。想想都有点小激动~今天的分享就到这里啦~如果觉得我的代码可能对大家有帮助的话~欢迎大家star~~有什么问题可以评论问我
