Cree un juego de tres en raya para dos jugadores usando JavaScript, HTML y CSS
¡Lanza este juego simple en tu navegador web en poco tiempo!
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 línea recta horizontal, vertical o diagonalmente.
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 contenido que incluya una cuadrícula de 3 × 3 y CSS para agregar algo de estilo al diseño del juego.
A continuación, puede utilizar JavaScript para la funcionalidad del juego. Esto incluye colocar personajes, turnarse entre jugadores y decidir quién gana.
Cómo crear una interfaz de usuario para un juego de tres en raya
Puedes leer y descargar el código fuente completo de este juego. repositorio GitHub.
Tic-tac-toe es uno de los muchos juegos que puedes jugar mientras aprendes a programar. Es bueno practicar un nuevo idioma o entorno. Motor de desarrollo de juegos PICO-8.
Para crear un juego de tres en raya que funcione en un navegador web, debe agregar HTML para el contenido de la página. Luego puede diseñar esto usando CSS.
- Cree un nuevo archivo llamado “index.html”.
- Agregue la estructura principal del archivo HTML dentro de “index.html”:
html>
<html lang="en-US">
<head>
<title>Tic Tac Toe Gametitle>
head>
<body>
body>
html> - Dentro de la etiqueta del cuerpo HTML, agregue una tabla de tres filas con tres celdas por fila:
<div class="container">
<table>
<tr>
<td id="1">td>
<td id="2">td>
<td id="3">td>
tr>
<tr>
<td id="4">td>
<td id="5">td>
<td id="6">td>
tr>
<tr>
<td id="7">td>
<td id="8">td>
<td id="9">td>
tr>
table>
div> - Cree un nuevo archivo llamado “styles.css” en la misma carpeta que su archivo HTML.
- Agregue un poco de estilo a la cuadrícula de 3 por 3 dentro del archivo CSS:
table {
border-collapse: collapse;
margin: 0 auto;
}td {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
} - Vincule el archivo CSS a su archivo HTML agregándolo a la etiqueta principal:
<link rel="stylesheet" type="text/css" href="styles.css">
Cómo agregar símbolos al tablero de juego por turnos
En el juego, habrá dos jugadores, cada uno con un símbolo “X” u “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 hecho una fila recta horizontal, vertical o diagonal.
Puede agregar esta funcionalidad usando JavaScript.
- Cree un archivo JavaScript llamado “script.js” en la misma carpeta que sus archivos HTML y CSS.
- Vincule el archivo JavaScript a su archivo HTML agregando el script debajo de la etiqueta principal:
<body>
<script src="script.js">script>
body> - Agregue una línea dentro del archivo JavaScript para mostrar el icono del reproductor. Puede ser “X” u “O”. Por defecto, el primer jugador pondrá “X”:
let playerSymbol = "X"; - Agregue otra variable para rastrear si el juego ha terminado:
let gameEnded = false - Cada celda de una tabla HTML tiene un ID del 1 al 9. Para cada celda de la tabla, agregue un detector de eventos que se activará cuando el usuario haga clic en la celda:
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).addEventListener(
"click",
function() {
}
);
} - Cambie el HTML en línea para mostrar el símbolo actual dentro del detector de eventos. Asegúrate de usarlo Una expresión condicional de JavaScript primero para asegurarse de que la celda esté vacía y que el juego aún no haya terminado:
if (this.innerHTML === "" && !gameEnded) {
this.innerHTML = playerSymbol;
} - 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:
this.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: blue;
font-size: 80px;
}.o {
color: red;
font-size: 80px;
} - Cambie el símbolo después de cambiar el HTML interno para mostrar el símbolo en el archivo JavaScript. Por ejemplo, si el jugador acaba de colocar una “X”, reemplace el siguiente carácter con una “O”:
if (playerSymbol === "X")
playerSymbol = "O"
else
playerSymbol = "X" - Para iniciar el juego, abra el archivo “index.html” en un navegador web y muestre la cuadrícula de 3 por 3:
- Comience a colocar caracteres en la cuadrícula haciendo clic en las celdas. El juego cambiará entre los caracteres “X” y “O”:
Cómo determinar el ganador
Incluso si el jugador actualmente coloca tres símbolos seguidos, el juego continuará. Después de cada turno, debe agregar una condición final para verificar esto.
- Agregue una nueva variable dentro de su archivo JavaScript 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.
let winPos = [
[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():
function checkWin() {
} - Dentro de la función, recorra cada una de las posibles posiciones ganadoras:
for (let i = 0; i < winPos.length; i++) {}
- Dentro del ciclo for, verifica que todas las celdas contengan el carácter del jugador:
if (
document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
document.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. Muestra un mensaje al usuario dentro de la instrucción if. También puede cambiar el estilo de un elemento HTML agregando una clase CSS llamada “ganar”:
document.getElementById(winPos[i][0]).classList.add("win");
document.getElementById(winPos[i][1]).classList.add("win");
document.getElementById(winPos[i][2]).classList.add("win");
gameEnded = true;setTimeout(function() {
alert(playerSymbol + " wins!");
}, 500); - Agregue esta clase CSS “win” al archivo “styles.css”. Cuando un jugador gana, el ganador cambiará el color de fondo de las celdas a amarillo:
.win {
background-color: yellow;
} - Dentro del controlador de eventos agregado en los pasos anteriores, llame a checkWin() cada vez que el jugador tome un turno:
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).addEventListener(
"click",
function() {
if (this.innerHTML === "" && !gameEnded) {
this.innerHTML = playerSymbol;
this.classList.add(playerSymbol.toLowerCase());
checkWin();
if (playerSymbol === "X")
playerSymbol = "O"
else
playerSymbol = "X"
}
}
);
}
Cómo restablecer el tablero de juego
Después de que un jugador gana el juego, puede restablecer el tablero de juego. También puede restablecer el tablero de juego en caso de empate.
- Agregue un botón de reinicio después de la tabla en el archivo HTML:
<button id="reset">Resetbutton> - Agregue un poco de estilo al botón de reinicio:
.container {
display: flex;
flex-direction: column;
}#reset {
margin: 48px 40%;
padding: 20px;
} - Agregue un controlador de eventos al archivo JavaScript que se activará cuando el usuario haga clic en el botón de reinicio:
document.getElementById("reset").addEventListener(
"click",
function() {}
); - Para cada celda de la cuadrícula, obtenga el elemento HTML mediante la función getElementById(). Restablezca innerHTML para eliminar los caracteres “O” y “X” y elimine todos los demás estilos CSS:
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).innerHTML = "";
document.getElementById(i.toString()).classList.remove("x");
document.getElementById(i.toString()).classList.remove("o");
document.getElementById(i.toString()).classList.remove("win");
gameEnded = false;
} - Inicie el juego abriendo el archivo “index.html” en un navegador web.
- Comienza a colocar los símbolos “X” y “O” en la cuadrícula. Intenta ganar 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. Usando tecnologías abiertas multiplataforma como JavaScript y HTML, es fácil crear juegos y herramientas simples en el entorno web.
¡No hay mejor manera de mejorar tu programación que practicar la escritura de programas!
