Diferencia entre revisiones de «Usuario:ManuelRomero/ProgramacionWeb/php/POO/ejercicios mm»

Descripción del juego

• Este juego consiste en encontrar una secuencia de colores previamente establecida
• Aquí una descripción del juego

https://es.wikipedia.org/wiki/Mastermind

• Vamos a hacer una versión personal.
• Se trata de implementar cada requisito que se expone a continuación en un proyecto distinto, teniendo tantos programas al final como requisitos.
• Se va a implementar orientado a objetos, identificando y comprendiendo cada objeto que creemos con sus métodos y atributos.
• Los requisitos a implementar son

Lista de requisitos

RF1.- Al conectarnos aparecerá una descripción del juego y la opción de jugar RF2.- Generar una clave RF3.- Mostrar ocultar clave RF4. Mostrar un formulario para elegir jugada RF5. Realizamos la jugada sin comparar RF6. Comparamos la jugada con la clave RF6. Comparamos la jugada con la clave

RF1 Página inicial

Para la ventana se puede jugar con el css para dar al texto un poco de color.
Un pantallazo de la aplicación

#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: 1.4em;
    padding:5px 15px;
    border:2 ;
    background:#ccc;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 10px;
    position:relative;
    left:35%
}

App de MisterMind implementación del requisito 1

http://manuel.infenlaces.com/web/T4_MasterMind_v1/

RF2 Generar una clave

Ahora vamos a ver qué código debemos de especificar para la página que vamos a tener en jugar.
Todas las acciones se realizarán en esta página o script.
En este caso debemos implementar las siguientes acciones

Obtener una clave

• Tenemos dos situaciones

1.-Es la primera vez que accedo

• Genero la clave
• La guardo en variable de sesión para próxima sesión

2.-Ya tengo clave

• La leo de la variable de sesión.
• Para probar este requisito visualizaré la clave.

• Para implementar este requisito, creamos la clase Clave
• Debemos crear un botón de reset para comprobar que la clave se regenera.

Css para el juego

• Antes de poder establecer la implementación de estos requisitos vamos a pensar en la pantalla que hemos de generar o el diseño gráfico, para establecer dónde van a visualizarse la información.

Vamos a establecer tres partes gráficas en nuestro juego, identificadas cada una un un identificador de div (En la imagen #....), de modo que las contenidos que queremos que aparezcan en información deberán de ir en un div de información, como se especifica en el código siguiente:

<div id=opciones>
<!--todo el texto html o la salida echo de php, aparecerá en la sección de opciones-->
</div>
   ....
<div id=informacion>
<!--todo el texto html o la salida echo de php, aparecerá en la sección de información-->
</div>
   ....
<div id=juegadas>
<!--todo el texto html o la salida echo de php, aparecerá en la sección de juego-->
</div>

• 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;
}

Para ver esta parte del juego accedemos

App de MisterMind implementación del requisito 2

http://manuel.infenlaces.com/web/T4_MasterMind_v2

RF3.- Mostrar ocultar 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.
• Su value debe de alternarse mostrar/ocultar
• Si presionamos mostrar veremos la clave, si no, la ocultaremos
• Su acción debe quedar establecida. Es decir, si le hemos dado a mostrar, se debe quedar la clave mostrada hasta que le demos ocultar.

App de MisterMind implementación del requisito 2

http://manuel.infenlaces.com/web/T4_MasterMind_v3

RF4. Mostrar un formulario para elegir jugada

• En este caso debemos mostrar un la sección para que el jugador pueda realizar una jugada
• Como programadores no podemos escribir 4 veces el mismo código (4 select con los option del valor de colores
• Deberemos implementar una función llamada crea_formulario_jugada

App de MisterMind implementación del requisito 2

http://manuel.infenlaces.com/web/T4_MasterMind_v4

RF5. Realizamos la jugada sin comparar

• Este requisito implicará una serie de acciones

1. RF5.1. Leer la jugada
2. RF5.2. Almacenarla en una variable de sesión
3. RF5.2. Visualizar todas las jugadas

• Para este requisito debemos crear o utilizar dos concepts

La clase Jugada

Es una jugada concreta, tendrá los 4 colores de la jugada

Crear un array en variable de sesión donde almacenaremos las jugadas

• La idea es implementar el siguiente código

$jugada = new Jugada(...);
$_SESSION[jugada][]=$jugada

App de MisterMind implementación del requisito 2

http://manuel.infenlaces.com/web/T4_MasterMind_v5

RF6. Comparamos la jugada con la clave

• La clave es R A V M
• La jugada es R R R R
• Solo he acertado un color y una posición
• No he acertado 4 colores

App de MisterMind implementación del requisito 2

http://manuel.infenlaces.com/web/T4_MasterMind_v6

RF7. Comparamos la jugada con la clave

Si 4 posiciones o 14 jugadas, fin de juego

1. Establecemos el fin de juego
2. Visualizamos las jugadas en orden descendente
3. Esto tanto en cada jugada, como al final del juego






App de MisterMind implementación del requisito 2

http://manuel.infenlaces.com/web/T4_MasterMind_v7