Tic-tac-toe Game With Lighting Web Component In Salesforce | LWC Game | LWC tic-tac-toe Game

In Tic Tac Toe, players take turns placing either an "X" or "O" on a 3x3 grid. The goal is to get three of your symbols in a row, either horizontally, vertically, or diagonally.

The template includes a 3x3 grid of radio buttons, each with a corresponding label. The radio buttons are used to track which squares have been selected by each player.

Each square on the grid has a unique ID based on its position on the grid. For example, the top-left square has an ID of "block1-1-1". The IDs are used to associate each radio button with its corresponding label.

The template also includes CSS classes for each player's symbol ("player-1" and "player-2"), as well as classes to track which player's turn it is ("turn-1", "turn-2", and so on).

The CSS classes also include classes to identify which squares are part of each possible winning combination. For example, the squares in the top row are all given the class "top", and the squares in the first column are given the class "first-column". The squares in the two diagonals are given the classes "first-diagonal" and "second-diagonal".

The code begins with a general style for the whole document's body, setting its text color, font family, margin, and text alignment.

Then, the style for the heading h5 is set to have a font weight of 400 and padding of 0 20px.

The main style rules for the Tic-tac-toe game follow, which are defined by the .tic-tac-toe class selector. It specifies the font family, height, overflow, margin, position, and width of the game board, and also sets some media queries to adjust the size of the game board based on the screen size.

Next, the style for the radio input elements is set to have a display of none, which hides them from view. However, if an input is checked, its associated label element will become visible, which is achieved with the :checked and adjacent sibling selectors. When the label is visible, its content will be either "X" or "O" based on the player's turn, which is determined by the player-1 and player-2 classes on the input elements.

The style rules that follow set the background color and opacity of the checked radio input, depending on the player's turn, and also set the z-index values and display properties of the label elements based on the turn number and position of the radio input.

Finally, there are media queries to adjust the position of the label elements for different screen sizes. Overall, this CSS code provides the visual style and interactivity for a Tic-tac-toe game.

Code

Tic-tac-toe Game With Lighting Web Component In Salesforce | LWC Game | LWC tictactoe Game

I am excited to share with you a Tic-tac-toe game built using the Lightning Web Component (LWC) technology in Salesforce. This game is not only fun to play, but it also demonstrates the power and versatility of LWCs in creating engaging web experiences.

Live Demo
CODE Click Here