JavaScript Checkers

I’ve been itching to write some JavaScript, so a few days ago I threw together a Checkers game that uses only HTML5 and JS. It’s got a simple AI that terminates after three seconds. The faster your browser can run JavaScript, the smarter the AI will be.

For example, here is Firefox 4 Beta (blue) versus Firefox 3 (red) – it happens that Firefox 4 is roughly 10X faster at this program, and soundly defeated its predecessor:

Firefox 4 Beats Firefox 3 at Checkers

The algorithm for the AI is UCT, a form of Monte-Carlo Tree Search. The idea is to estimate the likelihood of winning from a position by simulating hundreds or thousands of random games. UCT helps prune the search space by quickly eliminating bad positions.

While writing the source for this, I tried to turn off the part of my brain that said, “Hey! I know Firefox version x.y.z might be slow or fast at feature X.” That turned out to be okay, but it was harder to avoid general knowledge about JavaScript engines. I ended up with three variations:

  • Fast Checkers, which has manual inlining, manual strength reduction, hardcoded constants, and other gross stuff. Pieces and positions are represented via packed integers.
  • Slow Checkers, which removes manual inlining, strength reduction, and baked-in constants. Here, the additional overhead is extra memory accesses and function calls.
  • OO Checkers, which is the same as “slow”, except represents pieces as objects instead of packed integers. Here, an additional overhead is object allocation.

Performance seems uniform across most browsers. Below I’ve recorded the number of games each browser could simulate per second. Higher is better. Note – this chart is totally unscientific, and random simulations are affected by the behavior of Math.random().

Fast Checkers Slow Checkers OO Checkers
Firefox 4 Beta 14035 9018 9100
IE9 PP6 14579 8234 8067
Opera 11 Alpha 13165 8178 8749
Safari 5 12442 8045 8700
Chrome 9 Canary 4160 2060 2343

And – because why not – I ran them on my Droid 2 as well.

Fast Checkers Slow Checkers OO Checkers
Fennec 2b3pre 338 170 220
Android Browser 185 93 114
Opera Mobile 166 112 126

Since I’m pretty bad at web development, and don’t write JavaScript (sans test-cases) nearly as much as I should, this was an amusing experience. I kept making some really dumb mistakes, one repeatedly:

Select All Code:
Game.prototype.player = function () {
    return this.board.player;
}
...
var player = game.player;
if (player == x) { ...

And wondering why “player” showed as a function in the developer console. I probably should have used ES5 getters. A few other language features would have made the experience a little nicer – but nothing so much as real modules. I tried to emulate good encapsulation with closures, but it’s just not the same. And it doesn’t seem like any engine is smart enough yet to propagate constants through closures (which is one difference between the “fast” and “slow” variants).

Using developer tools for the first time was also an interesting experience. Firefox 4 and Chrome can debug code with a reasonable slow-down, but IE9 became over 100X slower; presumably it cannot debug with the JIT yet. I used Firebug until I needed single-stepping (we didn’t have that working in JägerMonkey for Beta 7), and then bounced over to Chrome – both proved really invaluable. I think my days of calling alert() are over.

Anyway, it was fun writing this, and I’m glad that I can write something computationally expensive and have it be fast everywhere. If and when time permits I may try a more stimulating game like Go.

111 thoughts on “JavaScript Checkers”

  7. https://www.uqxbntrr5.online

    you’re truly a excellent webmaster. The site loading speed is amazing.

    It kind of feels that you are doing any distinctive trick.
    Furthermore, The contents are masterwork. you
    have done a fantastic activity in this topic!

  8. https://Busan-kropmasasage2.blogspot.com

    I was wondering if you ever thought of changing the
    layout of your blog? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content
    so people could connect with it better. Youve got an awful lot of
    text for only having 1 or 2 pictures. Maybe you could space it
    out better?

  11. https://www.srurbbzdq.online

    Have you ever considered creating an ebook or guest authoring on other sites?
    I have a blog based on the same ideas you
    discuss and would love to have you share some stories/information. I
    know my viewers would enjoy your work. If you are even remotely interested, feel free
    to shoot me an e mail.

  12. Randi Nevile

    Howdy!

    You Need Leads, Sales, Conversions, Traffic for bailopan.net ? Will Findet…

    I WILL SEND 5 MILLION MESSAGES VIA WEBSITE CONTACT FORM

    Don’t believe me? Since you’re reading this message then you’re living proof that contact form advertising works!
    We can send your ad to people via their Website Contact Form.

    IF YOU ARE INTERESTED, Contact us => [email protected]

    Regards,
    Nevile

  39. 내국인 카지노

    whoah this weblog is great i like studying your posts.
    Stay up the good work! You already know, many people are searching round for
    this information, you can help them greatly.

  41. 텍사스 홀덤

    Undeniably imagine that that you stated. Your favourite justification seemed to be on the net the simplest factor
    to take into accout of. I say to you, I definitely get irked at the same time as other folks consider concerns that
    they plainly don’t know about. You managed to hit the nail upon the top and
    also defined out the whole thing without having side-effects , folks can take a signal.
    Will likely be back to get more. Thank you

Comments are closed.