+
Damas!
+
+
Jugadores +
+
+
+ Blancas
+
+
Comenzar Juego
+
+
+
-
Turno blancas!
+
Turno blancas!
+
diff --git a/damas.js b/damas.js
index 68a1b6c..7ac09a7 100644
--- a/damas.js
+++ b/damas.js
@@ -38,7 +38,79 @@ let segundaCaptura=false;
//Esta función se va a encargar de crear la tabla del juego
//con botones, también de setear la matriz "tablero"
-crearTablero();
+//crearTablero();
+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
, 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;
+
+ document.getElementById("inputJugadores").hidden="hidden";
+ document.getElementById("selectores").hidden="hidden";
+ document.getElementById("botonComenzarJuego").hidden="hidden";
+ document.getElementById("tablero").removeAttribute("hidden");
+ document.getElementById("mensajeTurno").removeAttribute("hidden");
+ if(turno==0)
+ mensajeTurno.innerHTML="Turno blancas! turno de "+ jugador[turno][1] ;
+ else if(turno==1)
+ mensajeTurno.innerHTML="Turno negras! turno de "+jugador[turno][1];
+ crearTablero();
+}
+
+
+
+
function crearTablero(){
//obtiene la tabla del html
@@ -153,7 +225,7 @@ function jugar(x, y){
//Cuando la ficha seleccionada no corresponde al jugador
//en turno
refrescarTablero();
- document.getElementById("mensajeTurno").innerHTML="No es tu turno!";
+ document.getElementById("mensajeTurno").innerHTML="No es tu turno! Es turno de "+jugador[turno][1];
return;
}
else if(casilla=="vacio"){
@@ -204,9 +276,9 @@ function jugar(x, y){
//Elimina el mensaje de que no es el turno de participante
//Y muestra el turno de el que corresponde
if(turno==0)
- mensajeTurno.innerHTML="Turno blancas!";
+ mensajeTurno.innerHTML="Turno blancas! turno de "+ jugador[turno][1] ;
else if(turno==1)
- mensajeTurno.innerHTML="Turno negras!";
+ mensajeTurno.innerHTML="Turno negras! turno de "+jugador[turno][1];
anteriorX=x;
anteriorY=y;
@@ -238,7 +310,7 @@ function jugar(x, y){
}
-
+}
//Función que habilita las casillas disponibles para mover una ficha
@@ -478,7 +550,12 @@ function comprobarGanador(){
document.getElementById(""+i+j).disabled="disabled";
}
}
- console.log("ganaron las negras!");
+ p = document.createElement('p');
+ document.getElementById('resultado').appendChild(p);
+ p.innerHTML="Ganó "+ jugador[turno][1]+"!";
+ document.getElementById("resultado").removeAttribute('hidden');
+ document.getElementById("mensajeTurno").hidden="hidden";
+
}
else if(fichasNegras==0){
for(i=0;i<8;i++){
@@ -486,9 +563,15 @@ function comprobarGanador(){
document.getElementById(""+i+j).disabled="disabled";
}
}
- console.log("ganaron las blancas!");
+ p = document.createElement('p');
+ document.getElementById('resultado').appendChild(p);
+ p.innerHTML="Ganó "+ jugador[turno][1]+"!";
+ document.getElementById("resultado").removeAttribute('hidden');
+ document.getElementById("mensajeTurno").hidden="hidden";
}
+
+
}
/**
@@ -570,9 +653,9 @@ function cambiarTurno(){
mensajeTurno=document.getElementById("mensajeTurno");
if(turno==0)
- mensajeTurno.innerHTML="Turno blancas!";
+ mensajeTurno.innerHTML="Turno blancas! turno de "+jugador[turno][1];
else if(turno==1)
- mensajeTurno.innerHTML="Turno negras!";
+ mensajeTurno.innerHTML="Turno negras! turno de "+jugador[turno][1];
}
//Mira la matriz tablero y setea las imagenes correspondientes
@@ -765,4 +848,3 @@ function imprimirTablero(){
}
}
-}
\ No newline at end of file
diff --git a/damasStyle.css b/damasStyle.css
index 34ea1d3..1efa512 100644
--- a/damasStyle.css
+++ b/damasStyle.css
@@ -1,3 +1,81 @@
+body {
+ text-align: center;
+ margin: 0;
+ background-color: rgb(117, 35, 76);
+ 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%;
+}
+
+
+
+
+
.casilla{
width:50px;
height: 50px;
@@ -54,6 +132,15 @@
#mensajeTurno{
float: left;
+ background-color: white;
+ font-family: 'Barrio';
+ border-style: groove;
+ height: 215px;
+ width: 100px;
+ text-align: center;
+ padding: 4px;
+ font-size: 25px;
+ border-radius: 0px 30px 30px 0px;
}
#tablero{
@@ -68,4 +155,19 @@
#mensajes{
float: bottom;
+}
+
+#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;
}
\ No newline at end of file