En este ejercicio se debe crear un programa que simule el movimiento de una ficha roja en un tablero e indique si se ha conseguido el objetivo de situarla encima de una ficha negra.
Mueve ficha - Comentarios
El programa podrá tener dos páginas y utilizar sesiones:
La primera página muestra una fila de veinte casillas numeradas, dos fichas (círculos) de color rojo y negro en las casillas, un emoji a la derecha de la fila y dos dados abajo:
La primera vez que se abre la página, o cuando se pulsa el botón "Reiniciar" la ficha roja se encuentra en la casilla del extremo izquierdo (numerada con 0), la ficha negra se encuentra en una de las últimas cinco casillas (al azar) y los dados muestran dos valores al azar del 1 al 6 y el emoji 🤔 (🤔)
Al pulsar uno de los dos dados, la ficha roja se desplazará hacia la derecha tantas casillas como marque el dado elegido y el valor del dado elegido mostrará un nuevo valor al azar del 1 al 6. Mientras la ficha roja se encuentre a la izquierda de la ficha negra, se mostrará el mismo emoji.
Si la ficha roja coincide en la casilla de la ficha negra, únicamente se verá la ficha roja y el emoji cambiará a 😎 (😎), indicando que se ha conseguido el objetivo.
Si la ficha roja cae en una casilla situada a la derecha de la ficha negra, el emoji cambiará a 😢 (😢), indicando que no se ha conseguido el objetivo.
Si la ficha roja supera la última casilla, no se mostrará.
La segunda página recoge el botón, modifica las variables de sesión y redirige a la primera página.
Si se intenta acceder directamente a la segunda página sin pasar por la primera o si se envía a la segunda página información distinta a la esperada, se redirigirá a la primera página sin informar al usuario.
No se debe cambiar el nombre del control incluido en las plantillas.
Al actualizar la primera página, no se modificará el contenido.
Capturas de pantalla de ejemplo:
Mueve ficha - Ejemplos de código HTML
Ficha roja en su posición inicial, ficha negra en la casilla 16:
