From 61f3ca94d341b48667a40aa816703668d16f4196 Mon Sep 17 00:00:00 2001 From: roshka Date: Mon, 22 Oct 2018 17:24:21 -0300 Subject: [PATCH] Ta-Te-Ti 1.0 --- Readme.md | 12 ++++++++++++ tateti.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ tateti.html | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ tateti.js | 157 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 300 insertions(+) create mode 100644 Readme.md create mode 100644 tateti.css create mode 100644 tateti.html create mode 100644 tateti.js diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..82abae2 --- /dev/null +++ b/Readme.md @@ -0,0 +1,12 @@ +# Instrucciones + +Existen tres archivos: .html, .css y .js. Los tres deben estar en la misma carpeta. + +Con alert() avisa el error de no cargar nombres de jugadores y el ambos tengan la misma ficha. + +El alert() tambien avisa si se termino el juego cuando se hace click en el tablero, cuando una casilla ya esta ocupada, y tambien cuando todavia no se preciono el boton para jugar. + +Una vez empezado el juego, no se puede modificar los nombres de los jugadores, y sus fichas correspondientes. + +En la zona del boton, se dice quien juega en el momento, y tambien si hay un ganador o es un empate + diff --git a/tateti.css b/tateti.css new file mode 100644 index 0000000..b858f01 --- /dev/null +++ b/tateti.css @@ -0,0 +1,82 @@ +.fila{ + font-size: 100px; + background:#40B4AB; + color: white; +} + +.columna{ + border: 1px black solid; + height: auto; + width: 180px; + text-align: center; +} + +.columna:hover{ + border: 1px black solid; + height: auto; + width: 180px; + text-align: center; + background: forestgreen; +} + +.titulo{ + text-align: center; + font-size: 50px; + margin: 0px; + padding: 0px; +} + +body{ + background: royalblue; +} + +#seccion1{ + position: absolute; + left: 420px; + height: 400px; + width: 500px; +} + +#seccion11{ + margin: 20px; + padding: 0px; + background: white; +} + +#resultado{ + font-size: 40px; + margin: 0px; + padding: 0px; +} + +.cuadroJug{ + margin: 2px; +} + +#formulario{ + display: inline-block; + text-align: center; + padding-left:10px; + padding-right:10px; +} + +#btnJugar{ + margin:10px; + font-size: 35px; + text-align: center; +} + +.selectores{ + font-size: 16px; +} + +#JugadorActual{ + font-size: 25px; +} + +#enlaceNuevo{ + margin:0px; + padding:0px; + font-size: 20px; +} + diff --git a/tateti.html b/tateti.html new file mode 100644 index 0000000..9e97452 --- /dev/null +++ b/tateti.html @@ -0,0 +1,49 @@ + + + + Juego TA - TE - TI + + + + + +
+

Juego TA - TE - TI

+ + + + + + + + + + + + + + + + +
.........
.........
.........
+
+
+

Ingrese los nombres de los jugadores, y su ficha correspondiente:

+ = + + = + + +

