This web game puts together the skills I have been learning in HTML, CSS and JavaScript.
The task was to replicate the game of Tic Tac Toe, and in the process develop the following skills:
- Building an app from scratch.
- Get HTML, CSS and JavaScript to all work together.
- Identify the game logic required for a game of Tic tac toe.
- Build something that is dynamic and allows two people to play the game.
- Use semantic tags
<head> <header> <body>etc. to set out the HTML document. - Use appropriate class names and IDs to style elements with CSS and manipulate with JavaScript.
I used a wide variety of CSS selectors to create the current version:
- tags, classes and IDs.
- pseudo class :hover for mouse over effect.
- used Keyframes to create an animation effect for the board reset.
- All DOM manipulation in this project used JQuery.
- Game logic was done in JavaScript.
- The game itself is contained in a JavaScript object.
- All DOM manipulation is done by calling external functions for separation of concerns.
- The gameboard layout gave me heaps of problems until I used position absolute to get everything to stay put.
- I used a hidden
<div>to declare a winner that also solved the issue of stopping players clicking on extra squares. - Getting the reset animation working was a big learning experience. I looked at various animations on Codepen and examined their code until I worked out how to include it in my own.
- I then had to work out where to add and remove the class to get working.
- Showing my game to other students and getting their feedback gave me great ideas on how to modify my code.
- Add a way to track the winners for a current session and record these on screen.
The page is hosted here on github.
Sneaky Easter Egg - What happens when Bill Murray and Nicolas Cage go head to head?