Tic Tac Toe
HTML
Publicado el 27 de Diciembre del 2023 por Manuel (12 códigos)
1.370 visualizaciones desde el 27 de Diciembre del 2023
Juego del 3 en raya
Iniciar sesiónCrear cuenta
Crear cuentaCrear cuenta<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<linkhref="https://fonts.googleapis.com/css2?family=Itim&display=swap"
rel="stylesheet"
/><style>
* {
padding: 0; margin: 0;font-family: 'Itim', cursive;
}.background{
margin-top:50px;
font-size: 30px;
color: white; }.container {
margin: 0 auto;margin-top: 30px;
display: grid;grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
max-width: 300px;
}.tile {
border: 1px solid white;min-width: 100px;
min-height: 100px;
display: flex;justify-content: center;
align-items: center;
font-size: 50px;
cursor: pointer; }.playerX {
color: #09C372;
}.playerO {
color: #498AFB;
}.announcer {
color: white;text-align: center;
font-size: 30px;
margin: 10px 0; }.controls{
margin: 30px auto;width: max-content;
} #reset { outline: none; cursor: pointer; border: none;padding: 0.9rem 2rem;
margin: 0;font-family: inherit;
font-size: inherit;
position: relative;display: inline-block;
letter-spacing: 0.05rem;
font-weight: 700;
font-size: 17px;
border-radius: 500px;
overflow: hidden;background: #66ff66;
color: rgb(0, 0, 0);
} #reset span { position: relative;z-index: 10;
transition: color 0.4s;
} #reset:hover span {color: rgb(250, 250, 250);
} #reset::before, #reset::after { position: absolute; top: 0; left: 0;width: 100%;
height: 100%;
z-index: 0;
} #reset::before {content: "";
background: #fff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
} #reset:hover::before {transform: translate3d(100%, 0, 0);
}</style>
</head>
<body style="background-color: black;">
<center>
<main class="background">
<section class="title">
<h1>Tic Tac Toe</h1>
</section>
<section class="display">
Player <span class="display-player playerX">X</span>'s turn
</section> </center> <section class="container"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </section> <section class="display announcer hide"></section> <section class="controls"> <button id="reset"> <span>Reset</span></button> </section> </main> <script> window.addEventListener("DOMContentLoaded", () => { // everything goes here const tiles = Array.from(document.querySelectorAll(".tile")); const playerDisplay = document.querySelector(".display-player"); const resetButton = document.querySelector("#reset"); const announcer = document.querySelector(".announcer"); announcer.style.className = "result" let board = ["", "", "", "", "", "", "", "", ""]; let currentPlayer = "X"; let isGameActive = true; const PLAYERX_WON = "PLAYERX_WON"; const PLAYERO_WON = "PLAYERO_WON"; const TIE = "TIE"; /* Indexes within the board [0] [1] [2] [3] [4] [5] [6] [7] [8]*/ 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], ]; const isValidAction = (tile) => { if (tile.innerText === "X" || tile.innerText === "O") { return false; } return true; }; const updateBoard = (index) => { board[index] = currentPlayer; }; const changePlayer = () => { playerDisplay.classList.remove(`player${currentPlayer}`); currentPlayer = currentPlayer === "X" ? "O" : "X"; playerDisplay.innerText = currentPlayer; playerDisplay.classList.add(`player${currentPlayer}`); }; const announce = (type) => { switch (type) { case PLAYERO_WON: announcer.innerHTML = 'Player <span class="playerO">O</span> Won';break;
case PLAYERX_WON:announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
break;
case TIE:announcer.innerText = "Tie";
}announcer.classList.remove("hide");
};function handleResultValidation() {
let roundWon = false;for (let i = 0; i <= 7; i++) {
const winCondition = winningConditions[i];
const a = board[winCondition[0]];
const b = board[winCondition[1]];
const c = board[winCondition[2]];
if (a === "" || b === "" || c === "") {
continue;
}if (a === b && b === c) {
roundWon = true;break;
} }if (roundWon) {
announce(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON);
isGameActive = false;return;
}if (!board.includes("")) announce(TIE);
}const userAction = (tile, index) => {
if (isValidAction(tile) && isGameActive) {
tile.innerText = currentPlayer;
tile.classList.add(`player${currentPlayer}`);
updateBoard(index);
handleResultValidation();
changePlayer();
} };tiles.forEach((tile, index) => {
tile.addEventListener("click", () => userAction(tile, index));
});
const resetBoard = () => {
board = ["", "", "", "", "", "", "", "", ""];
isGameActive = true;announcer.classList.add("hide");
if (currentPlayer === "O") {
changePlayer();
}tiles.forEach((tile) => {
tile.innerText = "";
tile.classList.remove("playerX");
tile.classList.remove("playerO");
});
announcer.innerHTML=""
};resetButton.addEventListener("click",resetBoard);
});
</script>
</body>
</html>
Comentarios sobre la versión: 5 (0)
No hay comentarios