资讯专栏INFORMATION COLUMN

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

Awbeci / 739人阅读

摘要:导言最近发掘了一个特别的网页小游戏。于是第二天我就继续沉迷,随着一阵抽搐,这个游戏索然无味之后,冷静的我决定用和开发出一个低配版。我的低配版在交互操作比较高的情况下,还是比较卡的,没有原网页的流畅性,可能后续考虑版本实现。

导言

最近发掘了一个特别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~~
有疑问的可以留评论问我

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98671.html

相关文章

  • 【教学向】再加150行代码教你实现一个配版web component库(1) —设计篇

    摘要:为的内置一个方法,用法和原生的事件机制一毛一样。 前言 上两篇Mvvm教程的热度超出我的预期,很多码友留言表扬同时希望我继续出下一篇教程,当时我也半开玩笑说只要点赞超10就兑现承诺,没想到还真破了10,所以就有了今天的文章。 准备工作 熟读 【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇【教学向】150行代码教你实现一个低配版的MVVM库(2)- 代码篇 本篇是在...

    Clect 评论0 收藏0
  • 使用h5新特性,轻松监听任何App自带返回键

    摘要:前言如今新特性新标签新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。接下来我将和各位分享一个特别好用的新特性目前也不是特别新,轻松监听任何自带的返回键,包括安卓机里的物理返回键,从而实现项目开发中进一步的需求。 1、前言 如今h5新特性、新标签、新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。作为前端程序员,我觉得我们还是有必要积...

    paney129 评论0 收藏0
  • 使用h5新特性,轻松监听任何App自带返回键

    摘要:前言如今新特性新标签新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。接下来我将和各位分享一个特别好用的新特性目前也不是特别新,轻松监听任何自带的返回键,包括安卓机里的物理返回键,从而实现项目开发中进一步的需求。 1、前言 如今h5新特性、新标签、新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。作为前端程序员,我觉得我们还是有必要积...

    MoAir 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<