Checkers is a project that shows off my knowledge in OOP with Javascript. Rendered in canvas using sprite images that reduces the load time. Separated in to objects in order to be more concise. I was interested in taking on this projects because of the the simple mechanics that allowed me to manage the scope and nostalgic value. The project is available online and on GitHub.

Object Structure

I have created my objects with in mind that they would contain certain areas of the game. They are also physical and ideological parts of the real checkers board game. The first object and what contains everything, the Game object. Its job is to maintain and contain all other objects, such as getting pieces, checking turns and understanding on what tile the user meant to click. The next object is the Grid object and it manages everything that is happening on the board and how the board is laid out. The last object is the Piece object and it is the representation of an individual set pieces on the board. Just like the real thing it has a color, rank and position.

Canvas Rendering

Canvas is a pretty cool thing and there were a lot thing that I didn't know before I started this project. One of the things that I took for granted was the render cycle in other game engines. I initially had the idea of setting it up so that the screen would only change if something updated, but I later realised thats its much easier to have the canvas be constantly updating. And this is how my render is setup.

One of the main things to have is the update loop and like anywhere I have used Paul Irish's requestAnimationFrame method.

Next I added a resource loading method to my code that I took from canvas tutorial. It very simple to use.

//To load the assets
resources.load([
    'image1.png',
    'image2.png'
]);

//When assets are ready run the initialization
resources.onReady(init);

//Getting the images
resources.get('image1.png');

I found this to be a very easy way to load images into the projects. The last part was to render the them. To achieve this I had a render function that was inside each object and one called it will draw the sprite on to the canvas. And the function that is in the loop calls all render functions.

// Render method is inside of objects
render: function(){
    // Call the canvas to draw the image ...
    this.ctx.drawImage(resources.get('image1.png'), 32, 0, 32, 32, 0, 0, 32,32);
};

// Function setup on the top level
function main() {
    // Call all the render methods ...
    requestAnimFrame(main);
}
main();