java muki_基于canvas和web audio实现低配版MikuTap

导言

最近发掘了一个特别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~~

有疑问的可以留评论问我

java muki_基于canvas和web audio实现低配版MikuTap相关推荐

php项目网页音乐播放器插件,基于HTML5 canvas和Web Audio的音频播放器插件
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web A ...
实现一个基于 IConfiguration 的低配版 FeatureFlag
实现一个基于 IConfiguration 的低配版 FeatureFlag Intro 在我们的应用中,可能有一些配置开关的需求,某些功能是否启用使用一个配置开关,用的时候就打开,不用的时候就关掉, ...
【Node.js】论一个低配版Web实时通信库是如何实现的1（ WebSocket篇)
引论 simple-socket是我写的一个"低配版"的Web实时通信工具(相对于Socket.io),在参考了相关源码和资料的基础上,实现了前后端实时互通的基本功能选用了Web ...
html5音频插件js,wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件
通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作,包括 Firefox, Chrome, Safari, Mobile S ...
java 图书馆管理系统（超低配版）
目录图书管理系统要求思路 show()方法 add()方法 search方法 delete()方法代码接口 Book类 Reader类 User类 Informatica类 BookList类 ...
java线程学习第一天__低配版的卖面包机
package Thread; import javax.xml.bind.ValidationEvent; class snacks{ private int SaledSnacks=0; ...
C语言实现基于easyx的（低配版）黄金矿工游戏
目录一.项目环境二.游戏说明三.运行演示四.代码总结一.项目环境 Visual Studio 2019+EasyX 20220116 二.游戏说明与黄金矿工游戏类似,每关限时90s(可自 ...
使用 HTML5 canvas 进行 Web 绘图
新的 HTML5 规范旨在帮助开发人员更轻松的编写出各类 Web 应用,以顺应当前 SaaS,云计算以及 RIA 等技术的最新趋势.在 HTML5 得以广泛推广之前,开发人员通常使用 SVG,VML ...
基于Java毕业设计校园外卖系统Web端源码+系统+mysql+lw文档+部署软件
基于Java毕业设计校园外卖系统Web端源码+系统+mysql+lw文档+部署软件基于Java毕业设计校园外卖系统Web端源码+系统+mysql+lw文档+部署软件本源码技术栈: 项目架构:B/S ...

java muki_基于canvas和web audio实现低配版MikuTap

java muki_基于canvas和web audio实现低配版MikuTap相关推荐

最新文章

热门文章