基于 Web 最新技术制作的音乐游戏《Piano Flow》

[SuneBear]

可玩性探究与理论

• 一切才刚刚开始，节奏模式与自动演奏模式却已经升起
• 倘若你是一个资深古典音乐爱好者，且有一套性能很棒的设备，节奏模式可能会毁了你
• 没有可玩性，怎能算作游戏？所以未来会添加太鼓达人模式与乐谱模式，欢迎 PRPRPR

注意啦，那些你在各种 Conf 接触不到的新技术，这里统统都有

• 对不起，我说谎了， Vue 2 + RxJS + Pixi 4 并不能算最新的技术。如果我周末把时间全部用在研究最新框架上，现在就是用 Yarn 来进行依赖管理，就能使用 WebVR 带上 HTC Vive 零距离感受德彪西了 : (
• 为了不被前端淘汰，发完此贴就回老家闭门学习新框架，学习配柠檬茶让我无法自拔

围城传送门

• GayHub: https://github.com/SuneBear/Piano-Flow
• 游戏地址: https://sunebear.github.io/Piano-Flow

[qqqppp9998]

有意思，感觉楼主好厉害~

[banricho]

楼主叫来顶帖
楼主有女朋友
楼主经常晒妹
楼主没有节操

[SuneBear]

@banricho [搞事👋] [搞事👋] [搞事👋]

[whahuzhihao]

楼主好厉害！
刚玩完了德彪西的月光，又想起恶灵附体的小房间啦！

[SuneBear]

@whahuzhihao 德彪西的曲子应该是和皎白月光联系在一起，居然让你想起恶灵附体，心疼 1s

[whahuzhihao]

@SuneBear 恶灵附体游戏里的插曲就是这首 Clair-de-Lune 啦

[whahuzhihao]

另外在微信浏览器里打开，声音全是沙沙声。手机 safari 是好的。

[est]

空气中和地面充满了 LZ 的 JJ 碎片——碉堡啦。

[XhstormR]

开久了之后， CPU 占用 90%，音乐都卡的发出噪点了。

[qyc0129]

so cool 有前景

[SuneBear]

@whahuzhihao 因为游戏是 Runtime 合成， MIDI -> Pitch -> WebAudio ，如果性能不好就会撕撕杀杀，所以这个游戏还能检测性能～ Safari 会给动画什么的单独开线程，这样就可以缓解卡顿的问题

[a87150]

感觉没什么意思，按什么键都一样，也没有快捷键什么的。

[SuneBear]

@XhstormR 一时半会想不到优化方案，为了模拟钢琴的延音，播放完的 Pitch Node 会停驻一段时间，相当于很多个通道一起制造音源，最后合成在一起。还有就是古典曲子手速之快， 60/1000 毫秒都跟不上～

[SuneBear]

@a87150 需要什么快捷键呢？现在用 Esc 可以暂停，游戏支持多键同时触发，如果在未来的积分模式中就是很有难度的，除了锻炼节奏，还能帮助记忆一个 Bunch 的音符数

[chunqiuyiyu]

感觉不错，点个赞

[SuneBear]

@XhstormR 更正一下，是 1000/60 毫秒， 16 毫秒 /帧

[a87150]

@SuneBear 突然觉得自己有点傻，这种游戏的乐趣应该是得分达成目标之类的。弄复杂了不如直接玩乐器。

[qinxi]

厉害了,我的哥

[irgil]

感觉好好

[ETiV]

Web 跑 MIDI 几年前想过，但效率真的是……

下落式 MG 大概 2 年前做过一个，改天找个机会放出来给各位老爷玩玩……