Recreating Classic Games for the Web (Series Intro)
Tags: elm, functional
Published: 2020-03-01 04:30:26

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.

![Super Mario Bros. Start Screen](https://dev-to-uploads.s3.amazonaws.com/i/wqof4n46u2t4iihivwre.jpg)

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](https://en.wikipedia.org/wiki/Atari_2600) and [Nintendo Entertainment System](https://en.wikipedia.org/wiki/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 Simpsons Pong Reference](https://dev-to-uploads.s3.amazonaws.com/i/knog5zaojhjdaut33a7c.jpg)

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**.

![Pong Arcade Game Instructions](https://dev-to-uploads.s3.amazonaws.com/i/glslte92wzm3ifzdnxym.jpg)

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](https://unity.com) for free and there are books and tutorials out there for creating both 2D and 3D games. There are also projects like [PICO-8](https://www.lexaloffle.com/pico-8.php) and [LÖVE 2D](https://love2d.org) for a language called [Lua](https://www.lua.org) 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](https://elm-lang.org/) 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](https://developer.mozilla.org/en-US/docs/Web/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](https://en.wikipedia.org/wiki/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.

![Cube Slam](https://dev-to-uploads.s3.amazonaws.com/i/1fe05am2ncbixthmpp52.jpg)

There are some fascinating directions to go once we learn the basics. Creative coding projects and experiments like [Cube Slam](https://www.cubeslam.com/tech) that combine web technologies like WebRTC and [three.js](https://threejs.org) for a fun multiplayer game.

## Further Reading

In the next post, I'll get started creating a Pong game from scratch. If you're interested in learning more in the meantime, here is a collection of resources you might like.

- **Books:** [An Introduction to Elm](https://guide.elm-lang.org), [Racing the Beam](https://mitpress.mit.edu/books/racing-beam), [A Theory of Fun for Game Design](https://www.theoryoffun.com)
- **Movies:** [Indie Game](http://buy.indiegamethemovie.com), [World 1-1](http://www.worldoneonemovie.com), [The New 8-bit Heroes](https://www.thenew8bitheroes.com/the-film.html)
- **Talks:** [Bret Victor: Inventing on Principle](https://vimeo.com/36579366)