Recreating Classic Games for the Web (Series Intro)

#elm #functional

I've always been fascinated by the level of interactivity and fun that classic console games were able to offer. I grew up playing games like Super Mario Bros. for the Nintendo Entertainment System. And it's been a silly dream of mine over the years to create similar games for the web.

I've been working with web applications in recent years, but game development was a different world I always wanted to learn more about. And while I've tinkered with building a few demos here and there, I never got very far with it.

My goal for this series is to recreate classic console games from scratch with the Elm programming language, and to share the process as I go.

Which Games?

When I mention "classic games" in the title of this post, I'm primarily referring to console games for the Atari 2600 and Nintendo Entertainment System.

In other words, I'd love to recreate games like Pong, Super Mario Bros., and The Legend of Zelda. But I don't plan to work on games like Tic-tac-toe or Hangman. And it's also unlikely that I'll be able to recreate the modern AAA game titles that are developed by hundreds of talented people.

The plan is to get started with relatively simple Atari games (although I've found even simple games can take a fair amount of work to polish and get right).

(Atari) Pong
(Atari) Breakout

Assuming I don't rage quit after building those, I'll move on to Platformer games. This is where the list already gets a little hazy because Celeste is a modern take on some of these classic mechanics.

(Atari) Pitfall!
(NES) Super Mario Bros.
(Indie) Celeste

I'd also really love to build Adventure games, with The Legend of Zelda: A Link to the Past being my childhood favorite.

(Atari) Adventure
(NES) The Legend of Zelda
(SNES) The Legend of Zelda: A Link to the Past

Scope

Admittedly, I won't be able to clone all the amazing artwork and music and features from these games. So the idea is to at least figure out the primary game mechanic from each genre.

There are also subtle aspects of these games that make all the difference. Mario's jump has to feel just right. And when a ball strikes a paddle in Pong, hits toward the edge of the paddle make the ball come off at a steeper angle. So you take on more risk hitting it closer to the edge of the paddle, but you also increase the difficulty for your opponent.

Plan

My background is in web development, not game development. So I'll likely make mistakes and run into problems that other smart people solved a long time ago.

But it feels like a good way to learn and a good time to get into game programming. There are awesome tools and learning resources available these days.

You can download Unity for free and there are books and tutorials out there for creating both 2D and 3D games. There are also projects like PICO-8 and LÖVE 2D for a language called Lua that are super fun to try out.

Why Elm?

"As with any time you fall in love, it's difficult to explain why. It just worked the way I work."
Dave Thomas Programming Elixir

Elm is a fun language to work with, and it's become my favorite for front-end web development. Most languages involve a workflow where we write code, run our program, find errors, and debug them. With Elm, we write types and code with feedback from a compiler, and then run it with confidence that it won't catch fire.

Although the options I mentioned above are likely better for most game development, Elm will be a fun way to build things from scratch and a good way to learn. It also means I can start with simple Elm and SVG for the first couple games, and then learn more about WebGL and other technologies as needed.

Motivations

Beyond the motivation to create fun, interactive games; there's also a lot to learn. I'm excited to learn more about game design and development (like working with an Entity Component System). I find it fascinating to learn about how the game industry evolved. And it's amazing how far the medium has come considering that the 1970s (Atari) and 1980s (NES) weren't that long ago.

It's a good opportunity to continue improving functional programming skills and solve problems we don't usually come across when building web application features. And it would be cool to pull some of those ideas from games back into web application development. I'm personally interested in how ideas from the world of game design can be used to improve educational content.

There are some fascinating directions to go once we learn the basics. Creative coding projects and experiments like Cube Slam that combine web technologies like WebRTC and three.js for a fun multiplayer game.