CommsQuest IV – A Retro Game Built Using Twilio Sync

August 19, 2016
Written by
Jon Davis
Twilion

Commsquest IV Logo

At Twilio, we’re all about helping you build new things that help make conversations happen. But sometimes we like to goof around — whether it’s teaching our dog how to take a selfie or pretending to launch ourselves into outer space. Our latest experiment? Building CommsQuest IV, a retro style labyrinth game. What’s this have to do with communications? Let’s find out.

But first, you have to take Commsquest IV for a spin. Pro Tip: lock your phone’s orientation to portrait.

How it all went down

It all started with an open source project we found on GitHub. We wanted to see just how quickly we could get the ball rolling. Any guesses? You’d think it would take at least a couple days to get something to move remotely on the screen. Not with Twilio. Using Sync, programmable SMS and a team of bright young minds, we were able to ship in a couple of hours!

Creation

The first phase involved looking for an open source JavaScript project that used the keyboard for controls. We needed something with a controller because we wanted to build the unconventional — using the phone to control the player character. Browsing GitHub, we found Astray.

Development

We put Labyrinth at the center. After creating the Node.js project, we kicked off the sync process with a text message from Programmable SMS. What this did was prompt the desktop browser to send a text message to your mobile phone so that it would become your controller.

Once connected, the phone took your gyroscope and accelerometer data and sent it to your desktop browser in real time using Sync. All it took was a few lines of code.. The desktop then listened for updates to a Sync Document, we then took that new data and used it to apply a new force to the ball. That’s it!
Not to say there weren’t any problems. When we first started playing around with it, the ball was too responsive. Tweaking it here and there to find just the right balance took a while but that’s where all the fun is.

Progression

Any game wouldn’t be a game without levels. So, we added four:

LevelDescription
Cave of
Last-Call
Roll your stone through the cave to complete the first “telestone” call of all time!
Castle CalldropsalotCarry your spark through the tower to light the signal fire and save the castle!
Telecom
Towers
Navigate your energy node through the global communications infrastructure to the PBX box across the world!
Tomorrow
land
Roll your happy ball of light through a maze of infinite rainbows.

 

 

CommsQuest IV Level 3
Level 3: Telecom Towers

As team leader, I was thrilled to be able to hack away on a new Twilio product because it would give other developers the opportunity to potentially collaborate on a new project. To be honest, I wasn’t expecting to continue working on this after a hack session, but given the level of interest, it looks like great things are yet to come.

Why did we use Sync? Because we needed to move fast. We had a limited amount of time and a need to ship. Interested in learning more about Sync, and how you can incorporate it into your projects? Take a look at Introducing Sync – Real-time State Synchronization API for more information.

I wanted to share my story with the hope of inspiring you to create something new. With more than a million developers using our platform, it’s exciting enough just to think of all the possibilities. If we can build a game in an hour, we can’t wait to see what you build.