Resurrection and... Othello();

I decided instead of letting this blog just sit here, I might as well use it to share some of my personal projects and talk a little bit about them.

Recently I had realized that throughout all of my programming projects that I have worked on, be it personal or freelance, I have never once programmed an AI! I mean, technically I have, but I would hardly count a stationary floor turret as an "Artificial Intelligence," as all it did was do some trig on the players position to figure out what angle to point. So I started looking up dozens of videos on AI theory, and A* algorithms, but then I realized I didn't have a project to build an AI into.

Enter, the Othello project. As I said in my first post,  I work at an after-school care program at an elementary school, which means I do a lot of games and activities with the kids. One of the big games that the kids always want to play is Othello, and so just out of curiosity I decided to try and program an Othello AI with the goal of it eventually beating a first grader. I know, I know, really shooting for the stars there, but as it's my first AI I figured why not start out small, and maybe just maybe *gasp* it will beat a second grader XD.

That was 3 weeks ago. In my excitement to start programming the AI, I forgot that I still have to program the game itself! I seem to recall a specific quote from Carl Sagan where he stated "In order to make an apple pie from scratch, you must first invent the universe."

There is no Othello AI without first building the game of Othello, so due to me not actually wanting to program the game and just the AI, I have been working on and off over the past couple of weeks (but mostly off, I mean come on, Dark souls 3 is out!). As I am writing this I have already finished the actual "game" part and it currently allows 2 players to play a game of Othello, so I will try to remember as much as I can about writing the program.

I am writing this in JavaScript, and not because it's my favorite language, but simply because of the fact that it has canvas built in and I don't want to faff about with linking external libraries and dependencies for a personal project. Plus when I am finished I can upload it here!

Starting Off

The board setup was pretty simple. I started off drawing a green background, and then added some grid lines.

Next, I created an array to hold all of the piece information. For the non-programmers reading this blog, an array is a list that can be sorted through using an index number. For example, I create an array named "pets" and add to it the items "dog," "cat," and "bird." If I want the first item I can simply type "pets[0]" and it will return the first item in the array which is "dog," (the reason it is 0 is because computers start counting at 0 and not 1). This makes it easy to create a loop that cycles through all items in the list by simply counting up.

In my program I created a 2 dimensional array, which is sort of a list of lists, meaning I more or less use X and Y coordinates to access a specific tiles. For each space on the board, it stores either a 0 for empty, a 1 for a white piece, or a 2 for a black piece, which means the computer sees this:

[0   0   0   0   0   0   0   0]
[0   0   0   0   0   0   0   0]
[0   0   0   0   0   0   0   0]
[0   0   0   1   2   0   0   0]
[0   0   0   2   1   0   0   0]
[0   0   0   0   0   0   0   0]
[0   0   0   0   0   0   0   0]
[0   0   0   0   0   0   0   0]

I then iterate through these numbers to draw colored circles in the appropriate cells on the board, leading to us seeing this:

The last part to developing the UI was adding the actual "interface" part, which came in the form of a little highlighted square that follows your mouse, as well as it showing who's turn it is by showing the color of the piece that is in your "hand." The result turned out nicely:

Surprisingly this small feature was the most complicated part to build into the UI. You see, while looking at this board as human beings (or reptilian invaders, I don't discriminate)  we can easily tell that the mouse cursor in the above image is in cell (2, 6) however, all the computer knows is its ACTUAL position on the screen, meaning that to the computer the mouse isn't in cell (2,6) but instead on pixel (164, 278). This means if I were to try and draw the highlighted square at the mouse position it would look more like this:

This itself is not hard to fix, just a simple problem of dividing the mouse position by the number of cells and removing the decimal place. The problems came when the mouse would leave the game-board, the entire program would crash due to a slew of  "out of bounds" errors. Again, simple to fix, but tedious, as in order to restrict the cell count I had to figure out the right order of the Math.max, min, and floor functions. The final result is as follows:

And that pretty much somes up the first part of getting the interface up and running, in the next part I will go into a little more detail on placing pieces and how the program checks to see if there is a valid "trap."


Popular posts from this blog

Live Streaming is... weird


Accountability(); Pt. 2 From failure to success