Play Chess with HTML5 and Javascript

1 minute read

I couldn’t find any modern webpages that allowed the user to play chess against the computer. So as a learning experiment I decided to create a single page chess playing webpage using HTML5 and Javascript. The page runs entirely in the client browser, there is no server side code. I targeted the latest browsers Chrome, Firefox, and IE 9 and higher and found that they all have pretty good standards compliance now. I don’t have to make nearly as many browser hacks as were needed just a few years ago and I could use most modern HTML5 features. Here are some of the technologies I used to make the site:

  • Bootstrap – Basic page layout and navigation menu. This is a good starting point for all new web applications.
  • jQuery UI – Handles drag and drop and the modal dialogs.
  • SVG – The chess pieces images are SVG files. This makes the pieces able to scale to different sizes depending on the screen size and still look good. IE only supports this in version 9 and higher so the page doesn’t work in IE 8 or lower.
  • jQuery UI Touch Punch – This is needed to make jQuery UI events work on touch based devices. I’m not sure why this isn’t built into jQuery UI. Until it is just include this plugin and everything works great on phones and tables.
  • TypeScript – This makes serious Javascript development much easier with strong typing and real classes. It compiles down to Javascript so you still get 100% compatibility. Typescript is fully supported in Visual Studio 2013 Update 2.

So check out the site at quickchess.net. If you find any bugs or have any suggestions for improvement then let me know in the comments.

Updated: