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 firstname.lastname@example.org:SuneBear/Piano-Flow.git $ 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.
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.
- 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.
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.