This content originally appeared on Level Up Coding – Medium and was authored by Filip Melka
Hi there!
I’m excited to share my latest side project with you: Flappy Cube.
Flappy Cube is a web-based game inspired by Flappy Bird, but with a twist: while it runs in your PC browser, you control it using your phone — not by touch, but by motion.
Want to give it a try? Just open Flappy Cube on your computer, scan the QR code with your phone, enable motion detection, and you’re good to go!
You can find a demo video here.
Background
I’ve had this idea in my head for a while. Even though I’m not big on gaming, I wanted to dip my toes into game development. But to make a real game, you usually need a controller, right? I almost bought a wireless PC game controller when it hit me — why not use my phone as a controller instead?
Here’s why I thought it would be cool:
- Everyone already has a smartphone.
- I can change the layout of the controller depending on the game — a joystick for one game, buttons for another.
- Smartphones have built-in motion sensors, and that’s what really intrigued me. I wanted to experiment with motion control.
Now, of course, a phone can’t fully replace the feel of a physical controller. But I figured it was worth a shot!
How It Works Under the Hood
The game itself is built with JavaScript by “drawing” on the HTML canvas element.
But how does the magic of connecting your phone and PC work? There are two key technologies at play here: WebRTC and Socket.IO.
WebRTC
WebRTC is a technology that enables real-time communication between browsers. It’s used in apps like Zoom and Teams for video calls, but it can also handle arbitrary data transfers.
If you’re curious about how WebRTC works, check out this YouTube video by Hussein Nasser. It’s a great intro!
Now, you might wonder — if WebRTC allows peer-to-peer communication, why do we need anything else? Well, before two browsers can communicate, they need to “handshake” by exchanging something called an offer and an answer (there are a few more steps, but let’s keep it simple). WebRTC doesn’t specify how this handshake should happen — we just need to exchange the required information. That’s where Socket.IO comes in.
Socket.IO
Socket.IO is a JavaScript library that enables real-time, event-driven communication between clients and servers.
In our case, we use Socket.IO to send a message from your phone to a server, which forwards it to your PC. Each client has a unique socket ID, which helps the server know where to send the message.
Putting It All Together
When you open Flappy Cube on your computer, the game generates a QR code. This QR code includes not only the URL to the controller page but also a special URL parameter: the socketID of your PC browser.
When you scan the QR code with your phone, it retrieves the socketID and sends an offer to your PC using Socket.IO. Your PC responds with an answer, and voilà — WebRTC takes over and the game is on!
Development Journey
Recently, I decided to take on a project-based coding challenge, aiming to create and deploy a project each month. With this month being pretty hectic (hello, moving back to college!), I didn’t start on the project until the last minute. I originally had a totally different idea in mind, but as the deadline approached, I switched to something simpler. What was supposed to be a month-long project became a week-long sprint.
Design
To keep things manageable, I opted for a minimalistic design. On the 23rd, I started sketching out the UI in Figma and came up with a simple layout:
Connection demo
Before diving into the game itself, I wanted to make sure the connection between the phone and PC worked smoothly. WebRTC and Socket.IO were the trickiest parts of this project, so I put together a quick demo to test them out. Thankfully, I had a bit of spare time at college to build this:
This demo gave me the confidence to move forward. I even had a little extra time to create a player movement demo using the HTML canvas element:
Building the actual game
To stay organized, I created a Kanban board in Obsidian to map out the tasks I needed to complete.
On the 25th, I finally opened up VSCodium, created a new project folder, and got to work. Since I’d already built the demos, I had a clear plan of what needed to be done.
By the next day, I was already testing and preparing for deployment.
Testing
During development, I ran the app locally. But here’s the thing — localhost only runs on my PC, so how could I test it on my phone? After a quick search, I found ngrok, which lets you expose your local development server to the internet. You can use ngrok for free, and it worked perfectly for my needs.
During testing, though, I hit a roadblock. For some reason, I couldn’t establish a WebRTC connection between my phone and PC. After some digging (and help from ChatGPT), I discovered that the issue was probably related to NAT traversal. The solution? A TURN server. I found a free cloud-based TURN server from Metered, and once I set that up, everything worked perfectly.
Deployment
Since the app uses Express, I chose Render for deployment — it offers a free tier and was super easy to set up. The only downside? The free instance spins down when inactive, which can cause some serious delays (I once waited a full minute for the page to load). Because of that, I decided to upgrade to a paid plan ($7/month).
Now, Flappy Cube is live and ready for anyone to play! I’m pretty proud of how I prioritized the core features and managed to get everything up and running in less than a week.
Future Ideas
I think there’s a lot of untapped potential in using smartphones as game controllers for web-based games. Here are a few ideas I’d love to explore if I have time:
- Racing game where you use your phone as a steering wheel.
- Platform games with a phone serving as a joystick and button controller.
- Vertical Pong, where tilting your phone controls the paddle.
- Balancing games that use motion sensors to keep objects steady.
I’d also like to experiment with Phaser.js to build more complex games. And maybe add a global leaderboard? We’ll see! If you have any cool game ideas that use a phone controller, let me know!
Wrapping It Up
While Flappy Cube isn’t the most groundbreaking game ever, it was a great learning experience. I got to explore WebRTC, Socket.IO, and practice my JavaScript skills while building something fun from scratch. I think it shows how these technologies can come together to create cool, interactive web experiences.
Thanks for reading! If you have any feedback or suggestions, I’d love to hear from you!
Resources
Research
Technologies
Tools
Introducing Flappy Cube was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding – Medium and was authored by Filip Melka