Skip to content

J
js-e005
Commit 3833b790 by Pedro Rolon
Options

Se agregó la opción de elegir jugadores, estilo con CSS y mensajes!

parent b50dee55
Showing with 211 additions and 13 deletions
damas.html
...@@ -4,16 +4,30 @@ ...@@ -4,16 +4,30 @@
<title>Damas!</title> <title>Damas!</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="damasStyle.css"> <link rel="stylesheet" href="damasStyle.css">
<link href='https://fonts.googleapis.com/css?family=Barrio' rel='stylesheet'>
</head> </head>
<body> <body>
<div id="tablero"> <h1 id="titulo">Damas!</h1>
<div id="inputJugadores">Jugadores <input type="text" id="jugadorInput" > <button onclick=agregar()>+</button></div>
<div id="selectores" hidden="hidden">
Blancas <select name="select" id="selectX" hidden="hidden"></select>
Negras <select name="select" id="selectO" hidden="hidden"></select>
</div>
<button id="botonComenzarJuego" onclick=comenzarJuego()>Comenzar Juego</button>
<div id="tablero" hidden="hidden">
<table id="tablaTablero"></table> <table id="tablaTablero"></table>
</div> </div>
<div id="mensajeTurno">Turno blancas!</div> <div id="mensajeTurno" hidden="hidden">Turno blancas!</div>
<div id="mensajes"></div> <div id="mensajes"></div>
<div id="resultado" hidden="hidden"></div>
......
damas.js
...@@ -38,7 +38,79 @@ let segundaCaptura=false; ...@@ -38,7 +38,79 @@ let segundaCaptura=false;
//Esta función se va a encargar de crear la tabla del juego //Esta función se va a encargar de crear la tabla del juego
//con botones, también de setear la matriz "tablero" //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 <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;
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(){ function crearTablero(){
//obtiene la tabla del html //obtiene la tabla del html
...@@ -153,7 +225,7 @@ function jugar(x, y){ ...@@ -153,7 +225,7 @@ function jugar(x, y){
//Cuando la ficha seleccionada no corresponde al jugador //Cuando la ficha seleccionada no corresponde al jugador
//en turno //en turno
refrescarTablero(); refrescarTablero();
document.getElementById("mensajeTurno").innerHTML="No es tu turno!"; document.getElementById("mensajeTurno").innerHTML="No es tu turno! Es turno de "+jugador[turno][1];
return; return;
} }
else if(casilla=="vacio"){ else if(casilla=="vacio"){
...@@ -204,9 +276,9 @@ function jugar(x, y){ ...@@ -204,9 +276,9 @@ function jugar(x, y){
//Elimina el mensaje de que no es el turno de participante //Elimina el mensaje de que no es el turno de participante
//Y muestra el turno de el que corresponde //Y muestra el turno de el que corresponde
if(turno==0) if(turno==0)
mensajeTurno.innerHTML="Turno blancas!"; mensajeTurno.innerHTML="Turno blancas! turno de "+ jugador[turno][1] ;
else if(turno==1) else if(turno==1)
mensajeTurno.innerHTML="Turno negras!"; mensajeTurno.innerHTML="Turno negras! turno de "+jugador[turno][1];
anteriorX=x; anteriorX=x;
anteriorY=y; anteriorY=y;
...@@ -238,7 +310,7 @@ function jugar(x, y){ ...@@ -238,7 +310,7 @@ function jugar(x, y){
} }
}
//Función que habilita las casillas disponibles para mover una ficha //Función que habilita las casillas disponibles para mover una ficha
...@@ -478,7 +550,12 @@ function comprobarGanador(){ ...@@ -478,7 +550,12 @@ function comprobarGanador(){
document.getElementById(""+i+j).disabled="disabled"; 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){ else if(fichasNegras==0){
for(i=0;i<8;i++){ for(i=0;i<8;i++){
...@@ -486,9 +563,15 @@ function comprobarGanador(){ ...@@ -486,9 +563,15 @@ function comprobarGanador(){
document.getElementById(""+i+j).disabled="disabled"; 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(){ ...@@ -570,9 +653,9 @@ function cambiarTurno(){
mensajeTurno=document.getElementById("mensajeTurno"); mensajeTurno=document.getElementById("mensajeTurno");
if(turno==0) if(turno==0)
mensajeTurno.innerHTML="Turno blancas!"; mensajeTurno.innerHTML="Turno blancas! turno de "+jugador[turno][1];
else if(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 //Mira la matriz tablero y setea las imagenes correspondientes
...@@ -765,4 +848,3 @@ function imprimirTablero(){ ...@@ -765,4 +848,3 @@ function imprimirTablero(){
} }
} }
}
\ No newline at end of file
damasStyle.css
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{ .casilla{
width:50px; width:50px;
height: 50px; height: 50px;
...@@ -54,6 +132,15 @@ ...@@ -54,6 +132,15 @@
#mensajeTurno{ #mensajeTurno{
float: left; 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{ #tablero{
...@@ -68,4 +155,19 @@ ...@@ -68,4 +155,19 @@
#mensajes{ #mensajes{
float: bottom; 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
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