Link to the game: https://deniseddi.github.io/TicTacStar/
Tic-tac-toe is a classic noughts and crosses game for two players, X and O. Players take turns marking the spaces in a 3×3 board. The players alternate placing their marks and the first one to place three 'X' or 'O' aligned on an horizontal, vertical, or diagonal row wins the game. But for this project, The theme of "Star Wars" was chosen because I wanted to use CSS features that simulate laser.(Hint: play with your speakers on) As my first project, it was a fun game to build and, at the same time, it presented some programming challenges, specially building the logic and functions on javascript.
- HTML5
- CSS
- Some cool CSS features included a text-shadow and transitions properties to enphasize the neon glow effect.
- JavaScript
The project started by defining the HTML structure then moving on to building functions on Javascript. It was challenging to understand the logic and build some of the functions to make the game work. Some examples were to stop the game when one player wins and to change from one player to another.
Another challenge, was to find a way to check who would have won. For that, I needed a combination of win possibilities. The approach to solve this problem was to create nested arrays including the winning combination and then, build a nested loop, adding to the 'x' or 'o' counter. The player who achieved one of combinations is the winner and the game finishes there.
A reset button in order to restart the game by clicking on it and storing current wins for each player for the next rounds was not solved in time of presentation.