Interesting toys for learning

Play Simple Canvas Game and investigate its source code. It's about two pages of JavaScript with detailed explanations.

Simple Canvas Game

Space Mahjong a simple Card Game (there's no dedicated repository for sources, but you can see it in the browser).

Space Mahjong

Or watch presentation about exploration of maze building algorithms.

Mazes

Conway's Game of Life and it's source code (in CoffeeScript). Sources is very small and have detailed annotations.

Convay's Game of Life

Interactive graphics made with D3, lots of different examples. While examples itself are usually small, understanding it requires some knowledge of JavaScript and D3. Don't use it if you just starting learning JavaScript.

D3 Samples

Frozen Defence simple Tower Defence game, play it or learn its sources (there's no dedicated repository for sources, but you can see it in browser).

Frozen Defence

Checkout Diablo II in Browser demo, the functionality is limited of course, but still it's impressive how much has been done with such a small amount of code.

Diablo II in Browser

Do it

Some of it may look complicated, especially if you just learning JavaScript. Don't allow such thoughts about complexity stop you. They have been chosen specifically because of small, simple and clean source code.

So, choose whatever looks interesting to you, open its source code and work with it. Try to alter it or made something similar. It would take just a couple of hours or days and can improve you JS skills significantly.

If you are just learning JS, you may also choose to start from basics first and checkout these toys later.

You may also be interested in more advanced open source HTML5 games, but its source code is more complicated and requires much more time to learn.

By Alex Craft