tic tac toe game coding in html and css
Certainly! Creating a simple tic-tac-toe game in HTML and CSS is a fun project. Here's a basic example to get you started:
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Tic Tac Toe</title> </head> <body> <div class="container"> <h1>Tic Tac Toe</h1> <div class="board"> <div class="cell" id="cell-1"></div> <div class="cell" id="cell-2"></div> <div class="cell" id="cell-3"></div> <div class="cell" id="cell-4"></div> <div class="cell" id="cell-5"></div> <div class="cell" id="cell-6"></div> <div class="cell" id="cell-7"></div> <div class="cell" id="cell-8"></div> <div class="cell" id="cell-9"></div> </div> </div> <script src="script.js"></script> </body> </html>
CSS (styles.css):
.container { text-align: center; } .board { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); gap: 5px; margin-top: 20px; } .cell { width: 100px; height: 100px; border: 2px solid black; display: flex; justify-content: center; align-items: center; font-size: 1.5em; cursor: pointer; }
In this example, the HTML file sets up the structure of the game and links to a separate CSS file for styling. The CSS file contains styles for the game board and cells.
To make the game interactive, you can use JavaScript to handle user interactions and implement the game's logic. You can listen for click events on the cells, track the state of the game, and update the cells based on the player's moves.
You can continue by adding JavaScript code in the "script.js" file to handle game logic, such as checking for a win, alternating turns, and updating the board with X's and O's.
Remember, this is a basic example to get you started. You can expand on it by adding features like win detection, game reset, and a more visually appealing UI.