jQuery Conf: Recreating Nostalgic Computer Games in JavaScript

Last weekend I was incredibly excited to be a speaker at jQuery Conf in Chicago! This was my first conference talk, and for it I spoke about creating games in the browser. It was an iteration on and expansion of the Spider Solitaire talk I gave at Brooklyn JS a couple of months ago, but this time I also brought Tetris into play!

Here are my slides, but if you want to see the fancy animations you’re better off watching the video:

Tetris was a great second game to build! It had enough elements that it no longer made sense to store the logic in the DOM as I did in Spider Solitaire, and so I had a continuous game loop with event-driven game logic. By doing this, I was able to completely separate the game logic from the DOM, and after each ‘tick’ in the game (50 ms) the game was re-rendered.

I went into more detail in the talk, but in a nutshell, there were two different sets of events happening on each game tick – one was the set of events associated with the board, and the other was the set of events associated with the current active piece. The board adds a new active piece if there isn’t one, renders the game, and removes a complete row if one is found. The piece, on the other hand, is responsible for removing itself from its last location, adding it to its new location, changing its coordinates on the board, and rotating.

I learned a lot by building both Spider Solitaire and Tetris, and it was humbling to be able to share my experiences. I also discovered that a lot of games are not technically difficult to build – the challenge is in determining the game logic and rules. So if you’ve ever been even mildly interested in creating a game, I highly encourage you to just go ahead and build one!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>