Diferencia entre revisiones de «Usuario:ManuelRomero/ProgramacionWeb/php/Aut Ses Coo/practica»

Revisión de 07:43 6 dic 2019

BLOQUE 2 PHP: PROGRAMACIÓN ORIENTADO A OBJETOS

¡Construyendo componentes!

PHP Como lenguaje orientado a objetos

Autentificación |  Sesiones |  Cookies |  Ejercicios |  Práctica | Volver

  ....

  ....

</source>

• Para este cometido podremos usar este css

legend{
    font-size: 1.2em;
    color: green;
    font-weight: bold;
}
fieldset#opciones{
    border: 0.25em solid;
    align : center;
    position: absolute;
    left: 10%;
    top: 20%;
    margin-left: -115px;
    margin-top: -80px;
    padding:10px;
    background-color: #eee;
    width: 30%
}
fieldset#jugadas{
    border: 0.25em solid;
    align : center;
    position: absolute;
    left:10%;
    top: 50%;
    margin-left: -115px;
    margin-top: -80px;
    padding:10px;
    background-color: #eee;
}
#informacion{
    border: 0.25em solid;
    align-content:  center;
    position: absolute;
    left:60%;
    top: 20%;
    margin-left: -115px;
    margin-top: -80px;
    padding:10px;
    background-color: #eee;
}

Ahora vamos a abordar cada una de las acciones

1.- Generar la clave

• Debemos de generar una combinación de colores que el usuario a de acertar.
• Esta combinación la llamaremos $clave y será un array de 4 colores.
• Los colores se establecerá a partir de una serie de colores previamente establecidos. Por ejemplo podemos usar los siguientes colores

  $colores = ['Azul', 'Rojo', 'Naranja', 'Verde', 'Violeta', 'Amarillo', 'Marrón', 'Rosa'];

• Para impementar este requisito lo que tendremos que hacer es que si no existe la clave, la creamos y la guardamos en una variable de sesión, y si existe la leemos ya que la podremos necesitar posteriormente
• Este requisito no genera ninguna salida para la página, por lo que no altera el contenido

2.- Visualizar la Clave

• Para este requisito debemos de tener una opción (botón) que cuando el usuario lo presione se pueda visualizar la clave.
  
• El botón o input de tipo submit deberá de estar el la sección de opciones.
• El contenido de la clave deberá de aparecer en la sección de información.
• Estebleceremos también que el texto que aparezca en el botón cambie, de forma que cuando presionemos Mostrar clave nos muestre la clave y el texto del botón sea Ocultar clave.
• A la vez si presionamos Ocultar clave que ya no se muestre y aparezca el texto inicial. Para ello vamos a controlar con una variable el texto que aparece en el botón.

Y el resultado

• Con la opción de mostrar clave

• Cuando hemos presionado y ahora muestra ocultar clave

3.-Mostrar el menú de jugadas y botón para jugar

• Para ello tenemos que mostrar un formulario con 4 opciones para que el usuario elija 4 colores y un botón para darle a jugar
• El resultado de dar a jugar lo implementaremos en el siguiente requisito.
• Es importante que el formulario que generemos debe de estar en la sección de jugadas, para que aparezca ubicado en la sección que le hemos reservado en el diseño de la pantalla.
• Vamos a usar una función que me devuelva un formulario, cada color lo seleccionaremos con un select ( un input desplegable con los colores permitidos)
• Para que quede más vistoso, además del texto, cada opción tendrá un estilo en el class que se encargará de darle un color de fondo
• Las opciones quedarán con colores
  

Observalo en el dibujo como van cambiando de color

