Skip to content
[Paused] A music game follows the piano flows.
JavaScript Vue CSS HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
src CHORE(map): Rewrited map method Mar 10, 2018
tools ISSUE(deps): Frozen the versions of deps Jan 7, 2017
.babelrc FEATURE(loading): Inited loading Sep 21, 2016
.gitignore FEATURE(loading): Inited loading Sep 21, 2016
LICENSE FEATURE(loading): Inited loading Sep 21, 2016 Updated README Dec 6, 2016
package.json ISSUE(deps): Frozen the versions of deps Jan 7, 2017

Piano Flow

A music game follows the piano flows. Its rhythm mode inspired by Touch Pianist, thanks to Batuhan Bozkurt. The main purpose I made it was to achieve a dream of my youth and to help me practice the fundamentals of MUG.

I need to be honest with you, the game has a bad playability which can't make you feel completely immersed with simple interaction. Maybe it will improve your gameplay through a virtual reality headset, but I think the best experience is on a real piano nowadays.

Run on Local

$ git clone
$ cd Piano-Flow
$ npm install
$ npm start

Source File Structure

├── assets        # Common Static Resources
├── game          # Game Core
├── services      # Common Data and Context Status
├── styles        # GLobal Styles
├── uis           # App UI Components
├── utils         # App Helpers
├── views         # App BLL Components

├── app.vue       # App Main
├── index.html    # Template for HTML Webpack Plugin
├── lib.js        # Dependencies Entry Point
├── loading.js    # Loading Entry Point
├── main.js       # Client Entry Point
├── router.js     # Route Map and Router Instance

The structure is a experimental combination of SPA based on Vue 2 and MUG based on Pixi.js, MIDI.js, etc. They are basically independent, but using the shared assets and services.

Browser Compatibility

The game was developed in Chrome 54 (Mac OS X) without cross-browser testing. I am sure it works on webkit-based browsers such as Chrome, Safari. Hold on, there are so many weird questions that I have not met yet if you play it in other browser/device. Feel free to raise an issue, let's make it work first.

Further Improvements

  • Brand Redesign & UI Redesign & Animation Tuning
  • Gameplay: Add some different modes
  • Music: Optimize timbre & rhythm
  • Refactor game, make code more abstract :(

Dependencies & References

Frameworks & Libraries

  • Vue - Simple yet powerful library for building modern web interfaces.
  • Pixi.js - Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback.
  • Midi.js - A modern JavaScript port of MIDI.js.
  • RxJS - The Reactive Extensions for JavaScript.

Video & Games

  • From Paper to Screen - Animation which shows typography evolution from paper to screen.
  • Touch Pianist - Tap in Rhythm and Perform Your Favourite Music.
  • Euphony - A web-based MIDI player and visualizer.
  • NeoTrap - A Music based fast-paced action game.


  • EB Garamond - A revival of Claude Garamont’s famous humanist typeface from the mid-16th century.


This game is licensed under the MIT license.

You can’t perform that action at this time.