Wuziqi – Child’s Play

With travel difficult my son has spent a large part of the summer in the Saitoplex. To make the most of the opportunity, we decided to build a simple Saito module together.

He is 10 and has been learning to code, scratch at school and camp, javascript/html/css with me for a few years. We decided on 五子棋 (Gobang) – five in a row, played on a Go board, as a simple project that could result in a playable game. He had built Towers of Hannoi and Naughts and Crosses (Tic Tac Toe) in javascript before, so this seemed like a good level, and we started with a playable ‘local’ version as step one.

Design meetings were held every morning on the walk to the office and he’d code up parts during the day. It took a little over a week of very non-intensive coding to put the initial version together.

Things I learned along the way.

The game stack is not intuitive for a ten year old. Particularly the first in last out way moves are stacked up then played out took him a while to understand. This isn’t helped by there not being complex moves in such a simple game, so it can be hard to see what it’s for.

Once you have a game that can be played by two players at the same browser, it is very, very simple to move it to the Saito game engine. You need to add a way to record the state of the game (simple if you already had it in a single object) and work out what needs to be sent to opponents as part of each move. Putting this onto the chain and broadcasting it, receiving it and playing out the moves, is… child’s play.

To a kid, maths is more intuitive than nested loops. Set the problem of assigning a row and column value to each cell on the board, the solution was:

Loop through all the cells, and determine the row and column from the ordinal using equations:

           // Set the row as the total divided by the side length rounded up.

           cell.sets.row = Math.ceil(n / x);

           // Set the column as the cell id mod side length.

           cell.sets.col = ((n – 1) % x) + 1;

 Rather than, what I think would be every coder’s instinct: to loop through the rows, and have a nested loop for the columns.

We will probably pretty the game up some, and will definitely take feedback from the community on features and changes, but we’ll have it up, playable in it’s ‘unvarnished’ state for a while.

I have also made an effort to comment up the code as a simple tutorial, something that should explain all the things we bumped into that might help someone building a game on Saito for the first time. These are mostly about handling p2p and the lack of a server.

You can try Wuziqi now on the Saito Arcade.  Enjoy.