Práctica 1. HTML y JavaScript
Objetivo
Crear una página web que permita a 2 jugadores jugar al juego de los barcos, utilizando exclusivamente HTML y Javascript
Desarrollo
JavaScript es un lenguaje de script que se interpreta en el cliente. Por tanto, para la creación de la página que se propone, y puesto que con Javascript no se pueden establecer comunicaciones entre distintas máquinas, se recomienda utilizar una única ventana del navegador, separada en 2 marcos, de modo que interaccionen el uno con el otro, para introducir las posiciones de los barcos y las tiradas de cada jugador.
El tablero de juego será de 5x5, y los barcos tendrán un tamaño de una única casilla, para simplificar el juego, y serán un total de 5 barcos por jugador.
La página deberá permitir las siguientes acciones:
- Introducir las posiciones de los barcos a cada jugador, sin que el contrincante vea las posiciones introducidas. No se deben poder introducir posiciones repetidas ni posiciones no válidas. No se puede empezar a jugar hasta que los dos jugadores han introducido todos sus barcos.
- Realizar jugadas de forma alternativa tratando de adivinar la posición de los barcos del contrincante. Comienza siempre el jugador 1.
- Determinar de forma automática cuando un jugador ha ganado la partida (ha acertado las posiciones de todos los barcos del contrincante.
- Permitir visualizar la posición de los barcos en cualquier momento de la partida, y visualizar las posiciones de los barcos de los dos jugadores de forma automática al finalizar la partida.
- Alternar el turno de juego: comienza el jugador 1, pasa el turno al jugador 2, luego pasa el turno de nuevo al jugador 1, y así sucesivamente. La página debe impedir que un jugador realice dos tiradas consecutivas.
- Validar las tiradas de cada jugador, de modo que no se puedan hacer tiradas fuera del tablero, y no se puedan realizar tiradas en lugares en los que ya se había tirado.
- Cada jugador debe poder visualizar un tablero correspondiente a la situación de los barcos de su contrincante. Para ello se puede utilizar una tabla de 5x5, y rellenar el fondo de cada celda con colores: blanco=sin tirada, azul=agua, rojo=hundido.
Un ejemplo de página web con marcos y con la página que se propone sería:
Ayuda
Lo que se ofrece a continuación son una serie de ayudas y pistas que permitirán realizar de forma más rápida la página que se solicita:
- Crear una página con 2 marcos, cada uno con su nombre, y crear una página para cada jugador que se cargará en cada marco correspondiente.
- En Javascript se pueden definir variables y funciones dentro de una página web que se pueden acceder mediante Javascript en otra página web. Utilizar estas variables para aspectos como el control de turnos, posiciones de los barcos, etc.
- Para ocultar y/o mostrar texto se pueden definir etiquetas <div>, con un nombre y un identificador. La propiedad innerHTML de este objeto permite modificar los contenidos de esa sección de forma dinámica. InnerHTML es una cadena que contiene el código HTML que se desea visualizar. La forma de acceder a estos objetos desde Javascript es utilizando: document.getElementById("id"), donde id es el identificador que se ha asignado a cada etiqueta div.
- Para cambiar el color del fondo de una celda de una tabla se puede hacer lo siguiente: en primer lugar, añadir un atributo id a la etiqueta <td>; en segundo lugar, asignar un color a la celda a través de los estilos, utilizando una sentencia javascript document.getElementById("id").style.backgroundColor=color_fondo; donde id es el identificador de cada celda particular y color_fondo es el color que se desea aplicar al fondo de la celda.
- Se pueden realizar acciones javascript lanzadas al oprimir un boton utilizando el evento onclick. Simplemente hay que invocar a la función javascript dentro del evento.
- La forma de evitar que un contrincante vea como se introducen las posiciones de los barcos es utilizar un campo password que permite introducir texto sin que se vea qué es lo que se está introduciendo.
- La forma de acceder desde un documento en un frame al documento de otro frame, se realiza de la siguiente forma: suponiendo que los frames se llama izquierda y derecha, desde el documento en el frame de la derecha hay que utilizar parent.izquiera.objeto, donde objeto puede ser cualquier elemento de la página cargada en el frame (variables, funciones, objetos HTML, etc.)
Secuencias de juego de ejemplo
