DEV Community: Aryaman Godara

Your Phone Is the Joystick: I Turned a Browser Tab Into a Game Console

Aryaman Godara — Sun, 28 Jun 2026 16:22:54 +0000

Open a Snake game on your laptop. Scan the QR code with your phone. Your phone is now the joystick — push the stick further and the snake turns and speeds up. No app install, no Bluetooth, no pairing menu.

Play it now: open go-console-84748.web.app on a laptop and scan the QR with your phone. (Repo link at the bottom.)

TL;DR — A cross-device Snake game. The desktop browser hosts and renders the game; the phone is a wireless analog joystick. They link with a 6-digit code or QR. Stack: vanilla JS, no bundler, no build step, plus two Firebase databases (Firestore for state, Realtime DB for the joystick
stream). Last snake standing, up to 3 players today — the engine and rules are already wired for 6.

Why I built it

I wanted "couch co-op" energy without making anyone download an app. Everyone already has a phone with a touchscreen and a browser. Why is connecting it to the big screen still a chore? So I made the phone the gamepad and the laptop the console — and the only thing standing between you and playing is a glance at a QR code.

How the two devices talk

One index.html holds both roles. Which one you get is decided at load: wide screen → host, or a ?session= URL param (what the QR encodes) → controller. Same file, two completely different apps.

The data flow splits cleanly by update frequency:

Desktop (host): owns the game loop, physics, collision, rendering.
Phone (controller): captures the joystick, streams input.
Pairing: 6-digit code / QR.

And the databases split the same way:

Firestore — sessions/{code}: session metadata, score, one-shot actions (start/restart). Written only on state edges.
Realtime Database — controllers/{code}: the high-frequency (~30Hz, throttled) joystick stream.

That hybrid is the one architecture decision I'd defend hardest. Firestore is great for sparse, structured writes; it is not where you want to fire 30 joystick updates a second per player. RTDB is. Splitting the control plane from the data plane is what keeps a multiplayer match sane.

Deep dive 1: the joystick is analog, not 4-way

Classic Snake snaps to four directions. This one steers at any angle. The joystick maps to a heading (radians) and a speed boost scaled by how far you push:

function joystickToControl(input, baseSpeed, config) {
    const magnitude = Math.hypot(input.x, input.y);
    if (magnitude > 0.1) {
        return {
            active: true,
            targetDirection: Math.atan2(input.y, input.x),
            speed: baseSpeed + Math.min(magnitude, 1) * config.maxSpeedBoost
        };
    }
    return { active: false, targetDirection: null, speed: baseSpeed };
}

atan2 gives the heading; magnitude doubles as the throttle. Push gently to ease around a corner, slam the stick to sprint. It's a tiny pure function (lives in logic.js, fully unit-tested), but it changes the entire feel of the game.

One more trick: I don't re-send the joystick vector if it hasn't really moved. An epsilon change-gate (shouldSendJoystick) means a steady-held stick stops re-sending entirely — noticeably cutting joystick writes without dropping a single real input.

Deep dive 2: a combo system where the visual is the truth

Eat again within the combo window (4.5s) and your multiplier climbs (capped at 6×). Score per food = 10 × multiplier. The yellow combo badge drains via a CSS animation that runs for exactly comboWindowMs — so the bar you watch emptying is the same duration as the actual expiry logic, which is checked each play frame in the game loop:

if (gameState.combo > 0 &&
    Date.now() - gameState.lastFoodTime > gameConfig.comboWindowMs) {
    gameState.combo = 0;
    updateComboDisplay();
}

The same comboJuice() curve drives particles, screen shake, and food-sound pitch, so a 3× combo looks and sounds identical in solo and multiplayer. Speaking of sound — every SFX is synthesized at runtime with the Web Audio API (no asset files), and the food pitch rises with the combo:

function playFoodSound(step = 1) {
    const freq = 660 * Math.pow(1.06, Math.max(0, step - 1));
    playTone(freq, 110, 'square', 0.28);
}

A 6× streak literally sounds triumphant.

Deep dive 3: no bundler, no modules — and a CI guard to keep me honest

There's no bundler and no ES modules. 19 plain <script> files load in a fixed order into one global scope:

<script src="js/utils.js"></script>
<script src="js/logic.js"></script>
<script src="js/config.js"></script>
<!-- … strict order … -->
<script src="js/main.js"></script>

