DEV Community

sun jack
sun jack

Posted on Edited on AI-assisted

Pokémon Red: The Game Boy RPG That Turned a Link Cable Into a Social Network

Few games have a first line as famous as "Welcome to the world of POKéMON!" I replayed the original recently on my phone in a browser (you can play Pokémon Red online here). It's a little clunky by modern standards, but it's still remarkably hard to put down.

A Little Background

Pokémon began in Japan in 1996 as Pocket Monsters Red and Green, developed by Game Freak and published by Nintendo for the Game Boy. Western players got Pokémon Red and Blue in 1998. Creator Satoshi Tajiri has often said the idea grew out of his childhood hobby of collecting insects.

The setup is simple. You're a kid from Pallet Town in the Kanto region. Professor Oak gives you your first Pokémon, and your rival, the Professor's grandson, picks the one that has a type advantage over yours. From there you set off to fill the Pokédex and become the Pokémon League Champion.

How It Plays

The structure is now iconic:

  • Pick a starter: Bulbasaur (Grass), Charmander (Fire) or Squirtle (Water).
  • Catch and train: Wild Pokémon appear in tall grass, caves and water. Weaken them, then throw a Poké Ball.
  • Earn eight badges by beating the Gym Leaders: Brock, Misty, Lt. Surge, Erika, Koga, Sabrina, Blaine and Giovanni.
  • Take on the Elite Four: Lorelei, Bruno, Agatha and Lance. Then you face one final, very familiar opponent.

Along the way you keep running into Team Rocket at places like Mt. Moon, the Celadon Game Corner hideout, Pokémon Tower and Silph Co.

Battles are turn-based. Each Pokémon has up to four moves, and the type matchup chart (Water beats Fire, Fire beats Grass, and so on) is most of the strategy.

What Makes It Great

The link cable. Red and Blue each have version-exclusive Pokémon. In Red, that includes Ekans, Oddish, Mankey, Growlithe, Scyther and Electabuzz. You can't catch all 151 on your own, so the game more or less forces you to find a friend with the other version and trade. In 1998 that was a brilliant piece of social design.

Freedom within structure. The gym order is mostly fixed, but you choose your team, which Pokémon to raise and how to handle each fight. Two players can finish the game with completely different teams and completely different stories.

Atmosphere on tiny hardware. Lavender Town's music, the ghost in Pokémon Tower, the Snorlax blocking the road until you find the Poké Flute: the game does a lot with four shades of green-gray.

Tips for First-Timers

  • Charmander is the hard mode. Brock (Rock) and Misty (Water) both resist Fire. Catch a Grass or Electric type early, or pick Bulbasaur for a gentler start.
  • Stock up before Mt. Moon. It's long, the Zubat never stop, and there's no Pokémon Center inside. Bring Potions and Repels.
  • The Magikarp salesman isn't a scam, exactly. Buy it at the Mt. Moon Pokémon Center and be patient, because Magikarp evolves into Gyarados.
  • Teach HMs to Pokémon you don't care about. Cut, Surf, Strength and friends can't be easily forgotten, so don't waste your best moveslots.
  • Psychic types are strong in this game. Sabrina's gym is a wall for a reason. A good Psychic Pokémon of your own makes the late game much smoother.
  • Save often. There's no autosave, and losing a battle sends you back to the last Pokémon Center with half your money.

Under the Hood (for the Devs Here)

Full disclosure: I built OnlineClassicGame, the site the links here point to. Earlier posts covered the overall stack, arcade romsets, PS1 core fallbacks and ROM format sniffing. This time I want to talk about the part that matters most for a game like Pokémon: making it playable on a phone.

Detecting iOS is harder than it should be. Since iPadOS 13, Safari on iPad reports a desktop Mac user agent by default, so a simple /iPad|iPhone/ check misses every modern iPad. My detection combines the UA check with a touch-capability check: a "Mac" with multiple touch points is almost certainly an iPad. That matters because iOS gets different treatment elsewhere in the app. For example, I use Canvas 2D instead of WebGL in some places, because WebGL memory usage on iOS was getting too high.

A virtual gamepad that pretends to be a keyboard. The emulator already understands keyboard input, so my VirtualGamepad class doesn't talk to the core directly. Touch events on the on-screen D-pad and buttons are translated into simulated keyboard events. That keeps one input path for desktop and mobile instead of two.

Sizing without a pile of breakpoints. The controls are sized with clamp() and vw units, so they scale smoothly from a small phone to a tablet. The game canvas uses aspect-ratio plus dvh units, so it doesn't jump around when mobile browser toolbars appear and disappear.

Media queries that ask the right question. I had a bug where a landscape media query hid navigation on desktop too. The fix was to stop asking "is the screen wide?" and ask "is this a touch device?" with (pointer: coarse) and (hover: none).

Turn-based RPGs are ideal for this setup. Nothing in Pokémon needs frame-perfect input, so a touch D-pad works fine for a whole run through Kanto.

Your Turn

Every Pokémon Red player has a starter story. Which one did you pick, and did your rival's counter-pick make you regret it? And did you ever actually find someone with Blue to trade with?

If you want to start a fresh journey tonight, Pokémon Red is playable free in your browser here.

Top comments (0)