Skip to content

J
js-e004
Commit 181f4deb by Pedro Rolon
Options

agregué los archivos correspondientes a la tarea!

parents
Showing with 425 additions and 0 deletions
README.md 0 → 100644
# Instrucciones y Especificaciones
* Ejecutar el archivo **tateti.html**
* Introducir el nombre de los jugadores
* Elegir que jugador va a tener cada ficha, mediante una lista desplegable
* No pueden jugadores iguales en cada ficha
* Para jugar contra la máquina, ponerle el nombre **computadora** a alguno de los jugadores, puede jugar tanto con la **X** como con la **O**
\ No newline at end of file
barco.jpg 0 → 100755
barco.jpg

905 KB
style.css 0 → 100644
body {
text-align: center;
margin: 0;
background-image: url("barco.jpg");
background-position: 0%;
}
h1{
background-color:lightseagreen;
padding: 3%;
align-self: auto;
text-align: center;
font-family: 'Barrio';
font-size: 40px;
}
input{
width: 20%;
text-align: right;
}
#inputJugadores {
margin: auto;
width: 100%;
padding: 10px;
background-color: rgb(29, 185, 138);
}
#selectores {
background-color: rgb(250, 160, 76);
margin: auto;
width: 100%;
padding: 10px;
}
select{
margin-right: 10%;
}
#botonComenzarJuego {
font-size: 20px;
width: 150px;
height: 100px;
margin: 10px;
background-color: slategrey;
border-color: brown;
color: black;
border-style: outset;
}
#tatetiTurnos{
float: left;
background-color: white;
font-family: 'Barrio';
border-style: groove;
height: 315px;
width: 200px;
text-align: center;
padding: 4px;
font-size: 50px;
border-radius: 0px 30px 30px 0px;
}
#tateti{
border-radius: 50px;
background-color: rgb(255, 174, 0);
width: 300px;
height: 300px;
text-align: center;
float:left;
padding: 3%;
}
td{
border: 1px solid mediumvioletred;
padding: 0;
margin: 0;
border-style: inset;
}
.casilla{
width:95px;
height: 93px;
margin:0;
font-family: 'Barrio';
font-size: 50px;
}
#resultado{
border-radius: 50px;
background-color: crimson;
width: 200px;
height: 300px;
font-family: 'Barrio';
text-align: inherit;
float:left;
padding: 3%;
font-size: 50px;
margin-left: 20px;
overflow-wrap:break-word;
hyphens: auto;
}
.ganador{
color: red;
}
\ No newline at end of file
tateti.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>Ta Te Ti</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Barrio' rel='stylesheet'>
<body>
<h1 id="titulo">Ta-Te-Ti!</h1>
<div id="inputJugadores">Jugadores <input type="text" id="jugadorInput" > <button onclick=agregar()>+</button></div>
<div id="selectores" hidden="hidden">
Jugador x <select name="select" id="selectX" hidden="hidden"></select>
Jugador o <select name="select" id="selectO" hidden="hidden"></select>
</div>
<button id="botonComenzarJuego" onclick=comenzarJuego()>Comenzar Juego</button>
<div id="tatetiTurnos" hidden="hidden">
<p id="mensajeTurno"></p>
</div>
<div id="tateti" hidden="hidden">
<table>
<tr>
<td><button class="casilla" id="00" onclick=jugar(0,0)></button></td>
<td><button class="casilla" id="01" onclick=jugar(0,1)></button></td>
<td><button class="casilla" id="02" onclick=jugar(0,2)></button></td>
</tr>
<tr>
<td><button class="casilla" id="10" onclick=jugar(1,0)></button></td>
<td><button class="casilla" id="11" onclick=jugar(1,1)></button></td>
<td><button class="casilla" id="12" onclick=jugar(1,2)></button></td>
</tr>
<tr>
<td><button class="casilla" id="20" onclick=jugar(2,0)></button></td>
<td><button class="casilla" id="21" onclick=jugar(2,1)></button></td>
<td><button class="casilla" id="22" onclick=jugar(2,2)></button></td>
</tr>
</table>
</div>
<div id="resultado" hidden="hidden">
</div>
<script src="tateti.js"></script>
</body>
</html>
\ No newline at end of file
tateti.js 0 → 100644
//mostrarTateti();
let tateti = [[" ", " ", " "],[" "," ", " "],[" "," ", " "]];
//Se define a que jugador le corresponde que ficha
jugador = [["X", " "], ["O", " "]];
turno=0;
//Contador de jugadas, para determinar un empate
jugadas=0;
function agregar(){
//crea objetos correspondientes a elementos del DOM
selectX = document.getElementById("selectX");
selectO = document.getElementById("selectO");
option1 = document.createElement('option');
option2 = document.createElement('option');
jugadorInput = document.getElementById("jugadorInput");
//Comprueba que el input del jugador no esté vacío
if(jugadorInput.value==""){
alert("Debe introducir un nombre!");
return;
}
//Setea el valor del option con el valor del input
option1.value=jugadorInput.value
option1.innerHTML=jugadorInput.value;
option2.value=jugadorInput.value
option2.innerHTML=jugadorInput.value;
//Para agregar el valor del input al select
selectX.appendChild(option1);
selectO.appendChild(option2);
//Muestra el <select>, que estaba inicialmente oculto
selectX.removeAttribute("hidden");
selectO.removeAttribute("hidden");
document.getElementById("selectores").removeAttribute("hidden");
//Borra el valor ingresado
jugadorInput.value="";
}
function comenzarJuego(){
//Recibe los valores de los elementos select
selectX = document.getElementById("selectX");
selectO = document.getElementById("selectO");
//Comprobar que los jugadores X y O tienen jugadores válidos
if(selectX.value==""){
alert("Debe elegir un jugador X");
return;
}
if(selectO.value==""){
alert("Debe elegir un jugador O");
return;
}
//Comprobar que los jugadores X y O no sean iguales
if(selectX.value == selectO.value){
alert("Los jugadores X y O deben ser diferentes!");
return;
}
jugador[0][1] = selectX.value;
jugador[1][1] = selectO.value;
mostrarTateti();
//Si a la computadora le toca el primer turno, arranca
//jugando
if(jugador[turno][1].toLowerCase()=="computadora"){
do{
computadoraX = aleatorio(0,2);
computadoraY = aleatorio(0,2);
}while(tateti[computadoraX][computadoraY]!=" ")
jugar(computadoraX, computadoraY);
}
}
function mostrarTateti(){
//Oculta todos los elementos de la primera pantalla y
//da lugar al tablero del tateti
document.getElementById("inputJugadores").hidden="hidden";
document.getElementById("selectores").hidden="hidden";
document.getElementById("botonComenzarJuego").hidden="hidden";
document.getElementById("tateti").removeAttribute("hidden");
//Llama a la función mensajeTurno
mensajeTurno();
}
function jugar(x, y){
//esta funcion tiene que llenar la matriz con la ficha
//correspondiente, tiene que cambiar la imagen del botón
//y volverlo disable
//en la matriz, setea el valor con X u O
tateti[x][y]= jugador[turno][0];
//cambia el contenido del botón
document.getElementById(""+x+y).innerHTML=jugador[turno][0];
//Desactiva el botón que se eligió
document.getElementById(""+x+y).disabled="disabled";
//Comprueba si hay un ganador
if(comprobarGanador()){
console.log("ganó "+ jugador[turno][1]);
mostrarResultado(jugador[turno][1]);
console.log(tateti);
return;
}
//Para intercambiar turnos
if(turno == 0){
turno=1;
}
else if(turno == 1){
turno=0;
}
//Llama a la función mensajeTurno
mensajeTurno();
//agrega una jugada más al contador
jugadas++;
if(jugadas==9){
mostrarResultado("empate");
return;
}
//comprueba si es el turno de la computadora
if(jugador[turno][1].toLowerCase()=="computadora"){
do{
computadoraX = aleatorio(0,2);
computadoraY = aleatorio(0,2);
}while(tateti[computadoraX][computadoraY]!=" ")
jugar(computadoraX, computadoraY);
}
}
//Muestra quien es el ganador en caso de que haya uno
//Si es empate, tambien muestra
function mostrarResultado(ganador){
//comprobar que valor tiene ganador
//achicar el tateti (para esto puedo crear una clase en css
//y asignarle esa clase al div tateti)
//Mostrar un mensaje grande abajo con el nombre del ganador
p = document.createElement('p');
document.getElementById('resultado').appendChild(p);
if(ganador=="empate"){
p.innerHTML="Empate!"
}else{
p.innerHTML="Ganó "+ jugador[turno][1]+"!";
}
//Quita el atributo "oculto" del resultado, para poder mostrar
document.getElementById("resultado").removeAttribute("hidden");
//obtiene todos los objetos tipo casilla
casillas = document.getElementsByClassName('casilla');
//desabilita todas las casillas, para que no se pueda
//seguir jugando
for(i=0; i<9; i++){
casillas[i].disabled="disabled";
}
document.getElementById("tatetiTurnos").hidden="hidden";
}
//Muestra un mensaje indicando a quién corresponde el turno
function mensajeTurno(){
document.getElementById("tatetiTurnos").removeAttribute("hidden");
document.getElementById("mensajeTurno").innerHTML="Turno de "
+jugador[turno][1] + ", jugador " + jugador[turno][0];
}
//Comprueba si hay un ganador
function comprobarGanador(){
//Comprobación de filas
if(tateti[0][0]==tateti[0][1] && tateti[0][1]==tateti[0][2]){
if(tateti[0][0]!=" "){
pintarGanador(["00", "01", "02"]);
return true;
}
}
if(tateti[1][0]==tateti[1][1] && tateti[1][1]==tateti[1][2]){
if(tateti[1][0]!=" "){
pintarGanador(["10", "11", "12"]);
return true;
}
}
if(tateti[2][0]==tateti[2][1] && tateti[2][1]==tateti[2][2]){
if(tateti[2][0]!=" "){
pintarGanador(["20", "21", "22"]);
return true;
}
}
//Comprobación de columnas
if(tateti[0][0]==tateti[1][0] && tateti[1][0]==tateti[2][0]){
if(tateti[0][0]!=" "){
pintarGanador(["00", "10", "20"]);
return true;
}
}
if(tateti[0][1]==tateti[1][1] && tateti[1][1]==tateti[2][1]){
if(tateti[0][1]!=" "){
pintarGanador(["01", "11", "21"]);
return true;
}
}
if(tateti[0][2]==tateti[1][2] && tateti[1][2]==tateti[2][2]){
if(tateti[0][2]!=" "){
pintarGanador(["02", "12", "22"]);
return true;
}
}
//Comprobación de diagonales
if(tateti[0][0]==tateti[1][1] && tateti[1][1]==tateti[2][2]){
if(tateti[0][0]!=" "){
pintarGanador(["00", "11", "22"]);
return true;
}
}
if(tateti[0][2]==tateti[1][1] && tateti[1][1]==tateti[2][0]){
if(tateti[0][2]!=" "){
pintarGanador(["02", "11", "20"]);
return true;
}
}
return false;
}
function pintarGanador(pos){
for(i=0; i<3; i++){
aux=document.getElementById(""+pos[i]);
aux.classList.add("ganador");
}
}
function aleatorio(limite_inferior, limite_superior) {
return Math.round(Math.random() * (limite_superior - limite_inferior) + limite_inferior);
}
\ 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