Skip to content

J
js-e005
Commit b50dee55 by Pedro Rolon
Options

Se agregaron los archivos necesarios para la tarea!

parents
Showing with 868 additions and 0 deletions
README.md 0 → 100644
# Anotaciones
* Para jugar damas ejecutar el archivo **damas.html**
* En la carpeta **recursos** se encuentran las imágenes necesarias para el juego
\ No newline at end of file
damas.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>Damas!</title>
<meta charset="utf-8">
<link rel="stylesheet" href="damasStyle.css">
</head>
<body>
<div id="tablero">
<table id="tablaTablero"></table>
</div>
<div id="mensajeTurno">Turno blancas!</div>
<div id="mensajes"></div>
<script src="damas.js"></script>
</body>
</html>
\ No newline at end of file
damas.js 0 → 100644
//Crea un array para el tablero
tablero=[];
//Variables para llevar la cuenta de la cantidad de fichas
let fichasBlancas = 12;
let fichasNegras = 12;
//Para saber que casilla se presionó anteriormente
let anteriorX;
let anteriorY;
//Matriz que contiene información de los jugadores
let jugador=[["b",""], ["n",""]];
turno=0;
//variable para controlar si se puede hacer una captura multiple
let segundaCaptura=false;
/**
* "vacio" representa un espacio vacío
* "b" representa una ficha blanca
* "rb" representa una reina blanca
* "n" representa una ficha negra
* "rn" representa una reina negra
*/
/**
* Todos los botones tienen tres clases, que al final son
* un array
* [0] = "casilla" siempre tendrá esta clase
* [1] = casillaBlanca || casilla Negra
* [2] = n || b || rn || rb -> indica que ficha contiene
* [3] = deshabilitado || habilitado -> indica si esta o no habilitado
* para mover en ese lugar una ficha
*/
//Esta función se va a encargar de crear la tabla del juego
//con botones, también de setear la matriz "tablero"
crearTablero();
function crearTablero(){
//obtiene la tabla del html
tabla = document.getElementById('tablaTablero');
//bandera para setear la clase del color a la casilla
blanca=true;
for(i=0; i<8; i++){
//Crea una fila
fila = document.createElement('tr');
//Agrega un elemento al tablero
tablero.push([]);
//Ciclo para crear el tablero en si
for(j=0;j<8; j++){
//Crea un objeto td
dato = document.createElement('td');
//Crea un botón
boton = document.createElement('button');
//Identifica al botón
boton.id = ""+i+j;
//Setea la clase de los botones a "casilla"
boton.className='casilla';
//Asigna una función a los botones, la función tiene
//como parámetros las coordenadas del botón
boton.setAttribute("onclick","jugar("+i+","+j+")");
//Para alternar los colores
if(blanca){
//asigna la clase para dar estilo
boton.classList.add("casillaBlanca");
//Deshabilita las casillas blancas
boton.disabled="disabled";
blanca = false;
//ninguna casilla blanca lleva ficha
tablero[i].push("vacio");
boton.classList.add("vacio");
}
else{
//asigna la clase para dar estilo
boton.classList.add("casillaNegra");
blanca=true;
//Si la casilla es negra, debe tener una ficha
//por lo tanto, de la primera a la tercera fila
//debe contener fichas blancas
//y de la 6° a la 8° fila debe contener fichas
//negras
if(i<=2){
tablero[i].push("b");
boton.classList.add("b");
}
else if(i>=5){
tablero[i].push("n");
boton.classList.add("n");
}
else{ //si no cumple ninguna, es vacio
//Deshabilita las casillas desocupadas
boton.disabled="disabled";
tablero[i].push("vacio");
boton.classList.add("vacio");
}
}
boton.classList.add("deshabilitado");
//agrega el botón al td
dato.appendChild(boton);
//agrega el td a la fila
fila.appendChild(dato);
}
//para que en la siguiente fila comience del mismo color
//con la que terminó la fila anterior
blanca = !blanca;
//agrega la fila a la tabla
tabla.appendChild(fila);
}
}
//Función que recibe la orden del botón
//recibe como parámetro las coordenadas del botón
function jugar(x, y){
//Ficha contendrá n o b
//Casilla puede contener, además, rn o rb
casilla=tablero[x][y];
let ficha;
//para hacer el casteo de "rn" a "n"
//y de "rb" a "b"
if(casilla=="rn" || casilla=="n"){
ficha="n";
}
else if(casilla=="rb" || casilla=="b"){
ficha="b";
}
if(ficha!=jugador[turno][0] && casilla!="vacio"){
//Cuando la ficha seleccionada no corresponde al jugador
//en turno
refrescarTablero();
document.getElementById("mensajeTurno").innerHTML="No es tu turno!";
return;
}
else if(casilla=="vacio"){
//Si se recibió la orden y la casilla presionada está vacía,
//quiere decir que fue habilitada porque hay una ficha que
//puede ser movida a ese lugar. Esa ficha es la del turno en
//proceso
//Verifica si se produjo una captura de ficha, de ser así
//elimina la ficha capturada
comprobarCaptura(x, y);
//Llena la casilla seleccionada con la ficha del jugador cuyo turno
//está en curso
tablero[x][y]=tablero[anteriorX][anteriorY];
//La casilla que habilitó las casillas, se queda en vacío
tablero[anteriorX][anteriorY]="vacio";
//Comprueba si alguna dama llegó al otro lado. De ser así, esta
//función la convierte en reina
comprobarReina(x, y);
//Resetea el tablero en el juego
refrescarTablero();
//Comprueba si existe un ganador, de ser así, termina todo el juego
comprobarGanador();
//Se intercambia el turno si no hubo una segunda captura
//Si hay posibilidad de hacer una segunda captura, entonces
//Puede volver a jugar
//console.log("cambio de turno");
if(segundaCaptura){
cambiarTurno();
segundaCaptura=false;
}
cambiarTurno();
}
else{
//Cuando la ficha seleccionada corresponde al jugador en
//turno
//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!";
else if(turno==1)
mensajeTurno.innerHTML="Turno negras!";
anteriorX=x;
anteriorY=y;
//Refresca el tablero, deshabilitando todas las casillas vacías
//Esto es por si se presionó otra ficha nueva, para que no se queden
//habilitadas las que ya se habian habilitado anteriormente
refrescarTablero();
/**
* Cada grupo tiene opciones de habilitación diferente, pues si
* se presiona una ficha negra, se debe habilitar hacia arriba
* si se presiona ficha blanca, se debe habilitar hacia abajo
* si se presiona una reina, se debe habilitar todas las direcciones
*/
if(casilla=="b"){
habilitarOpcionesBlancas(x,y);
}
else if(casilla=="n"){
habilitarOpcionesNegras(x,y);
}
else if(casilla=="rn"){
habilitarOpcionesReinaNegra(x,y);
}
else if(casilla=='rb'){
habilitarOpcionesReinaBlanca(x,y);
}
}
//Función que habilita las casillas disponibles para mover una ficha
function habilitarOpcionesBlancas(x, y){
//Va buscando casilla hacia abajo y a la izquierda
auxX=x+1;
auxY=y-1;
while(auxX<8 && auxY>=0 && auxX<=x+2 && auxY>=y-2){
if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX++;
auxY--;
}
//Va buscando casilla hacia abajo y a la derecha
auxX=x+1;
auxY=y+1;
while(auxX<8 && auxY<8 && auxX<=x+2 && auxY<=y+2){
if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX++;
auxY++;
}
}
function habilitarOpcionesNegras(x,y){
//Va buscando casilla hacia arriba y a la izquierda
auxX=x-1;
auxY=y-1;
while(auxX>=0 && auxY>=0 && auxX>=x-2 && auxY>=y-2){
if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX--;
auxY--;
}
//Va buscando casilla hacia arriba y a la derecha
auxX=x-1;
auxY=y+1;
while(auxX>=0 && auxY<8 && auxX>=x-2 && auxY<=y+2){
if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX--;
auxY++;
}
}
function habilitarOpcionesReinaBlanca(x, y){
//Va buscando casilla hacia abajo y a la izquierda
auxX=x+1;
auxY=y-1;
while(auxX<8 && auxY>=0 && auxX<=x+2 && auxY>=y-2){
if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX++;
auxY--;
}
//Va buscando casilla hacia abajo y a la derecha
auxX=x+1;
auxY=y+1;
while(auxX<8 && auxY<8 && auxX<=x+2 && auxY<=y+2){
if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX++;
auxY++;
}
//Va buscando casilla hacia arriba y a la izquierda
auxX=x-1;
auxY=y-1;
while(auxX>=0 && auxY>=0 && auxX>=x-2 && auxY>=y-2){
if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX--;
auxY--;
}
//Va buscando casilla hacia arriba y a la derecha
auxX=x-1;
auxY=y+1;
while(auxX>=0 && auxY<8 && auxX>=x-2 && auxY<=y+2){
if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX--;
auxY++;
}
}
function habilitarOpcionesReinaNegra(x, y){
//Va buscando casilla hacia abajo y a la izquierda
auxX=x+1;
auxY=y-1;
while(auxX<8 && auxY>=0 && auxX<=x+2 && auxY>=y-2){
if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX++;
auxY--;
}
//Va buscando casilla hacia abajo y a la derecha
auxX=x+1;
auxY=y+1;
while(auxX<8 && auxY<8 && auxX<=x+2 && auxY<=y+2){
if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX++;
auxY++;
}
//Va buscando casilla hacia arriba y a la izquierda
auxX=x-1;
auxY=y-1;
while(auxX>=0 && auxY>=0 && auxX>=x-2 && auxY>=y-2){
if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX--;
auxY--;
}
//Va buscando casilla hacia arriba y a la derecha
auxX=x-1;
auxY=y+1;
while(auxX>=0 && auxY<8 && auxX>=x-2 && auxY<=y+2){
if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
break;
}
if(tablero[auxX][auxY]=="vacio"){
boton=document.getElementById(""+auxX+auxY);
boton.removeAttribute("disabled");
boton.classList.remove("deshabilitado");
boton.classList.add("habilitado");
break;
}
auxX--;
auxY++;
}
}
//Esta función comprueba si hay un ganador
//En el caso que si lo haya, tiene que deshabilitar todo el tablero,
//mostrar un mensaje el ganador, mostrar el botón de volver a jugar.
function comprobarGanador(){
if(fichasBlancas==0){
for(i=0;i<8;i++){
for(j=0;j<8;j++){
document.getElementById(""+i+j).disabled="disabled";
}
}
console.log("ganaron las negras!");
}
else if(fichasNegras==0){
for(i=0;i<8;i++){
for(j=0;j<8;j++){
document.getElementById(""+i+j).disabled="disabled";
}
}
console.log("ganaron las blancas!");
}
}
/**
* Esta función comprueba si alguna dama se convirtió en Reina
* En el caso de la ficha blanca, comprueba si llegó hasta abajo
* En el caso de la ficha negra, comprueba si llegó hasta arriba
* De ser así, convierte la "b" o la "n" a "rb" o "rn" respectivamente
*/
function comprobarReina(x, y){
if(tablero[x][y]=="b" && x==7){
tablero[x][y]='rb';
}
else if(tablero[x][y]=="n" && x==0){
tablero[x][y]="rn";
}
}
//Verifica si se produjo una captura de ficha, de ser así
//elimina la ficha capturada
function comprobarCaptura(x, y){
if(x==anteriorX+2 && y==anteriorY-2){
if(tablero[anteriorX+1][anteriorY-1]=="b" || tablero[anteriorX+1][anteriorY-1]=="rb"){
fichasBlancas--;
}
else if(tablero[anteriorX+1][anteriorY-1]=="n" || tablero[anteriorX+1][anteriorY-1]=="rn"){
fichasNegras--;
}
tablero[anteriorX+1][anteriorY-1]="vacio";
comprobarSegundaCaptura(x, y);
}
else if(x==anteriorX+2 && y==anteriorY+2){
if(tablero[anteriorX+1][anteriorY+1]=="b" || tablero[anteriorX+1][anteriorY+1]=="rb"){
fichasBlancas--;
}
else if(tablero[anteriorX+1][anteriorY+1]=="n" || tablero[anteriorX+1][anteriorY+1]=="rn"){
fichasNegras--;
}
tablero[anteriorX+1][anteriorY+1]="vacio";
comprobarSegundaCaptura(x, y);
}
else if(x==anteriorX-2 && y==anteriorY-2){
if(tablero[anteriorX-1][anteriorY-1]=="b" || tablero[anteriorX-1][anteriorY-1]=="rb"){
fichasBlancas--;
}
else if(tablero[anteriorX-1][anteriorY-1]=="n" || tablero[anteriorX-1][anteriorY-1]=="rn"){
fichasNegras--;
}
tablero[anteriorX-1][anteriorY-1]="vacio";
comprobarSegundaCaptura(x, y);
}
else if(x==anteriorX-2 && y==anteriorY+2){
if(tablero[anteriorX-1][anteriorY+1]=="b" || tablero[anteriorX-1][anteriorY+1]=="rb"){
fichasBlancas--;
}
else if(tablero[anteriorX-1][anteriorY+1]=="n" || tablero[anteriorX-1][anteriorY+1]=="rn"){
fichasNegras--;
}
tablero[anteriorX-1][anteriorY+1]="vacio";
comprobarSegundaCaptura(x, y);
}
}
//intercambia los turnos
function cambiarTurno(){
if(turno==0){
turno=1;
}
else{
turno=0;
}
mensajeTurno=document.getElementById("mensajeTurno");
if(turno==0)
mensajeTurno.innerHTML="Turno blancas!";
else if(turno==1)
mensajeTurno.innerHTML="Turno negras!";
}
//Mira la matriz tablero y setea las imagenes correspondientes
//en la parte gráfica
//TODO También tiene que deshabilitar todas las casillas vacías!!
function refrescarTablero(){
for(i=0; i<8; i++){
for(j=0; j<8; j++){
auxBoton=document.getElementById(""+i+j);
auxBoton.classList[1]=tablero[i][j];
if(tablero[i][j]=="vacio"){
auxBoton.disabled="disabled";
auxBoton.classList.toggle('habilitado',false);
auxBoton.classList.toggle('deshabilitado', true);
auxBoton.classList.toggle("n", false);
auxBoton.classList.toggle("b", false);
auxBoton.classList.toggle("rb", false);
auxBoton.classList.toggle("rn", false);
auxBoton.classList.toggle("vacio", true);
}
else if(tablero[i][j]=="n"){
auxBoton.classList.toggle('habilitado',false);
auxBoton.classList.toggle('deshabilitado', true);
auxBoton.classList.toggle("vacio", false);
auxBoton.classList.toggle("b", false);
auxBoton.classList.toggle("rb", false);
auxBoton.classList.toggle("rn", false);
auxBoton.classList.toggle("n", true);
}
else if(tablero[i][j]=="b"){
auxBoton.classList.toggle('habilitado',false);
auxBoton.classList.toggle('deshabilitado', true);
auxBoton.classList.toggle("vacio", false);
auxBoton.classList.toggle("n", false);
auxBoton.classList.toggle("rb", false);
auxBoton.classList.toggle("rn", false);
auxBoton.classList.toggle("b", true);
}
else if(tablero[i][j]=="rb"){
auxBoton.classList.toggle('habilitado',false);
auxBoton.classList.toggle('deshabilitado', true);
auxBoton.classList.toggle("vacio", false);
auxBoton.classList.toggle("n", false);
auxBoton.classList.toggle("b", false);
auxBoton.classList.toggle("rn", false);
auxBoton.classList.toggle("rb", true);
}
else if(tablero[i][j]=="rn"){
auxBoton.classList.toggle('habilitado',false);
auxBoton.classList.toggle('deshabilitado', true);
auxBoton.classList.toggle("vacio", false);
auxBoton.classList.toggle("n", false);
auxBoton.classList.toggle("b", false);
auxBoton.classList.toggle("rb", false);
auxBoton.classList.toggle("rn", true);
}
}
}
}
function comprobarSegundaCaptura(x,y){
//Si el turno es de las blancas
if(turno==0){
//Comprueba que la siguiente opción posible
//no salga del tablero
//Avanza hacia abajo a la izquierda
if((x+2)<8 && (y-2)>=0){
//Si la ficha que está al lado es negra o reina negra
if(tablero[x+1][y-1]=="n" || tablero[x+1][y-1]=="rn"){
//Si la siguiente opcion está vacia
if(tablero[x+2][y-2]=="vacio"){
//Si pasa todo esto, se resetea el turno
//al que jugó recién
segundaCaptura=true;
}
}
}
//Avanza hacia abajo y a la derecha
if((x+2)<8 && (y+2)<8){
if(tablero[x+1][y+1]=="n" || tablero[x+1][y+1]=="rn"){
if(tablero[x+2][y+2]=="vacio"){
segundaCaptura=true;
}
}
}
//En el caso de ser una reina blanca, se le agrega también
//la comprobación para saber si puede capturar hacia atrás
if(tablero[anteriorX][anteriorY]=="rb"){
//Avanza hacia arriba a la izquierda
if((x-2)>=0 && (y-2)>=0){
//Si la ficha que está al lado es negra o reina negra
if(tablero[x-1][y-1]=="n" || tablero[x-1][y-1]=="rn"){
//Si la siguiente opcion está vacia
if(tablero[x-2][y-2]=="vacio"){
//Si pasa todo esto, se resetea el turno
//al que jugó recién
segundaCaptura=true;
}
}
}
//Avanza hacia arriba y a la derecha
if((x-2)>=0 && (y+2)<8){
if(tablero[x-1][y+1]=="n" || tablero[x-1][y+1]=="rn"){
if(tablero[x-2][y+2]=="vacio"){
segundaCaptura=true;
}
}
}
}
}
//Si el turno es de las negras
else if(turno==1){
//Comprueba que la siguiente opción posible
//no salga del tablero
//Avanza hacia arriba a la izquierda
if((x-2)>=0 && (y-2)>=0){
//Si la ficha que está al lado es blanca o reina blanca
if(tablero[x-1][y-1]=="b" || tablero[x-1][y-1]=="rb"){
//Si la siguiente opcion está vacia
if(tablero[x-2][y-2]=="vacio"){
//Si pasa todo esto, se resetea el turno
//al que jugó recién
segundaCaptura=true;
}
}
}
//Avanza hacia arriba y a la derecha
if((x-2)>=0 && (y+2)<8){
if(tablero[x-1][y+1]=="b" || tablero[x-1][y+1]=="rb"){
if(tablero[x-2][y+2]=="vacio"){
segundaCaptura=true;
}
}
}
//En el caso de ser una reina negra, se le agrega también
//la comprobación para saber si puede capturar hacia adelante
if(tablero[anteriorX][anteriorY]=="rn"){
//Avanza hacia abajo a la izquierda
if((x+2)<8 && (y-2)>=0){
//Si la ficha que está al lado es blanca o reina blanca
if(tablero[x+1][y-1]=="b" || tablero[x+1][y-1]=="rb"){
//Si la siguiente opcion está vacia
if(tablero[x+2][y-2]=="vacio"){
//Si pasa todo esto, se resetea el turno
//al que jugó recién
segundaCaptura=true;
}
}
}
//Avanza hacia abajo y a la derecha
if((x+2)<8 && (y+2)<8){
if(tablero[x+1][y+1]=="b" || tablero[x+1][y+1]=="rb"){
if(tablero[x+2][y+2]=="vacio"){
segundaCaptura=true;
}
}
}
}
}
}
function imprimirTablero(){
for(i=0; i<8; i++){
console.log(tablero[i]);
}
}
}
\ No newline at end of file
damasStyle.css 0 → 100644
.casilla{
width:50px;
height: 50px;
margin:0;
font-family: 'Barrio';
font-size: 50px;
border: dotted 0.04px;
}
.casillaBlanca{
background-color: antiquewhite;
}
.casillaNegra{
background-color: rgb(133, 34, 34);
}
.b{
background-image: url('recursos/b.png');
background-size: 40px;
background-repeat: no-repeat;
background-position: 3px 3px;
}
.n{
background-image: url('recursos/n.png');
background-size: 40px;
background-repeat: no-repeat;
background-position: 3px 3px;
}
.vacio{
background-image: none;
}
.rn{
background-image: url('recursos/rn.png');
background-size: 40px;
background-repeat: no-repeat;
background-position: 3px 3px;
}
.rb{
background-image: url('recursos/rb.png');
background-size: 40px;
background-repeat: no-repeat;
background-position: 3px 3px;
}
.habilitado{
background-color: rgb(255, 212, 20);
}
#mensajeTurno{
float: left;
}
#tablero{
float:left;
border: solid 10px;
border-style: ridge;
margin: 0;
padding: 0;
border-color: rgb(168, 86, 27);
background-color: rgba(14, 34, 28, 0.822);
}
#mensajes{
float: bottom;
}
\ 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