#presentacion{
    border : 0.25em solid;
    position: absolute;
    left:20%;
    top: 20%;
    padding:10px;
    background-color: buttonhighlight;
    font-size: 1.4em;
    font-weight: bold;
    margin: 10px
}
h2{
    color: blueviolet;
}
li{
    color: darkgreen;
}
input[type=submit] {
    font-size: 1em;
    padding:5px 15px;
    border:2 ;
    background:#ccc;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 10px;
    position:relative;
    left:35%;
    margin: 10px;
 
}
select {
    width:150px;
    height:50px;
    padding-bottom: 10px;
    padding-left:  10px;
    padding-right : 10px;
    padding-top: 10px;
    font-size: 1.1em;
}
 
 
legend{
    font-size: 1.2em;
    color: green;
    font-weight: bold;
}
fieldset#opciones{
    border: 0.25em solid;
    align : center;
    position: absolute;
    left: 10%;
    top: 20%;
    margin-left: -115px;
    margin-top: -80px;
    padding:10px;
    background-color: #eee;
    width: 30%
}
fieldset#jugadas{
    border: 0.25em solid;
    align : center;
    position: absolute;
    left:10%;
    top: 50%;
    margin-left: -115px;
    margin-top: -80px;
    padding:10px;
    background-color: #eee;
}
#informacion{
    border: 0.25em solid;
    align-content:  center;
    position: absolute;
    left:60%;
    top: 20%;
    margin-left: -115px;
    margin-top: -80px;
    padding:10px;
    background-color: #eee;
}
 
 
.Azul{
    background-color: blue;
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
 
 
}
.Rojo{
    background-color: red;
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
 
}
 
.Naranja{
    background-color: orange;
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
 
}
.Verde{
    background-color: green;
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
 
}
.Violeta{
    background-color: violet;
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
 
}
.Amarillo{
    background-color: yellow;
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
 
}
.Marrón{
    background-color: brown;
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
 
}
.Rosa{
    background-color: pink;
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
 
}
select{
 
    float: left;
    display: inline;
    width: 140px;
    height: 50px;
    margin: 5px;
}

RF3.- Jugar

Este requisito es la parte fundamental de la partida
Implicará que el usuario selecciona una jugada seleccionando los colores
Ya le hemos dado un aspecto visual para que seleccionar la jugada tenga un poco de color, para ello hemos usado el css y un poco de java script (nunca está mal recordar, se aprende para no olvidar y usar).
Ahora en nuestro script querremo considerar esta opcion (que le hemos dado a jugar), por lo que lo que queremos que ocurrra deberá estar en un

• Ahora vamos a contemplar los siguietnes requisitos

Requisito 3: jugar

RF3.1 .- leer La jugada RF3.1 .- Compararla con la clave RF3.2 .- Anotar la jugada en sesión.- RF3.3 .- Informar del resultado de la jugada (colores/posiciones acertadas)

RF3.1

Comparar jugada:

• Ahora la comparamos con la clave.
• En ello queremos que la comparación nos aporte dos valores:

1. el número de colores que hemos acertado
2. El número de posiciónes, es decir, de los colores acertados cuantos los hemos especificado en la posición correcta.

• A la hora de mostrar el mensaje del resultado de una jugada, usaremos un redondel negro por cada color acertado en posición y un redondel blanco por los colores acertados en posiciones erróneas. pondremos un número en cada redondel.
  

Además haremos que se muestren todos los resultados anteriores para permitir al usuario usarlo, aunque no le vamos a mostrar los colores que ha seleccionado de momento.
Para este cometido vamos a crear dos clases en css para generar los colores y una función que nos retorne todos los colores correspondientes a los aciertos (ver más abajo el css facilitado). Iremos también almacenando los resultados para mostrar el histórico, lo haremos en una variable de sesión llamada resultado.

RF4.- Valorar el resultado

Este requisito es bastante sencillo de implementar
No implica interactuación con el usuario, por lo que no detallaremos caso de uso, simplemente si al realizar una jugada hemos terminado vamos a ir a otra pantalla que nos especificará el fin del juego

Esta situación se producirá la realizar 16 jugadas o al acertar los colores y posiciones

Al estar en la finalización del juego mostraremos todas las jugadas anteriores y el valor de la clave. -->