Inspiration

It was that fateful day in mid-December, when Google gave me a frightening ultimatum. The background exhibited a vibrant contrast in colors, and the sabers were emanating, as if screaming, their blinding light. The question posed to me: Light Side or Dark Side? I ended up picking the Dark Side, and played Google's Lightsaber Escape. The phone calibration and relation to the virtual saber on the screen was astonishing. However, we noticed that all we could do is move the sword around to reflect StormTrooper Bullets. We wanted to further this -- so we decided to replicate that phone-computer communication, but make it multiplayer so anyone with a mobile phone could destroy their enemy by the hands of their (virtual) sword.

What it does

When you first visit Duelr on your computer, the website will present you a unique, four-digit code. It instructs you to use your mobile device to go to the same Duelr url, and enter the code there. After you enter the code, the computer shifts to a Three.JS canvas where your virtual sword reflects your phone's movements. When a 2nd player joins, that will be reflected on the screen. After battling out, one phone user remains standing and is victorious.

How we built it

We used node.js as our back-end, server language and HTML5, CSS3, and Javascript for the client-side. To generate the unique user IDs and to match users during game, we set up hash maps. Furthermore, In order to establish the streaming connection between phone and computer data, we used socket.io with node.js. In regards to phone data, we pulled from the phone's accelerometer and, on the server side, conducted some math to reflect phone movement in the virtual simulation. We made it so that the server updated the game with any collision detections, in a 3D world.

Challenges we ran into

The most difficult part was matching phone accelerometer data to the virtual simulation. The data we receive from the phone is an array of 3 different angles, 1 for each axis. These angles describe rotation. We had to do some heavy mathematical translation to match the phone's movements to a virtual, three.js render. Furthermore, collision detection faces the same problem; detecting a virtual collision in the swords is difficult considering the nature of the phone data and mathematical struggle.

Accomplishments that we're proud of

Managing to sync the phone with the virtual sword, in a TWO PLAYER environment. When we first made it possible, we all screamed in excitement. SO COOL!

What we learned

A LOT of three.js, node.js, and socket.io. Also how phones work.

What's next for Duelr

More accurate rendering, better collision detection and physics engine, better in-game interface

Share this project:
×

Updates