Board Game Experiment, with JS Prototypes and Canvas

The Classes

As I said earlier, we’re going to use JavaScript prototypes. We’ll need that because we’re about to do some Object-Oriented Programming fellows, and it’s quite a thing with JavaScript. So even though I’m not really familiar with UML, we’ll save some time and effort by building a simple class diagram (we’ll see the methods and properties later on).

We will access the main game methods and properties with the Quoridor object. Let’s call it the engine.

Then we have the Squares. Basically a collection of them will constitute the board.

Now our Players can either be the User, or a Computer (the artificial intelligence we’re going to create, muhahahaha). They have the same methods and properties than the Squares, if we consider them incarnating the position of their pawns on the board… You follow me here ? Maybe not. Okay : the players have one pawn each, the pawns have one unique position (a square on the board). But to make it simpler, we’ll squeeze the Pawn object and build the players from a Square model.

About the fences, we don’t really need any method from them. So instead we’re simply going to use objects of this kind :

fence = {
  a: (int), // Easting
  b: (int), // Southing
  horizontal: (bool) // Axis
}

I’m trying to make it sound simple, but I took some time to come up with this. I wish I had properly started from a diagram, because I had to rethink the whole thing half-way. I discovered that website as well : yUML, you should give it a try.