This is my Tic-Tac-Toe Project for Interapt/General Assembly. I built (almost) the entire page using DOM Manipulation, which is about the first 70 or so lines.
I focused on using Arrow Functions, so as to prevent any complications with hoisting. Some of the methods seem like the are in unconventional spaces (largely due to where some of the elements or variables are created), but everything calls correctly based on the order that they are in.
I was able to solve for the winner by creating an array of all the possible win combinations on the board (winSets: there are 8), and comparing them to the currentPlayer array of id values from selected squares. Upon finding an instance of every winSet item matching the contents of the player array playerArr, the function removes the squareClick() event listener, runs updateStatus() to update the data set in the #game-status element, and triggers the resetGame() confirmation event.
I ran into a few use cases where a player would win twice, or a player would win on the last available square (triggering the draw condition of concatinating both player's array and checking if the length is 9 items). To account for this additional requirement, I added a gameOver boolean to my games object, and to update the value to true upon successful matching of player array to win array. This prevented the match checking loop from running another check. When I added the gameOver variable to the draw conditional, it also prevented counting a post-victory draw.
After confirming solid execution of the checkWin() function, I added a few more function calls to update the counters in the games object play audio.
To achieve resetting the game without reloading the page, I built a resetGame function. This empties the player selection arrays from the games object (xArr & oArr), changes gameOver back to false (for next run of checkWin), sets a random starting player for the next round, stringifies the games object so it could be saved in localStorage and rebuilds the game board by wiping innerText value using an empty string ("") and refilling it by calling fillBoard()
I was able to build an "ai" for the computer by collecting the un-selected squares (squares without the class of X or O) and pushing those elements to the compChoices array.
After checking if the compiled array list has options to choose (compChoices.length > 0) and that the game is not over, the "ai" chooses a random element from compChoices. The "ai" adds the classes O and selected, then removes the squareClick() listener to deactivate the selected element as a clickable option from the gameBoard.
Upon deactivating the click, the function checkWin is called and processed, after which the gameStatus() is updated.
- Allow players to customize their tokens (X, O, name, picture, etc)
- Build a web application from scratch, without a starter codebase COMPLETED
- Use your programming skills to work out the game logic for a simple game like Tic Tac Toe COMPLETED
- Separate HTML, CSS, and JavaScript files in your application COMPLETED
- Build an application to a specification that someone else gives you COMPLETED
- Build a dynamic game that allows two players to compete from the same computer COMPLETED
- Craft a README.md file that explains your app to the world COMPLETED
- Render a game board in the browser COMPLETED
- Switch turns between X and O (or whichever markers you select) COMPLETED
- Visually display which side won if a player gets three in a row, or show a draw if neither player wins COMPLETED
- Include separate HTML / CSS / JavaScript files COMPLETED
- Stick with KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles COMPLETED
- Use JavaScript for DOM manipulation COMPLETED COMPLETED
- Deploy your game online, where the rest of the world can access it COMPLETED
- You can use GitHub Pages for deploying your project COMPLETED
- Use semantic markup for HTML and CSS (adhere to best practices) COMPLETED
- Have well-formatted, and well-commented code COMPLETED
As a user, I should:
- be able to start a new tic tac toe game COMPLETED
- be able to click on a square to add X first and then O, and so on COMPLETED
- be shown a message after each turn for if I win, lose, tie or who's turn it is next COMPLETED
- not be able to click the same square twice COMPLETED
- be shown a message when I win, lose or tie COMPLETED
- not be able to continue playing once I win, lose, or tie COMPLETED
- be able to play the game again without refreshing the page COMPLETED
- Keep track of multiple game rounds with a win, lose and tie counter COMPLETED
- Allow players to customize their tokens (X, O, name, picture, etc)
- Use localStorage to persist data locally to allow games to continue after page refresh or loss of internet connectivity COMPLETED
- Involve Audio in your game COMPLETED
- Create an AI opponent: teach JavaScript to play an unbeatable game against you COMPLETED
- Make your site fully responsive so that it is playable from a mobile phone COMPLETED
- Get inventive with your styling e.g. use hover effects or animations COMPLETED
- List technologies used COMPLETED
- Link to wireframes and user stories. COMPLETED
- Document your planning and tell a story about your development process and problem-solving strategy. COMPLETED
- List unsolved problems which would be fixed in future iterations. COMPLETED
- Describe how you solved for the winner COMPLETED
- Describe how some of your favorite functions work COMPLETED