This project (https://alistairwilliamtaylor.github.io/tictactoe/) builds on the General Assembly task of creating a browser-based tic-tac-toe game for two user players. The most significant addition is the creation of computer bots for the user to play against. The CSS is clean and minimal, and makes use of the round 'o' and simple 'x' of the font 'Varela Round' to fill out a basic CSS grid. My initial intention was to create an invincible bot, and a bot so good at being bad that it couldn't possibly win. At this point I have created a very 'difficult' bot which is nevertheless beatable with a little ingenuity, and a really easy bot that can, however, be forced to win once you figure out the very simple algorithm guiding its moves.
- javascript
- css
- html
Perhaps the most impressive feature of the 'difficult' bot is that it recognizes when the user has two symbols in any potential winning combination and blocks the user from adding a third, where possible. The 'difficult' bot also always wins the game by filling out a winning row if this is an available move.
The look and feel of playing against a computer bot were improved dramatically by adding a time delay between the user's move and the computer's response. Originally, the computer's response was so quick that the two events appeared simultaneous to the human eye, and this was offputting.
The user interface is composed of two separate, minimal screens: a gameplay screen, and an endgame screen. These javascript code toggles between these screens, when appropriate, by accessing the DOM and changing the CSS 'display: hide' style. A time delay was also added at the end of the game so that the user can see the symbols of the winning player in green, but not interact any further with the gameboard, before then moving to the endgame screen. Previously, upon the achievement of a result the interface switched immediately to the endgame screen, leaving the user with no time to actually see the lay of the board when the game was won, lost, or drawn.
The javascript code relies heavily on two 8-item arrays, one for each player, which keeps track of their progress (0-3) towards each of the 8 ways of potentially winning. The mapping of these 8 possibilities onto the array is explained in a comment, but in retrospect it would have been a lot more clear to use an object in this case, with the key clearly stating e.g. 'first horizontal row', 'third vertical column' etc. This would make the code a lot more readable and much easier to work with throughout the program, as it currently requires the programmer to keep the meaning of the respective array items in their head and causes a headache.
Furthermore, the javascript code for this project contains a large amount of repetition, mostly with regard to calculating the consequences of every move by modifying the array mentioned above. Some of this repetition could be removed by creating 9 small functions (one for each possible move) to do this calculation. These functions could then be given readable and clear names, and called throughout the program. This would dramatically improve the readability and concision of the code.
Improving these two cumbersome features of the code would then allow for additional features to be generated much more easily in the future. These potentially include:
- adding an invincible bot
- adding a bot who will never win
- only the winning row of symbols are displayed green
While these extra features could potentially all be generated by just further adding to the already cumbersome code, I think that it would be far more productive to improve the code before making any further changes to the program's features.