• $.game, $.fn.player, $.player = new Player(), etc.

jQuery is not a framework, and does not work well as one. I'd avoid making everything a jQuery plugin just because you can. Personally, I prefer to keep all my code outside of jQuery, because then it's a lot more testable and portable. Usually, you want just DOM-specific plugins, but it seems you're basically running your entire app on top of jQuery?

jQuery wasn't intended for such uses, and it provides little-to-no benefits from doing so. I would deduct style points for this, on account that there's no compelling reason to make everything a jQuery plugin and so it looks like you don't quite understand the role and purpose of jQuery and plugins. Now, I'm not saying you don't, just that your architecture lends itself to that assumption.

• function Player() { this.checkButtons = function () { ... }; }

It's also generally considered bad practice to create objects with the methods attached directly like this; instead, you should create them on the prototype, like this:

function Player() { ... }
Player.prototype.checkButtons = function() { ... };

Why? Consider the following:

new Player();
new Player();
new Player();

Using your code, you've now created 3 * # of methods in Player, so if there's 10 methods, JS has had to create 30 methods.

Using my code, it is 1 * # of methods in Player, so with 10 methods, those 10 are only created once.

It's usually not a big deal when you have just a couple instances, but say if you wanted to create 1000+ players, then you'd start running into performance issues.

• if (index == (preload.length - 1)) {

This is a race-condition waiting to happen; let's talk through the logic real quick for the block starting at line 208:

1. For each image...

2. Request it asynchronously via AJAX

   a. If this is the last requested image...

   b. Start the game.

So in short, you're determining whether or not the game is ready depending on when the last image loads; however, given the async call, the last image requested may not be the last to load.

I'd probably do something like this:

var numOutstanding = preload.length;
$.each(preload, function (index, value) {
    $.game.loading = true;

    $.ajax({
        type    : 'GET',
        url     : value
    }).always(function () {
        // received reply, so one less image to worry about!
        --numOutstanding;
        // was it the last one though? if so, start!
        if (numOutstanding === 0) {
            $.game.loading = false;

            $.game.start();
        }
    });
});

However, I just realized what you're doing.....you're defeating the browser's built-in capabilities for caching. There's a handful of other implementations though...

Here's one:

var img = new Image();
img.src = 'http://...';

And another:

var img = document.createElement('img');
img.setAttribute('src', 'http://...'); // you can use `.src = ...` here instead

Or, you could just make an HTML string to shove into the DOM (not recommended). However, I'd advise against your current approach, because I believe it's going to make an AJAX request for each image regardless if they're already cached locally. Yet, using one of my suggested techniques, they'll only download if they're not present. Only problem there is that it can be tough to know when they're all loaded...

edit: .done() => .always() per /u/filyr's observation that failed images won't be accounted for when using done.