Tic-tac-toe es un juego popular que utiliza una cuadrícula de 3×3. El objetivo del juego es ser el primer jugador en colocar tres símbolos en una fila recta horizontal, vertical o diagonal.
Puede crear un juego de tres en raya que se ejecute en un navegador web utilizando HTML, CSS y JavaScript. Puede usar HTML para agregar el contenido que contiene la cuadrícula de 3 × 3 y CSS para agregar algo de estilo al diseño del juego.
Luego puede usar JavaScript para la funcionalidad del juego. Esto incluye colocar símbolos, turnarse entre jugadores y decidir quién gana.
Cómo crear la interfaz de usuario para el juego Tic-Tac-Toe
Puedes leer y descargar el código fuente completo de este juego desde su repositorio GitHub.
Tic-tac-toe es uno de los muchos juegos que puedes hacer cuando aprendes a programar. Es bueno para practicar un nuevo idioma o entorno, como el motor de desarrollo de juegos PICO-8.
Para crear un juego de tres en raya que se ejecute en un navegador web, deberá agregar HTML para el contenido de la página. Luego puede diseñar esto usando CSS.
- Cree un nuevo archivo llamado "index.html".
- Dentro de "index.html", agregue la estructura básica de un archivo HTML:
html>
<htmlidioma="en-US">
<cabeza>
<título>Juego de tres en rayatítulo>
cabeza>
<cuerpo>
cuerpo>
html> - Dentro de la etiqueta del cuerpo HTML, agregue una tabla que contenga tres filas, con tres celdas en cada fila:
<divisiónclase="envase">
<mesa>
<tr>
<tdidentificación="1">td>
<tdidentificación="2">td>
<tdidentificación="3">td>
tr>
<tr>
<tdidentificación="4">td>
<tdidentificación="5">td>
<tdidentificación="6">td>
tr>
<tr>
<tdidentificación="7">td>
<tdidentificación="8">td>
<tdidentificación="9">td>
tr>
mesa>
división> - En la misma carpeta que su archivo HTML, cree un nuevo archivo llamado "styles.css".
- Dentro del archivo CSS, agrega algo de estilo a tu cuadrícula de 3 por 3:
mesa {
borde-colapso: colapsar;
margen: 0 auto;
}td {
ancho: 100píxeles;
altura: 100píxeles;
texto alineado: centro;
alineación vertical: medio;
borde: 1píxelessólidonegro;
} - Vincule el archivo CSS a su archivo HTML agregándolo a la etiqueta principal:
<enlacereal="hoja de estilo"tipo="texto/css"href="estilos.css">
Cómo turnarse para agregar símbolos al tablero de juego
En el juego, habrá dos jugadores, cada uno con un símbolo "X" o "O". Puede agregar un símbolo "X" u "O" haciendo clic en una de las celdas de la cuadrícula. Esto continuará hasta que uno de ustedes haya creado una fila recta horizontal, vertical o diagonal.
Puede agregar esta funcionalidad usando JavaScript.
- En la misma carpeta que sus archivos HTML y CSS, cree un archivo JavaScript llamado "script.js".
- Vincule el archivo JavaScript a su archivo HTML agregando el script en la parte inferior de la etiqueta del cuerpo:
<cuerpo>
Tu código aquí
<guionorigen="script.js">guion>
cuerpo> - Dentro del archivo JavaScript, agregue una cadena para representar el símbolo del jugador. Puede ser "X" u "O". Por defecto, el primer jugador colocará una "X":
dejar símbolo del jugador = "X"; - Agregue otra variable para realizar un seguimiento de si el juego ha terminado:
dejar juegoTerminado = FALSO - Cada celda de la tabla HTML tiene un ID entre 1 y 9. Para cada celda de la tabla, agregue un detector de eventos que se ejecutará cada vez que un usuario haga clic en la celda:
para (dejar yo = 1; yo <= 9; i++) {
documento.getElementById (i.toString()).addEventListener(
"hacer clic",
función() {
}
);
} - Dentro del detector de eventos, cambie el HTML interno para mostrar el símbolo actual. Asegúrate de usar una declaración condicional de JavaScript para asegurarse primero de que la celda esté vacía y que el juego aún no haya terminado:
si (este.innerHTML "" && !juegoTerminado) {
este.innerHTML = símbolo del jugador;
} - Agregue una clase al elemento HTML para diseñar el símbolo que se mostrará en la cuadrícula. El nombre de las clases CSS será "X" u "O", según el símbolo:
este.classList.add (playerSymbol.toLowerCase()); - Dentro del archivo "styles.css", agregue estas dos nuevas clases para los símbolos "X" y "O". Los símbolos "X" y "O" se mostrarán en diferentes colores:
.X {
color: azul;
tamaño de fuente: 80píxeles;
}.o {
color: rojo;
tamaño de fuente: 80píxeles;
} - En el archivo JavaScript, después de cambiar el HTML interno para mostrar el símbolo, intercambie el símbolo. Por ejemplo, si el jugador acaba de colocar una "X", cambia el siguiente símbolo a "O":
si (símbolo del jugador "X")
símbolo del jugador = "O"
demás
símbolo del jugador = "X" - Para ejecutar el juego, abra el archivo "index.html" en un navegador web para mostrar la cuadrícula de 3 por 3:
- Comience a colocar símbolos en la cuadrícula haciendo clic en las celdas. El juego alternará entre los símbolos "X" y "O":
Cómo determinar el ganador
Por el momento, el juego continuará incluso si un jugador ha colocado tres símbolos consecutivos. Deberá agregar una condición final para verificar esto después de cada turno.
- Dentro de su archivo JavaScript, agregue una nueva variable para almacenar todas las posibles posiciones "ganadoras" para la cuadrícula de 3 por 3. Por ejemplo, "[1,2,3]" es la fila superior o "[1,4,7]" es una fila diagonal.
dejar ganarPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Agrega una nueva función llamada checkWin():
funciónverificarganar() {
} - Dentro de la función, recorra cada una de las posibles posiciones ganadoras:
para (dejar yo = 0; i < winPos.longitud; i++) {} - Dentro del bucle for, comprueba si todas las celdas contienen el símbolo del jugador:
si (
documento.getElementById (winPos[i][0]).reproductor HTML interno Símbolo &&
documento.getElementById (winPos[i][1]).reproductor HTML interno Símbolo &&
documento.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Si la condición se evalúa como verdadera, entonces todos los símbolos están en línea recta. Dentro de la instrucción if, muestra un mensaje al usuario. También puede cambiar el estilo del elemento HTML agregando una clase CSS llamada "ganar":
documento.getElementById (winPos[i][0]).classList.add("ganar");
documento.getElementById (winPos[i][1]).classList.add("ganar");
documento.getElementById (winPos[i][2]).classList.add("ganar");
juegoTerminado = verdadero;establecerTiempo de espera(función() {
alerta (jugadorSímbolo + "¡gana!");
}, 500); - Agregue esta clase CSS "win" al archivo "styles.css". Cuando el jugador gana, cambiará el color de fondo de las celdas ganadoras a amarillo:
.ganar {
color de fondo: amarillo;
} - Llame a la función checkWin() cada vez que un jugador tenga un turno, dentro del controlador de eventos agregado en los pasos anteriores:
para (dejar yo = 1; yo <= 9; i++) {
// Cada vez que un jugador hace clic en una celda
documento.getElementById (i.toString()).addEventListener(
"hacer clic",
función() {
si (este.innerHTML "" && !juegoTerminado) {
// Muestra "X" u "O" en la celda y dale estilo
este.innerHTML = símbolo del jugador;
este.classList.add (playerSymbol.toLowerCase());
// Comprobar si un jugador ha ganado
comprobarGanar();
// Cambia el símbolo por el otro para el siguiente turno
si (símbolo del jugador "X")
símbolo del jugador = "O"
demás
símbolo del jugador = "X"
}
}
);
}
Cómo restablecer el tablero de juego
Una vez que un jugador ha ganado el juego, puede restablecer el tablero de juego. También puede restablecer el tablero de juego en caso de empate.
- En el archivo HTML, después de la tabla, agregue un botón de reinicio:
<botónidentificación="reiniciar">Reiniciarbotón> - Agregue un poco de estilo al botón de reinicio:
.envase {
mostrar: doblar;
dirección de flexión: columna;
}#reiniciar {
margen: 48píxeles 40%;
relleno: 20píxeles;
} - En el archivo JavaScript, agregue un controlador de eventos que se ejecutará cada vez que el usuario haga clic en el botón de reinicio:
documento.getElementById("reiniciar").addEventListener(
"hacer clic",
función() {}
); - Para cada celda de la cuadrícula, obtenga el elemento HTML utilizando la función getElementById(). Restablezca el HTML interno para eliminar los símbolos "O" y "X", y elimine todos los demás estilos CSS:
para (dejar yo = 1; yo <= 9; i++) {
documento.getElementById (i.toString()).innerHTML = "";
documento.getElementById (i.toString()).classList.remove("X");
documento.getElementById (i.toString()).classList.remove("o");
documento.getElementById (i.toString()).classList.remove("ganar");
juegoTerminado = FALSO;
} - Ejecute el juego abriendo el archivo "index.html" en un navegador web.
- Comience a colocar los símbolos "X" y "O" en la cuadrícula. Intenta que gane uno de los símbolos.
- Presione el botón de reinicio para reiniciar el tablero de juego.
Aprendiendo JavaScript haciendo juegos
Puede continuar mejorando sus habilidades de programación creando más proyectos en JavaScript. Es fácil crear juegos y herramientas simples en un entorno web, utilizando tecnologías abiertas multiplataforma como JavaScript y HTML.
¡No hay mejor manera de mejorar tu programación que practicar la escritura de programas!