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 @@
<title>Damas!</title>
<meta charset="utf-8">
<link rel="stylesheet" href="damasStyle.css">
<link href='https://fonts.googleapis.com/css?family=Barrio' rel='stylesheet'>
</head>
<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>
</div>
<div id="mensajeTurno">Turno blancas!</div>
<div id="mensajeTurno" hidden="hidden">Turno blancas!</div>
<div id="mensajes"></div>
<div id="resultado" hidden="hidden"></div>
......
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 <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(){
//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
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{
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{
......@@ -69,3 +156,18 @@
#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
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