Skip to content

T
TATETI
Commit 2175e337 by Yovan Martinez
Options

Terminado la pagina de tateti

parents
Showing with 198 additions and 0 deletions
css/estilos.css 0 → 100644
body {
background: teal;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
align-content: center;
}
table {
width: 100%;
}
p {
text-align: left;
}
input {
vertical-align: middle;
}
td {
height: 200px;
width: 30%;
text-align: center;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
button {
visibility: unset;
}
.hidden {
display: none;
/* visibility: hidden; */
}
\ No newline at end of file
tateti.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/estilos.css">
<script src="tateti.js"></script>
</head>
<body>
<div id="seleccionPadre">
<form action="" id="form-container" onsubmit="event.preventDefault()">
<div id="seleccion" class="">
<p>
Nombre jugador 1:<input id="jugador1">
</p>
<p>
Ficha jugador 1:<input id="ficha1">
</p>
<p>
Nombre jugador 2:<input id="jugador2">
</p>
<p>
Ficha jugador 2:<input id="ficha2">
</p>
<button type="submit" id="boton" onclick="validardatos()">Aceptar</button>
</div>
</form>
</div>
<div>
<p id="player">Ingrese el nombre de los jugadores</p>
<p id="ganador"></p>
<table>
<tr>
<td id="pf" onclick="ficha(id)">-</td>
<td id="pf1" onclick="ficha(id)">-</td>
<td id="pf2" onclick="ficha(id)">-</td>
</tr>
<tr>
<td id="pf3" onclick="ficha(id)">-</td>
<td id="pf4" onclick="ficha(id)">-</td>
<td id="pf5" onclick="ficha(id)">-</td>
</tr>
<tr>
<td id="pf6" onclick="ficha(id)">-</td>
<td id="pf7" onclick="ficha(id)">-</td>
<td id="pf8" onclick="ficha(id)">-</td>
</tr>
</table>
</div>
</body>
</html>
\ No newline at end of file
tateti.js 0 → 100644
var sheet = "";
var nombre1 = "";
var nombre2 = "";
var ficha1 = "X";
var ficha2 = "X";
var tablero = ["pf", "pf1", "pf2", "pf3", "pf4", "pf5", "pf6", "pf7", "pf8", ];
var player = nombre1;
//Funcion para validar los datos ingresados por el usuario antes de empezar la partida
function validardatos() {
var empezarjuego = false; //Booleano que controla si el juego puede comenzar
nombre1 = document.getElementById("jugador1").value;
nombre2 = document.getElementById("jugador2").value;
ficha1 = document.getElementById("ficha1").value;
ficha2 = document.getElementById("ficha2").value;
//Condicional para que los nombres no se repitan ni esten vacios, en caso contrario envia un mensaje
if (nombre1 == "" || nombre1 == nombre2 || nombre2 == "") {
empezarjuego = false;
} else {
empezarjuego = true;
}
//Condicional para que las fichas no se repitan ni esten vacias
if ((ficha1 == "X" || ficha1 == "O") && (ficha2 == "X" || ficha2 == "O") && ficha1 != ficha2) {
empezarjuego = true;
} else {
empezarjuego = false;
}
//Si se cumplen las condiciones empieza el juego y se limpia la pantalla y el tablero
if (empezarjuego) {
document.getElementById("form-container").reset();
let x = document.getElementById("seleccionPadre");
x.classList.add("hidden");
document.getElementById("player").innerHTML = "Turno jugador: " + nombre1;
//En este ciclo se limpia el tablero
for (let index = 0; index < 9; index++) {
document.getElementById(tablero[index]).innerHTML = " ";
}
} else {
alert("Datos invalidos intente de nuevo");
}
}
//Funcion que posiciona las fichas y controla la partida
function ficha(id) {
let pf = [" ", " ", " ", " ", " ", " ", " ", " ", " ", ]; // pf viene de "posicion fichas"
let Empate = 0;
let ganador = false;
if (sheet == "") {
sheet = ficha1;
}
//Condicional para solo posicionar las fichas en filas vacias
if (document.getElementById(id).innerHTML == " ") {
document.getElementById(id).innerHTML = sheet; //Posiciono la ficha donde el usuario decide
//Ciclo que se actualiza segun las fichas presente en el tablero para controlar el juego
for (let index = 0; index < tablero.length; index++) {
pf[index] = document.getElementById(tablero[index]).innerHTML;
if (pf[index] != " ") {
Empate++;
}
}
//Condicional por el cual no tenes que preocuparte profe <3
//En este codicional solo entra en caso que exista un ganador
if ((pf[0] === pf[1] && pf[1] === pf[2] && pf[0] != " ") || (pf[3] === pf[4] && pf[4] === pf[5] && pf[3] != " ") || (pf[6] === pf[7] && pf[7] === pf[8] && pf[6] != " ") || (pf[0] === pf[3] && pf[3] === pf[6] && pf[0] != " ") || (pf[1] === pf[4] && pf[4] === pf[7] && pf[1] != " ") || (pf[2] === pf[5] && pf[5] === pf[8] && pf[2] != " ") || (pf[0] === pf[4] && pf[4] === pf[8] && pf[0] != " ") || (pf[2] === pf[4] && pf[4] === pf[6] && pf[2] != " ")) {
ganador = true;
//Dejo de mostrar el turno del jugador
document.getElementById("player").innerHTML = "";
for (let index = 0; index < 9; index++) {
//Reemplazo los espacios vacios por un guion para terminar el juego
if (document.getElementById(tablero[index]).innerHTML === " ") {
document.getElementById(tablero[index]).innerHTML = "-";
}
}
document.getElementById("ganador").innerHTML = "Gana el jugador: " + player;
} else {
//Condicional para cambiar de ficha y de jugadores
if (sheet == ficha1) {
sheet = ficha2;
player = nombre2;
document.getElementById("player").innerHTML = "Turno jugador: " + player;
} else {
sheet = ficha1;
player = nombre1;
document.getElementById("player").innerHTML = "Turno jugador: " + player;
}
//Condicional en caso que se de un empate
if (Empate == 9 && ganador == false) {
document.getElementById("player").innerHTML = "Empate.";
}
}
}
}
\ No newline at end of file
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