To create a basic tic-tac-toe game in HTML, you can use JavaScript and CSS for functionality and styling. Here is a sample code:
 |
| Tic tac toe code in html |
```html
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
.cell {
width: 100px;
height: 100px;
border: 1px solid #000;
font-size: 60px;
text-align: center;
}
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td class="cell" onclick="makeMove(0, 0)"></td>
<td class="cell" onclick="makeMove(0, 1)"></td>
<td class="cell" onclick="makeMove(0, 2)"></td>
</tr>
<tr>
<td class="cell" onclick="makeMove(1, 0)"></td>
<td class="cell" onclick="makeMove(1, 1)"></td>
<td class="cell" onclick="makeMove(1, 2)"></td>
</tr>
<tr>
<td class="cell" onclick="makeMove(2, 0)"></td>
<td class="cell" onclick="makeMove(2, 1)"></td>
<td class="cell" onclick="makeMove(2, 2)"></td>
</tr>
</table>
<script>
var currentPlayer = "X";
var gameOver = false;
var board = [
["", "", ""],
["", "", ""],
["", "", ""]
];
function makeMove(row, col) {
if (gameOver || board[row][col] !== "") {
return; // Ignore if game is over or cell is already occupied
}
// Update the board and display the move
board[row][col] = currentPlayer;
document.getElementsByTagName("td")[row * 3 + col].textContent = currentPlayer;
if (checkWin()) {
gameOver = true;
alert(currentPlayer + " wins!");
return;
}
if (checkDraw()) {
gameOver = true;
alert("It's a draw!");
return;
}
// Switch to the next player
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
function checkWin() {
// Check rows
for (var row = 0; row < 3; row++) {
if (
board[row][0] !== "" &&
board[row][0] === board[row][1] &&
board[row][0] === board[row][2]
) {
return true;
}
}
// Check columns
for (var col = 0; col < 3; col++) {
if (
board[0][col] !== "" &&
board[0][col] === board[1][col] &&
board[0][col] === board[2][col]
) {
return true;
}
}
// Check diagonals
if (
board[0][0] !== "" &&
board[0][0] === board[1][1] &&
board[0][0] === board[2][2]
) {
return true;
}
if (
board[0][2] !== "" &&
board[0][2] === board[1][1] &&
board[0][2] === board[2][0]
) {
return true;
}
return false;
}
function checkDraw() {
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
if (board[row][col] === "") {
return false;
}
}
}
return true;
}
</script>
</body>
</html>
```
This code creates a simple tic-tac-toe game where the board is displayed using an HTML table. The game logic is implemented in JavaScript, which is responsible for handling player moves, checking for wins or draws, and switching players. The CSS styling is used to define the look and feel of the game board.
0 Comments