diff --git b/README.MD a/README.MD new file mode 100644 index 0000000..e69de29 --- /dev/null +++ a/README.MD diff --git b/css/styles.css a/css/styles.css new file mode 100644 index 0000000..d793a8c --- /dev/null +++ a/css/styles.css @@ -0,0 +1,135 @@ +/*generales*/ + +* { + font-family: 'Indie Flower', cursive; +} + +h1 { + text-align: center; + font-family: 'Shadows Into Light', cursive; + text-shadow: 2px 9px 6px #CE5937; + font-size: 3rem; +} + +.rojo { + color: rgba(250, 0, 0, .6); +} + +.verde { + color: rgba(0, 150, 0, 0.5); +} + +body { + background-color: #EF921A; +} + + +/****Carga de datos***/ + +.jugadores { + font-size: larger; + text-align: center; +} + +#jg-1, +#jg-2, +#jugar { + border-radius: 10px; + font-size: .9em; +} + + +/**Mensaje error **/ + +#mensaje { + width: 25%; + border-radius: 5px; + height: 30px; + position: absolute; + right: 15px; + top: 15px; + text-align: center; + font-weight: 60; + color: white; +} + +.error { + background-color: rgba(250, 0, 80, .5); + transition: all ease-in-out .3s; + transform: translate(0px, -200px) rotate(180deg); +} + +.hidden { + transform: translate(0px, 0px) rotate(0deg); +} + + +/**juego*/ + +.juego { + width: 60%; + margin: 0 auto; + transition: all ease-in-out 1s; + transform: translate(-600px, -6000px) rotate(180deg); +} + +table { + /* border: 1px solid black; */ + width: 100%; + text-align: center; +} + +td { + padding: 5rem; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.x { + background-image: url(../img/x.png); +} + +.o { + background-image: url(../img/O.png); +} + +tr:first-child td, +tr:nth-child(2) td { + border-bottom: 1px solid black; +} + +tr td:nth-child(1), +tr td:nth-child(2) { + border-right: 1px solid black; +} + + +/**animacion del tablero*/ + +.jugar { + transform: translate(0px, 0px) rotate(0deg); +} + + +/**juego finalizado*/ + +.finalizado { + width: 70%; + height: 200px; + position: relative; + text-align: center; + background-color: rgba(0, 150, 0, 0.8); + color: white; + font-weight: bold; + z-index: 2; + border-radius: 20px; + margin: 0 auto; + top: -400px; + transition: all ease-in-out 1s; + transform: translate(-1400px, 500px) rotate(360deg); +} + +.final-mostrar { + transform: translate(0px, 0px) rotate(0deg); +} \ No newline at end of file diff --git b/img/O.png a/img/O.png new file mode 100644 index 0000000..b1c4dee Binary files /dev/null and a/img/O.png differ diff --git b/img/x.png a/img/x.png new file mode 100644 index 0000000..cb46491 Binary files /dev/null and a/img/x.png differ diff --git b/js/main.js a/js/main.js new file mode 100644 index 0000000..60afe85 --- /dev/null +++ a/js/main.js @@ -0,0 +1,222 @@ +/** + * Mucho del codigo que se repite se debe a que no encontre una forma + de parar el javascrip a la hora de tomar ciertas decisiones + */ + +//guardamos los nombres como variables globales +var nombreJ1; +var nombreJ2; +//radio button (forma de los jugadores X O) +var tipoForma; +var computadora = 0; //determina si juega o no la computadora +var listo = 0; //sirve para pausar los tiempos cuando juega la computadora + +//cuando le de click al boton Iniciar juego se validara lo siguiente +var jugar = document.getElementById("jugar"); +jugar.addEventListener("click", empezarJuego); +//validamos que ambos no esten vacios y si jugara la computadora +function validarNombres() { + nombreJ1 = document.getElementById("jg-1").value; + nombreJ2 = document.getElementById("jg-2").value; + if (nombreJ1.length != 0 && nombreJ2.length != 0) { + var maquina = document.getElementById("computadora").checked; + //si esta selecionada la opcion computadora + if (maquina == true) + computadora = 1; + return true; + } + return false; +} + +//comprobamos que haya seleccionado una forma +function validarRadio() { + var radio; + var x = document.querySelector("input#tipoJugador").checked; + if (x) { + radio = ["x", "o"]; + } else { + radio = ["o", "x"]; + } + return radio; +} + +//si todo esta correcto empezamos el juego +function empezarJuego() { + + if (validarNombres()) { + var cargaDatos = document.querySelector("div.jugadores"); + cargaDatos.hidden = "true"; + tipoForma = validarRadio(); + //comenzamos a escuchar el juego + var tabla = document.querySelector("div.juego"); + tabla.classList.add("jugar"); + + } else { + //lanzamos un mensaje de error + var error = document.querySelector("div#mensaje"); + error.classList.add("hidden"); + //esperamos unos segundos para sacarlo + setTimeout(function() { + error.classList.remove("hidden"); + }, 3500); + } +} + +//controlamos los sucesos en la tabla +var celdas = document.getElementsByTagName("td"); +//cargamos los eventos + +for (let i = 0; i < celdas.length; i++) { + celdas[i].addEventListener("click", verificarMovimiento); +} + +var turno = 0; //determina el turno +var termino = 0; //si termina antes de las 9 jugadas +var matriz = [ + ["a", "b", "c"], + ["d", "e", "f"], + ["g", "h", "i"] +]; //matriz que guarda los movimientos +var movimiento = 0; + +//funcion para verificar si el movimiento es valido +function verificarMovimiento() { + //si ya se ejecuto los milisegundos entonces lo realiza + if (listo == 0) { + if (termino == 0) { + var clase = this.classList.length; //si aun no posee ninguna clase entonces es una casilla habilitada + if (clase == 0) { + if (turno == 0) { + this.classList.add(tipoForma[0]); + movimiento++; + cargarMatriz(this.id); + turno = 1; + + } else if (computadora == 0) { //si no esta jugando la computadora + this.classList.add(tipoForma[1]); + movimiento++; + cargarMatriz(this.id); + turno = 0; + } + } + termino = comprobarGanador(); + if (computadora == 1 && termino == 0 && turno == 1) { + listo = 1; + movimientoComputadora(); + } + if (movimiento == 9 && termino == 0) { + termino = 2; //si termino por movimientos entonces es empate + finalizarJuego(); + } + if (termino == 1) + finalizarJuego(); + + } else { + finalizarJuego(); + } + } +} +//funcion para cargar la matriz +function cargarMatriz(cadena) { + var columna = parseInt(cadena.charAt(1)); + var fila; + + switch (cadena.charAt(0)) { + case 'A': + fila = 0; + break; + case 'B': + fila = 1; + break; + case 'C': + fila = 2; + break; + default: + break; + } + + matriz[fila][columna] = tipoForma[turno]; +} + +function comprobarGanador() { + //comprobamos si todas las posibilidades + //columnas + if (matriz[0][0] == matriz[1][0] && matriz[1][0] == matriz[2][0]) + return 1; + if (matriz[0][1] == matriz[1][1] && matriz[1][1] == matriz[2][1]) + return 1; + if (matriz[0][2] == matriz[1][2] && matriz[1][2] == matriz[2][2]) + return 1; + + //las filas + if (matriz[0][0] == matriz[0][1] && matriz[0][1] == matriz[0][2]) + return 1; + + if (matriz[1][0] == matriz[1][1] && matriz[1][1] == matriz[1][2]) + return 1; + if (matriz[2][0] == matriz[2][1] && matriz[2][1] == matriz[2][2]) + return 1; + //diagonales + if (matriz[0][0] == matriz[1][1] && matriz[1][1] == matriz[2][2]) + return 1; + if (matriz[2][0] == matriz[1][1] && matriz[1][1] == matriz[0][2]) + return 1; + return 0; +} + +//mostramos el mensaje de finalizacion +function finalizarJuego() { + var final = document.querySelector("div.finalizado"); + final.classList.add("final-mostrar"); + if (termino == 2) { + //hubo empate + var ganador = document.querySelector("p.ganador"); + ganador.innerHTML = "Hubo un empate entre " + nombreJ1 + " y " + nombreJ2; + } else { + //gano un jugador + var ganador = document.querySelector("p.ganador"); + if (turno == 0) { + ganador.innerHTML = "El ganador es " + nombreJ2; + } else { + ganador.innerHTML = "El ganador es " + nombreJ1; + } + } +} + +//movimiento de la computadora +function movimientoComputadora() { + setTimeout(function() { + var casilla = [ + ['A0', 'A1', 'A2'], + ['B0', 'B1', 'B2'], + ['C0', 'C1', 'C2'] + ]; + var ban = 0; //bandera que determina si se termino o no el proceso de busqueda + //buscamos un elemento vacio en la tabla + var j = 0; + var i = 0; + while (true) { + //tiramos numeros aleatorios para simular una opcion + j = Math.floor(Math.random() * (3)); + i = Math.floor(Math.random() * (3)); + var elemento = document.getElementById(casilla[j][i]); + //si aun no posee ninguna clase significa que aun no esta seleccionado + if (elemento.classList.length == 0) { + + cargarMatriz(elemento.id); + elemento.classList.add(tipoForma[1]); + turno = 0; + movimiento++; + termino = comprobarGanador(); + if (termino == 1) + finalizarJuego(); + + ban = 1; + break; + } + } + + listo = 0; + }, 200); + +} \ No newline at end of file diff --git b/tateti.html a/tateti.html new file mode 100644 index 0000000..ca75b0c --- /dev/null +++ a/tateti.html @@ -0,0 +1,67 @@ + + + + + + + Ejercicio 4 + + + + + + +
ERROR! Los nombres son obligatorios
+

TA TE TI

+
+
+ +
+ + +
+ +
+

Indique que forma usara el Jugador nro 1

+ +
+ +
+ +

+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + +
+
+ +
+

Juego finalizado

+

+ +
+ + + + + \ No newline at end of file