A few weeks ago, I became interested in the Data Driven Documents (D3) library over at D3js.org. You can do some really amazing things with it -- check out their samples gallery. (SVG-compatible browser required! Chrome works great.)
In the next few posts, I'll step you through a little JavaScript program I wrote that lets you play OthelloTM, also known as Reversi. If you're not familiar with the game, Wikipedia has a good article that explains the rules.
You can see where we're heading with the finished game here. (Don't get your hopes up. The game is between two humans who share the mouse. The computer's sole job is to display your moves, not to select them. Still, you can click around and have fun. Note that Black moves first.)
In this series, we'll build the game step by step. Each step will illustrate a new aspect of D3.
Part 2: Getting Started with D3 (a minimal D3 program)
Part 3: Visualizing Data with D3 (the squares and pieces)
Part 4: Handling Events with D3 (hover and click events)
Part 5: Animation with D3 (making the pieces flip)