HTML5 Experiment – Reversi
Posted by Brian on September 16, 2010
Having read about HTML5 for so long, I decided to finally take the plunge and do a little experimenting. The result, a canvas-based Reversi game.
Features
- Canvas based Reversi board with animated moves.
- Worker based AI that can be interrupted to change the difficulty or disable. (Warning: Anything above easy was incredibly time and CPU intensive on my 4 year old computer. It may be better with new computers.)
- Goofy iPhone style interface, since the next step would be to turn this into an iPhone app.
- Warning: Only tested with Chrome. No clue how it will react to other HTML5 compatible browsers.
Thoughts
The canvas interface is pretty easy to work with and reminded me a lot of working with the Cairo graphics library. It took less than a day to get the actual game up and running, a couple days to get the worker AI running, a few more days rewriting the JavaScript using proper class structures and inheritance, and a few days just messing around with the CSS. The development tools available in Chrome were invaluable, making it a cinch to debug code, track down performance problems, and quickly identify what CSS was being used by other sites.
Recognition
- http://www.codeproject.com/KB/game/reversi.aspx – I lifted all of the AI code off of this site. It’s a pretty cool algorithm which simulates all possible moves and uses a weighting system to determine the best one.
- http://leaverou.me/2010/02/iphone-keyboard-with-css3-no-images/ – I lifted some CSS from this CSS3 iPhone keyboard to make my buttons.
- http://jeffbatterton.com/blog/5 – I lifted some CSS from this CSS3 iPhone to make the top part of the screen.
- My darling wife for putting up with my obsession this past couple weeks.
