Skip to content

J
js-e004
Commit 61f3ca94 by roshka
Options

Ta-Te-Ti 1.0

parents
Showing with 301 additions and 0 deletions
Readme.md 0 → 100644
# 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
tateti.css 0 → 100644
.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;
}
tateti.html 0 → 100644
<!DOCTYPE html>
<html lang="es">
<head>
<title>Juego TA - TE - TI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="tateti.css" rel="stylesheet">
</head>
<body>
<section id="seccion1">
<h1 class="titulo">Juego TA - TE - TI</h1>
<table>
<tr class="fila">
<td class="columna" id="11" onclick="clickCuadro('11')">...</td>
<td class="columna" id="12" onclick="clickCuadro('12')">...</td>
<td class="columna" id="13" onclick="clickCuadro('13')">...</td>
</tr>
<tr class="fila">
<td class="columna" id="21" onclick="clickCuadro('21')">...</td>
<td class="columna" id="22" onclick="clickCuadro('22')">...</td>
<td class="columna" id="23" onclick="clickCuadro('23')">...</td>
</tr>
<tr class="fila">
<td class="columna" id="31" onclick="clickCuadro('31')">...</td>
<td class="columna" id="32" onclick="clickCuadro('32')">...</td>
<td class="columna" id="33" onclick="clickCuadro('33')">...</td>
</tr>
</table>
<section id="seccion11">
<form id="formulario">
<p id="tituloJugadores">Ingrese los nombres de los jugadores, y su ficha correspondiente:</p>
<input type="text" name="PedidoJug1" id="PedidoJug1" class="cuadroJug" value="" autofocus> =
<select name="fichaJugador1" id="fichaJugador1" class="selectores">
<option value="optX">X</option>
<option value="optY">Y</option>
</select>
<input type="text" name="PedidoJug2" id="PedidoJug2" class="cuadroJug" value=""> =
<select name="fichaJugador2" id="fichaJugador2" class="selectores">
<option value="optX">X</option>
<option value="optY">Y</option>
</select>
<input type="button" value="Jugar!" id="btnJugar" onclick="iniciarJuego()">
<p id="JugadorActual"></p>
</form>
</section>
</section>
</body>
<script src="tateti.js"></script>
</html>
\ No newline at end of file
tateti.js 0 → 100644
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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment