Turn your smartphone into a web game controller with this framework

Imagine sitting in front of your laptop or desktop computer, pulling out your smartphone, and boom — a few clicks and taps later, you’re playing a video game using your phone as a controller.

A few weeks ago, a group that included college and even high school students, gathered up at Y Combinator’s locale in Mountain View, Calif. for a two-day long hackathon, and one team hacked a web framework for exactly that.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":1542508,"post_type":"exclusive","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

With Nunchuck.js, you can turn your mobile phones into video game controllers and play games running on a browser, with less than 15 lines of JavaScript and without having to write native iOS or Android apps. Just navigate to a web link from your phone, and it will transform into a controller.

During its presentation to the judges, the team showed off one of the demos it built, a simple flying game. While some team members stood offstage, each controlling a plane with their smartphone, the planes flew around obstacles on the desktop browser being projected.

The other demo was actually at the origin of hack’s idea, which came out of a brainstorm while traveling to the hackathon.

“One such fun idea was to be able to play Mario Kart on your computer using your smartphone as a controller. Even though there are plenty of remotes and emulators already on the market, we thought, ‘Hey, what if you could play, but without having to download any apps?’” said team member Kathryn Siegel in an email to VentureBeat.

Using JavaScript and HTML5 on the client and Node.js and Socket.io on the backend, Nunchuck.js enables you to transmit and receive mobile hardware data in real-time, so you can play a game.

The framework also works with games of various complexities. For example, the planes game is entirely in JavaScript, using a modified version of of of the CutJS demos to make it into a multiplayer game. On the other hand, the Mario Kart game used the open source SNES9x emulator (written in C++), which the team then compiled into JavaScript and tweaked for multi-player support, as Siegel explained.

“Hardware data is primarily thought of as a realm for native code. However, our framework provides an easy interface for device hardware data and its transmission across devices, which we believe can help enable web developers to create new, rich web experiences and potentially rethink the way we develop for the web,” said Siegel.

Siegel added that while a few web developers here and there have also used hardware data from the browser, there hasn’t been much buzz about this. Also, it can get pretty messy to work with without a clean framework like Nunchuk.js.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":1542508,"post_type":"exclusive","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

“That means that developers who do use hardware data from the browser end up creating their own solutions, which are extremely specific to their use case and [are] limited. We wanted to create a super simple interface for developers to quickly get this data without worry and wrap otherwise messy code up in neat JavaScript callbacks,” she said.

While the team used gaming applications to demo its hack to the judges, Nunchuck.js is a multi-device solution for hardware data synchronization that could be used for a variety of applications, gaming included.

While the team put this together during a weekend, theNunchuck.js team does plan on cleaning up the library, adding more documentation, and creating more demos and features. If you’re interested in the framework, stay tuned.

The Nunchuck.js team was comprised of Kathryn Siegel, Ankush Gupta, Anubhav Jain, and Edwin Zhang, all current students at MIT and members of the HackMIT organizing team.

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":1542508,"post_type":"exclusive","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']