Summary
Highlights
The lecture introduces building a Tic Tac Toe game using JavaScript, covering core concepts and their application in game development. It emphasizes that this project helps apply theoretical knowledge of JavaScript concepts like DOM manipulation and events in a practical scenario, making them easier to understand and remember.
The speaker explains the rules of Tic Tac Toe, involving nine boxes, two players (X and O), and alternating turns. The goal is to arrange three of one's symbols in a row—horizontally, vertically, or diagonally. The video then details the eight winning patterns (e.g., 0-1-2, 3-4-5, 0-3-6) that will be used to determine a winner programmatically.
The setup of the project begins with creating three files: `index.html`, `style.css`, and `app.js`. The `index.html` file gets a basic boilerplate, a title, an H1 heading, and a main container for the game board. Nine buttons with the class 'box' are created inside a 'game' div within a 'container' div, representing the game cells. A 'reset' button is added outside the container.
Basic CSS is applied to reset default margins and paddings, set a background color for the body, and center all elements. The 'container' and 'game' divs are styled with dynamic heights/widths using `vh` and `vmin` units. The individual 'box' buttons are styled to be square, have a consistent size, and laid out using Flexbox with `flex-wrap: wrap` to create a 3x3 grid. Borders, border-radius, box-shadows, and font sizes for the X/O symbols are also added. A background color and text style for the `reset` button are also applied, mimicking the look of the game boxes.
The `app.js` file is linked to `index.html`. JavaScript variables are initialized to access all game boxes, the reset button, and to track whose turn it is (`turnO` boolean). The eight winning patterns are stored in a 2D array called `winPatterns`. An event listener is added to each game box. When a box is clicked, it checks whose turn it is (O or X) and displays the corresponding symbol. The clicked button is then disabled to prevent further changes.
A `checkWinner` function is created to iterate through all `winPatterns`. For each pattern, it retrieves the inner text of the three corresponding boxes on the board. It verifies that all three boxes in a pattern are filled (not empty) and that their values are identical. If these conditions are met, a winner is declared by logging the winning symbol to the console.
An HTML element (a paragraph with ID 'message' within a 'message-container' div) is created to display the winner. Initially, this container is hidden using a 'hide' class in CSS. A `showWinner` function is added in JavaScript that updates the message and makes the container visible. A `disableBoxes` function is introduced to disable all game boxes once a winner is found, preventing further moves. An `enableBoxes` function is also created to clear the text from all boxes and enable them for a new game, and to hide the message container. Event listeners for 'New Game' and 'Reset Game' buttons are implemented to call the `enableBoxes` function, resetting the game state.
The lecture concludes with two homework problems: 1) Change the color of 'X' and 'O' symbols to be different from each other. 2) Attempt to solve the 'Find Winner on Tic Tac Toe Game' problem on LeetCode, encouraging students to apply their understanding of the game's logic in a problem-solving context. The speaker emphasizes the importance of core programming concepts learned through this project.