Jazzy John's Musical Adventure

our piano

Inspiration

We wanted to create something fun, interactive, and a little silly that had a focus on jazz music, since that was a genre that we had a shared interest in. Our teammate, Seungwon, is a jazz pianist, so we wanted to use his experience with music.

What it does

Jazzy John's Musical Adventure is a music game where the player hears a tune and plays it back by figuring out what notes are being played. The player follows John's story through conversations between him and his mother as he comes to realize his true passion for jazz.

How we built it

We used the framework Phaser.JS for JavaScript to build our interactive piano/story game in a web browser. We created our animations in Pixil Art and loaded them as assets in our IDE. Through this we were able to assign keys on the computers keyboard to sprite keys that played associated pitches.

Challenges we ran into

Initially, the majority of our team lacked prior experience in JavaScript and Phaser.JS. However, we were able to leverage our previous programming experience and resources like the web to figure out how to implement the features we wanted to see in our game.

Accomplishments that we're proud of

We are proud that we were able to create a piano on the computers keyboard completely from scratch. We had to find the mp3 files for the sound ourselves and figure out how to link it so that each key press acted like an actual press of a piano key.

What we learned

We learned that Phaser.JS provided a great framework for creating web based games, and how to import assets from other sites and animate them to bring our game to life. We also learned how to bind keys to events happening on screen.