+
+
+
+ + + \ No newline at end of file diff --git a/tateti.js b/tateti.js new file mode 100644 index 0000000..c5ba1d2 --- /dev/null +++ b/tateti.js @@ -0,0 +1,157 @@ +let signoAnterior = "Y"; +let posicionesTabla = []; +let jugadas = []; +let habilitadoJugar = 0; +let nombres = []; +let jugador1; +let jugador2; +let jugadorActual; +let contadorJugadas = parseInt(0); + +//Creamos la matriz para guardar las posiciones de la tabla y las jugadas +for(let i=0;i<3;i++){ + posicionesTabla[i] = new Array(3); + jugadas[i] = new Array(3); +} + +//Cargamos las id del jugadas +for(let i=1;i<4;i++){ + for(let j=1;j<4;j++){ + posicionesTabla[i-1][j-1] = document.getElementById(""+i+j); + jugadas[i-1][j-1] = "..."; + } +} + +//Esta funcion actua cuando se presiona el boton JUGAR +function iniciarJuego() { + //Con esto logramos avisar al jugador que debe cargar los nombres de los jugadores antes de jugar + if(document.getElementById("PedidoJug1").value == "" || document.getElementById("PedidoJug2").value == ""){ + alert("Se debe cargar los nombres de los jugadores"); + //En esta parte se le da enfoque al campo que le falta dato + if(document.getElementById("PedidoJug1").value == ""){ + document.getElementById("PedidoJug1").focus(); + }else if(document.getElementById("PedidoJug2").value == ""){ + document.getElementById("PedidoJug2").focus(); + }else{ + document.getElementById("PedidoJug1").focus(); + } + //En esta parte comprobamos que no se escoja fichas iguales + }else if(document.getElementById("fichaJugador1").selectedIndex == document.getElementById("fichaJugador2").selectedIndex ) { + alert("Cada jugador debe tener una ficha distinta"); + }else{ + //Aqui es donde todos los datos de entradas estan en orden y se empieza el juego + alert("A JUGAR !!!"); + if(document.getElementById("fichaJugador1").selectedIndex == "0"){ + jugador1 = document.getElementById("PedidoJug1").value; + }else{ + jugador2 = document.getElementById("PedidoJug1").value; + } + if(document.getElementById("fichaJugador2").selectedIndex == "0"){ + jugador1 = document.getElementById("PedidoJug2").value; + }else{ + jugador2 = document.getElementById("PedidoJug2").value; + } + habilitadoJugar=1;//Aqui es donde habilitamos el casillero para jugar + //Aqui es donde preparamos la informacion del jugador actual y si quien jugador gano o se empató + document.getElementById("btnJugar").remove(); + document.getElementById("JugadorActual").innerHTML = "Ahora juega: " + jugador1; + jugadorActual = jugador1; + //Esto desabilita los campos para que no haya alteración de la informacion + document.getElementById("PedidoJug1").disabled = true; + document.getElementById("PedidoJug2").disabled = true; + document.getElementById("fichaJugador1").disabled = true; + document.getElementById("fichaJugador2").disabled = true; + } + +} + +function clickCuadro(posicion) { + if(habilitadoJugar==1){ + //Busca donde se hizo click + let tempFicha; + let encontrado=false; + let pos_fil,pos_col; + for(let i=0;i<3 && !encontrado;i++){ + for(let j=0;j<3 && !encontrado;j++){ + if(document.getElementById(posicion) == posicionesTabla[i][j]){ + pos_fil = i; + pos_col = j; + encontrado = true; + } + } + } + //Una vez que se encontro la posicion, preguntamos si esa casilla está vacia + if(jugadas[pos_fil][pos_col]=="..."){ + //Averiguamos quien jugador jugo actualmente + if(signoAnterior=="Y"){ + document.getElementById(posicion).innerHTML = "X"; + document.getElementById(posicion).style.color = "red"; + jugadas[pos_fil][pos_col] = "X" + signoAnterior = "X"; + tempFicha = "X"; + }else{ + document.getElementById(posicion).innerHTML = "Y"; + document.getElementById(posicion).style.color = "blue"; + jugadas[pos_fil][pos_col] = "Y" + signoAnterior = "Y"; + tempFicha = "Y"; + } + }else{ + alert("Lugar de la ficha ocupado"); + return; + } + //Luego analizamos la jugada actual + if(resultadoJug(tempFicha)){ + document.getElementById("JugadorActual").innerHTML = "Ganador: " + jugadorActual; + habilitadoJugar = 2; + }else{ + if(jugadorActual == jugador1){ + jugadorActual = jugador2; + document.getElementById("JugadorActual").innerHTML = "Ahora juega: " + jugadorActual; + }else{ + jugadorActual = jugador1; + document.getElementById("JugadorActual").innerHTML = "Ahora juega: " + jugadorActual; + } + contadorJugadas = contadorJugadas + parseInt(1); + } + if(contadorJugadas>=9){ + document.getElementById("JugadorActual").innerHTML = "Es un empate"; + habilitadoJugar = 2; + return; + } + }else if(habilitadoJugar==0){ + alert("Se debe dar el boton Jugar! para iniciar el juego"); + }else{ + alert("Fin del juego"); + } +} + +function resultadoJug(ficha){ + let retorno = false; + //Primero verificamos filas + for(let i=0; i<3 && !retorno; i++){ + if(jugadas[i][0] == ficha && jugadas[i][1] == ficha && jugadas[i][2] == ficha){ + retorno = true; + break; + } + } + //Comprobamos columna + for(let i=0; i<3 && !retorno; i++){ + if(jugadas[0][i] == ficha && jugadas[1][i] == ficha && jugadas[2][i] == ficha){ + retorno = true; + break; + } + } + //comprobar diagonal 1 + if(!retorno && jugadas[0][0] == ficha && jugadas[1][1] == ficha && jugadas[2][2] == ficha){ + retorno = true; + } + //comprobar diagonal 2 + if(!retorno && jugadas[0][2] == ficha && jugadas[1][1] == ficha && jugadas[2][0] == ficha){ + retorno = true; + } + return retorno; +} + + + -- libgit2 0.26.0