NES (Nintendo Entertainment System) (We called it red write machine in Taiwan) was definitely one of family console about 20 years ago. I spent lots of time playing games on NES with friends & my family. However, there're some member in Meteor.Taipei don't even know what is NES (they're about 15 years old...). So I decide to build a cool project to introduce NES to them!
What it does
It's a NES emulator on your browser. there're some built in keyboard binding to play it. Beside, you can use the smartphone to scan the QR-Code to get the web-based NES-Gamepad to play the game!
How I built it
First of all, we found that there's a awesome NES emulator written in js . So we create a package and wrap all the needed files in. The original jsnes package already provide the keyboard binding to play the games. But we want to make it more cool, so we use Nes-GamePad to build a web-based Nes-GamePad. However, it worked poorly on the smartphone so I add Hammer.js to improve it. FlowRouter & BlazeLayout are two very nice Meteor packages to enable Routing & Layout System in Meteor. Once the game starts, we'll generate two links to open another page (the Nes-GamePad pages, one for Player1, another one for Player2). But it doesn't make sense to type that link on the phone. So we generate the QRCode for these two links by jQuery-QRCode. We can use any QR-Code App on our phone to scan the link, then we can immediately get a very cool Nes-GamePad. To send the command from the phone (Nes-GamePad) to the main NES emulator page, we use streamy to do so. It enables use to do the browser-to-browser communication.
- jsnes https://github.com/bfirsh/jsnes
- Nes-GamePad http://codepen.io/fullkornslimpa/pen/jxiHd/
- Hammer.js http://hammerjs.github.io/
- FlowRouter/BlazeLayout https://github.com/kadirahq/flow-router https://github.com/kadirahq/blaze-layout
- jQuery-QRCode https://github.com/EtherPOS/jquery-qrcode/
- Streamy https://github.com/YuukanOO/streamy
Challenges I ran into
- Mobile web touch/press event is different than the desktop web. We use hammer.js to make it more smoothly.
- It's not easy to communicate between two browser without mongodb in Meteor. Glad that we found Streamy!
Accomplishments that I'm proud of
It's a full package, including the game itself and the joystick! though it's not that stable when the network is bad :(
What I learned
Except FlowRouter/BlazeLayout, all other packages are new to me. It's so cool to learn so many cool things in only 24 hr.
What's next for Meteor NES
- build some advanced joystick that suit the modern games.
- find more games (not limited to nes-based game)