I guess I have put it off long enough. At some point I knew I would have to show other people my code, as embarrassingly naive and novice as it is. So let’s get it out of the way in one fell swoop. Here is everything I have done. It is sloppy, messy, not well commented, hacked together and sometimes difficult for no reason. And I’m okay with that.
My earliest work is in the index.html and the top of the css file. It is basically me working through the battleship game in the Head First book, with some added flourishes. The meat of my own work is in the two backgammon files. That is where, so far, I have made my most creative mistakes.
Here is my board with some, uh…, test features turned on. The board itself is an image and the playing field is composed of several tables that I have aligned to the board. Then each cell of the table has one of three css classes applied to it. .fillWhite uses an image, confusingly enough, an orange checker. .fillBlack, even more confusingly, makes the entire cell white (note to self, change that to a black fill… done). Finally there is .empty that, for testing purposes makes the cell grey.
After moving some of the checkers a few times.
Aside from setting up the board, the user can also move checkers using an input box. This is another stepping stone/test function while I work out the real input scheme. I just recently got the move function to turn the origin cell to empty instead of just “adding” a new checker to the board in the destination position. I also have the moves hardcoded to 2 spots and flipping between the players every move. It’s confusing, but it works for now.
There are a lot of things to talk about with even just this early stage and simplistic implementation. Design and decision choices. A couple questions I can answer easily together. Why am I using a table for the board? Why am I using an input box to move the checkers? Because I ripped those ideas right from the battleship game. I, essentially, don’t know of another way to do it. In fact, this is a good time to talk about my overarching design philosophy for this particular project. I aim to get it done and make it work however I can. I can always rewrite, but for now I just want to see this through.
I do try to keep my functions small and simple whenever I have the brainpower to do so. One place that shows well is in the functions to fill and empty cells. I pass in the minimum amount of information the need and update the view. Here they are:
That’s it. I have run into some issues. To clear the entire board with the emptyCell function, I need to feed it the id of every cell. That means either storing all of the cell values in an array or building a function to create those values and feed them to emptyCell. Also, who knows how many other creative solutions I haven’t thought of. What I have decided to do instead is utilize jQuery, with mixed success. I’ll figure it out. At least half of the “fun” of coding for me has been troubleshooting. I see a lot of troubleshooting in my future!