The deployed code is exactly what I wrote, just concatenated by the browser — no tree-shaking surprises, no source-map archaeology. The catch: rename a function and you can silently break a consumer in another file. So no-undef is on, every cross-file global is declared in .eslintrc.json, and a CI script (check:globals) fails the build if that list drifts in either direction from the actual top-level declarations. The failure is the feature.

Gotchas (the stuff that actually bit me)

iOS Safari has no navigator.vibrate. It never has. So haptics fall back to an old Safari trick: a hidden <label> wrapping an <input type="checkbox"> with the switch attribute, then programmatically clicking the label to nudge the OS haptic engine. If even that fails, a red .loss-flash CSS cue plays everywhere instead. Feature-detect, degrade, never throw into gameplay:

  if (typeof navigator.vibrate === 'function') { navigator.vibrate(pattern); return; }
  // iOS shim: a hidden <label> + checkbox-with-`switch` can poke the haptic engine
  const label = document.createElement('label');
  const sw = document.createElement('input');
  sw.type = 'checkbox';
  sw.setAttribute('switch', '');
  label.appendChild(sw);
  document.body.appendChild(label);
  try { label.click(); } finally { label.remove(); }

The service worker stale-cache trap. An earlier "network-first HTML + stale assets" strategy let fresh markup load against a cached controller.js, breaking event handlers until a second reload. Going network-first for everything same-origin closed the gap. const CACHE = 'snake-shell-v31' — that v31 is 31 times I changed shell assets and had to bump the cache.
Analytics off by default. GA4 only boots after an explicit opt-in, and navigator.doNotTrack / globalPrivacyControl auto-decline. No consent → no handle, no cookies, no gtag. One trackEvent() helper no-ops when analytics is unavailable, so a privacy setting can never crash the game.
Multiplayer races. Two phones grabbing the last slot at once → a Firestore transaction serializes them; nobody double-claims. A rejoin token in localStorage lets a phone that refreshes mid-round recover its snake, and onDisconnect only nukes the host's _host child, never live players.

Try it / what's next

Grab a friend (or two). Open it on a laptop, scan with your phone, and go for the high score — or start a last-snake-standing match. The live cap is 3 players right now; the simulation and security rules already accept p1–p6, so flipping one maxPlayers knob is the only change between here and a six-snake arena.

▶ Play: go-console-84748.web.app
Code: github.com/aryamangodara/snake_controller

The phone-as-gamepad pattern feels underused. What other browser-only hardware tricks have you pulled off without shipping a native app? Drop them in the comments — I'll be replying all day.

Pass Microsoft Az:900(Fundamentals) in 5 hours: Step by Step Guide

Aryaman Godara — Sat, 25 Mar 2023 06:15:25 +0000

💝Intro

So, you clicked this and which clearly states that you are interested in the cloud industry. With these overwhelming tools and technology, you are confused about where to start.
No worries, this 20-year-old depressed kid will rescue you.😶 . (Yeah, bro I got 900 marks.)
If you choose azure it is the best practice to start with fundamentals certification even if you have experience of 5 years or more in the industry and you might have the basic idea of cloud. Then also I would suggest you go for Azure Fundamentals certification.

🤓 Let's Learn how to pass and get the certification.

Let's dive right in… and fail professionally

These steps might not work for you so please don't feel discouraged or something like that but also remember that these worked perfectly for me. I have conducted this experiment on myself.

