How to Draw Line in Html Using Css
Tic Tac Toe is a two players game. There will be a board of three by three table cell and two symbols in this game, one for each player. Both players can choose the symbol of their choice. Then they will mark the sign inside of a box of the board. One who got their symbol marked in a sequence of three may be vertical, horizontal, or diagonal.
That player will have won the match, and the player will lose the game who does not get his symbol in a sequence of three. If both of the players do not get their symbols in a line of three, the match will be tie or draw. This is the Tic Tac Toe game logic.
In this tutorial, we will make a Tic Tac Toe game using HTML, CSS, and JavaScript.
HTML Section
In the HTML section, we will first write the HTML structure and a title for the game "Tic Tac Toe." We will link the style sheet or external CSS file in HTML for adding style property to the tags. Then inside the HTML body tag, we will make a section in which we will give a title heading.
A div that contains nine cells to create the game board of three by three boxes. After that, we will add a tag to show the game status and a button to restart the game if the player wants to play again. Finally, we will add a script tag to link the JavaScript file to perform actions.
Index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tic Tac Toe</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <h1 class="game--title">Tic Tac Toe</h1> <div class="game--container"> <div data-cell-index="0" class="cell"></div> <div data-cell-index="1" class="cell"></div> <div data-cell-index="2" class="cell"></div> <div data-cell-index="3" class="cell"></div> <div data-cell-index="4" class="cell"></div> <div data-cell-index="5" class="cell"></div> <div data-cell-index="6" class="cell"></div> <div data-cell-index="7" class="cell"></div> <div data-cell-index="8" class="cell"></div> </div> <h2 class="game--status"></h2> <button class="game--restart">Restart Game</button> </section> <script src="script.js"></script> </body> </html>
CSS Section
In CSS section, we will give styling to the html elements by using tag name or class name. We can give the class name and in curly braces we will add the properties that we want to apply on the html tags. Add CSS property to the tags like font-size in pixels, background-color with color value, margin, alignment, font-family, width, height, border, and so on.
Style.css
body { font-family: "Arial", sans-serif; } section { text-align: center; } .game--title { font-size: 100px; color: #d7a62f; margin: 10px auto; } .game--container { display: grid; grid-template-columns: repeat(3, auto); width: 306px; margin: 10px auto; background-color: #11213a; color: #04c0b2; } .cell { font-family: "Permanent Marker", cursive; width: 100px; height: 100px; box-shadow: 2px 2px 2px 2px #ecd7ba; border: 2px solid #ecd7ba; cursor: pointer; line-height: 100px; font-size: 60px; } .game--status { font-size: 50px; color: #d7a62f; margin: 20px auto; } .game--restart { background-color: #f7e4ac; width: 200px; height: 50px; font-size: 25px; color: #5586e2; box-shadow: 2px 2px 2px 2px #d86c23; border: 2px solid #d86c23; }
JavaScript Section
In the JavaScript section, we will define players with symbols "X" and "O." Action will be true means active for the current player. One player will act, then the current player will change to the second player and vice versa. It will show the status of the game accordingly. Like it's the turn of "X" or "O," or one of them won or game is a tie, etc.
We will set the winning conditions according to the sequence of three identical symbols or game logic. There are eight possibilities of winning each player. On the button click, the game will start again.
Index.js
const statusDisplay = document.querySelector('.game--status'); let gameActive = true; let currentPlayer = "X"; let gameState = ["", "", "", "", "", "", "", "", ""]; const winningMessage = () => `Player ${currentPlayer} has won!`; const drawMessage = () => `Game ended in a draw!`; const currentPlayerTurn = () => `It's ${currentPlayer}'s turn`; statusDisplay.innerHTML = currentPlayerTurn(); const winningConditions = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; function handleCellPlayed(clickedCell, clickedCellIndex) { gameState[clickedCellIndex] = currentPlayer; clickedCell.innerHTML = currentPlayer; } function handlePlayerChange() { currentPlayer = currentPlayer === "X" ? "O" : "X"; statusDisplay.innerHTML = currentPlayerTurn(); } function handleResultValidation() { let roundWon = false; for (let i = 0; i <= 7; i++) { const winCondition = winningConditions[i]; let a = gameState[winCondition[0]]; let b = gameState[winCondition[1]]; let c = gameState[winCondition[2]]; if (a === '' || b === '' || c === '') { continue; } if (a === b && b === c) { roundWon = true; break } } if (roundWon) { statusDisplay.innerHTML = winningMessage(); gameActive = false; return; } let roundDraw = !gameState.includes(""); if (roundDraw) { statusDisplay.innerHTML = drawMessage(); gameActive = false; return; } handlePlayerChange(); } function handleCellClick(clickedCellEvent) { const clickedCell = clickedCellEvent.target; const clickedCellIndex = parseInt(clickedCell.getAttribute('data-cell-index')); if (gameState[clickedCellIndex] !== "" || !gameActive) { return; } handleCellPlayed(clickedCell, clickedCellIndex); handleResultValidation(); } function handleRestartGame() { gameActive = true; currentPlayer = "X"; gameState = ["", "", "", "", "", "", "", "", ""]; statusDisplay.innerHTML = currentPlayerTurn(); document.querySelectorAll('.cell').forEach(cell => cell.innerHTML = ""); } document.querySelectorAll('.cell').forEach(cell => cell.addEventListener('click', handleCellClick)); document.querySelector('.game--restart').addEventListener('click', handleRestartGame); 
Conclusion
In conclusion, we made a tic tac toe game using HTML, CSS, and JavaScript. We discussed the process of creating or building the game. Also, we discussed the process of playing the game as well.
We write the code separately and define each section. The source code of the game is given above. You can execute it on your own, and a video is also shown to let you know how to play it.
How to Draw Line in Html Using Css
Source: https://www.codeleaks.io/tic-tac-toe-game-using-html-css-and-javascript/
0 Response to "How to Draw Line in Html Using Css"
Post a Comment