Head directly to Microsoft's official website for AZ 900. (not now geek, calm down read it first..) Read it thoroughly (And I mean it, thoroughly). You will get a basic idea of what the exam expects from you and also the latest study guides and exam overview. Don't worry about seeing the price of the certification exam. I know you are very poor and you would like to save that money for your outing with your friends🤡. I will tell you the scheme for it also. Complete all the learning paths recommend to you by Microsoft. You will earn trophies also which might boost your learning process. (Frankly, these trophies are dumb and don't do anything😂) Now you attend the free virtual training of Microsoft Fundamentals for two days. After these two days, you will get a free exam voucher. You can now make an account on Pearson Vue which will give you a certification id and a chance to appear for an exam(for free). With all these 'Guru Mantras' you will succeed for sure.

📺Video?
Some people might argue that watching the YouTube playlist and then directly appearing for an exam is the 'best way'. I strongly disagree with that point. I think you should give the shot to official documentation first, because those guys made that product, and obviously questions will be from their documentation.
Plus it is very easy to read.
Plus, it is free.
Plus YouTube videos kill your time in many ways first they rant their introduction and then they beg for like, share, and subscribe( I will also, but at the end only… 😭)
Plus videos are also available in the documentation
Plus you get to read in this content-world
Plus reading official docs make you feel like a geek 😊. You think of yourself as a tough competitor of Mark Zuckerberg
🔥Too hot to handle
Now you are as hot as fire and ready to smash the cloud industry. Don't let the fire inside you go off without burning anything. Prepare for Azure fundamentals now!
Remember, It is very tough to get a cloud job as a fresher. This is very sad, I know. I can risk it. Can you?
If you think I have helped you anyhow. Please smash the celebrate👏 button to increase my reach. It really helps. I am new to blogging.

My reaction when I got the AZ 900 certificate (failed professionally ?)

If Microsoft is reading it… Hire me immediately

Why I open sourced my flutter game application?

Aryaman Godara — Tue, 08 Feb 2022 08:53:16 +0000

May the source be with you

I am the founder of the app Arcade Plaza. This is Flutter based application currently published exclusively on Play Store. My app was running very successfully some months before I started messing with it. Although I had experience of running a app over 500k active users but this was a disaster 🤐.

Now I have open sourced it here

So, lets start it from the beginning ..

😶‍🌫️ What does this app do ?

This app let us play free online arcade games at one stop. Conventionally users have to go to the different websites across the internet to find out the suitable game for themselves. Also, there are few websites which are just spam and contains harmful content or low quality games. Obviously it is very inconvenient to go to chrome and play your favorite game(s).

We keep list of handpicked games from the web and let users play them or mark them as their favorite to play later. Games are of high quality indeed such as Stacky Run, Ludo, Cut the Rope and many other games developed by major gaming companies.
Quality is my first priority ✌️

Download our free app to know more

🧠 How this idea came to my mind ?

I was just scrolling through the play store and I thought there is no proper app where I can play whichever game that I desire to play (which satisfies my mood 🌹) without downloading the various games on my mobile as it turns out they make functioning of mobile slow and occupies large disk space ( My game is only of 7 M.B. )
So I thought to make this app where we can find more than 75 games at one place.

💹 App at its peak

To be very honest with you, I started this as a joke🥲. I made a separate developer account as I was not very serious with it and didn't want to destroy my existing account, but to my amaze it turned out to be very successful. On the first day it receives 10 downloads on the next day 257 downloads.(Note that I have not spent even a single penny for its marketing or advertisement).So within the the week I had 900+ users.

💲 Earnings

As you might be already knowing that its against the policy of the Facebook Ads to share the official earnings. Still, you can easily estimate the earnings 😏 There was a banner ad with average of 970 impressions daily...

📉 Downfall and reason of open sourcing

I was very happy with my app's performance but I added some necessary like a favorite button on the each game tile. A friend of mine suggested me to partner with a company named "Gamezop", which was the biggest mistake ! (I still hate that friend 🙄)
I added games of Gamezop and the ads which users will see, I will receive 50 percent of the revenue produced by those games. In my greed I placed them on the top instead of those existing better games. Gamezop games are average but there are ton of ads. Even playing a single level can frustrate user and as they were on the top so users were not able to scroll more to find other games. In frustration people started uninstalling in great numbers. It is now reached to a state where I am getting 6-7 installs and 11 uninstalls monthly. It is shrank to 60 users only. So I need a community of developers to help a novice like me...

⭐ Response and Reviews

Touchwood all of the reviews are of 5 stars and with a positive response till date. You can see it for yourself people at play store are loving it 💝. This also played a major role in the initial success of it too because Play Store's algorithm promotes the app with positive responses.

🤔 How open source is going up to now

Its too early to comment on it but there are no response except mine. Although there are few stars on the repo. Sadly my friend's repo is very cool (yeah, the same friend).I thought that the moment I will upload it I will get PR's(Pull Requests) but reality hits hard 🥲

So, this was my first tech blog. I request you to like and spread so that I will be motivated to write more. Tell me or ask me something in the comments section 😊.