Share
En esta serie, estamos creando un juego de Hangman para la plataforma Android. En el primer tutorial, configuramos la aplicación para presentar dos pantallas al usuario y también comenzamos con los elementos de la interfaz de usuario, las imágenes y las formas de dibujo para ser precisos. En el segundo tutorial, nos acercaremos al diseño del juego..
Crear el diseño del juego implicará utilizar un adaptador para crear botones de letras y colocar las partes del cuerpo que mostraremos cuando los usuarios seleccionen letras incorrectas. También almacenaremos las respuestas del jugador en XML, las recuperaremos y elegiremos una palabra aleatoria usando Java.
Para refrescar tu memoria, así es como se verá el juego final.
En el tutorial anterior, creamos imágenes para la horca y para las seis partes del cuerpo. Los colocaremos dentro del diseño del juego en este tutorial. Las posiciones que establezca para estos elementos deben estar determinadas por los elementos de imagen que está utilizando. Un enfoque es importar las imágenes a un editor de imágenes, como Photoshop de Adobe, ubicarlas manualmente y luego usarlas. X y y posiciones relativas a la imagen de la horca para calcular las posiciones correctas que se aplican a cada imagen en el diseño XML. Si está comenzando con las imágenes de demostración que incluimos en el tutorial anterior, puede usar los valores que se enumeran en este tutorial..
Comienza por abrir activity_game.xml. Dentro del diseño lineal que agregamos en el tutorial anterior, ingrese un diseño relativo para contener las siete imágenes que conformarán el área de la horca.
Dentro del diseño relativo que acaba de crear, comience agregando la imagen de la horca como se muestra a continuación.
Recuerde modificar el nombre dibujable si la imagen que está usando tiene un nombre diferente. Configuramos el relleno izquierdo y superior de la imagen a 0 De modo que podamos posicionar las otras imágenes en relación a su posición. Agregaremos recursos de cadena para las descripciones de contenido un poco más adelante en este tutorial. El siguiente es la cabeza.
Si está utilizando sus propias imágenes, deberá modificar el relleno izquierdo y superior según corresponda. Usamos un carné de identidad atributo para que podamos referirnos a la imagen en código. Esto es necesario para que aparezca y desaparezca según la entrada del usuario. La siguiente imagen que agregamos es el cuerpo..
Esto se ve muy similar a lo que hicimos para la cabeza y, como se puede ver a continuación, los brazos y las piernas son bastante similares..
Abra el archivo XML de las cadenas de valores / res del proyecto y agregue las cadenas de descripción de contenido que hemos utilizado en los fragmentos de código anteriores.
La horca La cabeza El cuerpo Un brazo Una pierna
Vuelva al archivo de diseño y cambie al Diseño gráfico pestaña para ver el resultado de nuestro trabajo. Ajuste el relleno superior e izquierdo de cada imagen para ajustar su posición si es necesario.
Cada vez que se inicia un nuevo juego, las partes del cuerpo deben estar ocultas. Cada parte del cuerpo se revela si el jugador elige una letra que no está presente en la palabra objetivo.
El juego utilizará una colección de palabras predefinidas, que almacenaremos en XML. En la carpeta de valores de recursos de su proyecto, agregue un nuevo archivo y asígnele el nombre arrays.xml.
Cambiar a la XML pestaña, crea una matriz y agrega algunas palabras a ella.
Para este tutorial, utilizamos una serie de palabras relacionadas con la informática. Sin embargo, para hacer que el juego sea más interesante, puede trabajar con varias categorías y cada categoría contiene palabras relacionadas con un tema específico. Cuando el usuario haga clic en el botón de reproducción, puede pedirle que elija una categoría y lea la matriz de palabras relevante.- CARGADOR
- COMPUTADORA
- TABLETA
- SISTEMA
- SOLICITUD
- INTERNET
- AGUJA
- ANDROIDE
- TECLADO
- SMARTPHONE
De vuelta en el archivo de diseño de actividades de su juego, agregue un diseño lineal inmediatamente después del diseño relativo que agregamos para el área de la horca. El diseño lineal está reservado para el área de respuesta..
Almacenamos cada carácter de la palabra de destino dentro de su propia vista de texto para que podamos revelar cada letra por separado. Usaremos el carné de identidad del diseño lineal en el código para agregar las vistas de texto cada vez que se elige una nueva palabra.
Abre el JuegoActividad clase y comience agregando las siguientes instrucciones de importación en la parte superior.
importar android.content.res.Resources; import android.graphics.Color; import android.view.Gravity; importar android.view.ViewGroup.LayoutParams; importar android.widget.LinearLayout; importar android.widget.TextView;
Dentro de la declaración de clase, agregue un onCreate método como se muestra a continuación.
@Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_game);
Configuramos la vista de contenido al archivo de diseño que creamos hace un momento..
Antes de continuar, debemos declarar algunas variables de instancia. Agregue la declaración inmediatamente antes de la onCreate método.
Palabras de cadena [] privadas; rand aleatorio privado; cadena privada currWord; LinearLayout privado wordLayout; privado TextView [] charViews;
La colección de palabras se almacena en una matriz y la aplicación utiliza la rand objeto para seleccionar una palabra de la matriz cada vez que el usuario comienza un juego nuevo. Mantenemos una referencia a la palabra actual (currWord), el diseño que creamos para mantener el área de respuesta (WordLayout), y una serie de vistas de texto para las letras (CharViews). De nuevo en onCreate, después de configurar la vista de contenido, solicite los recursos de la aplicación, lea la colección de palabras y guárdelas en el palabras Instancia variable.
Recursos res = getResources (); palabras = res.getStringArray (R.array.words);
Tenga en cuenta que usamos el nombre que le dimos a la matriz de palabras en XML. Inicializar el rand objeto y currWord cuerda.
rand = new Random (); currWord = "";
Obtenga una referencia al área de diseño que creamos para las cartas de respuesta.
wordLayout = (LinearLayout) findViewById (R.id.word);
Se deben realizar varias tareas cada vez que el jugador inicie un nuevo juego. Vamos a crear un método de ayuda para mantener todo organizado. Después de la onCreate Método, agregue el siguiente esquema del método.
private void playGame () // jugar un nuevo juego
Dentro de jugar un juego método, comience por elegir una palabra al azar de la matriz.
String newWord = palabras [rand.nextInt (words.length)];
Porque el jugar un juego El método se invoca cuando el usuario elige jugar nuevamente después de ganar o perder un juego, es importante que nos aseguremos de no elegir la misma palabra dos veces seguidas.
while (newWord.equals (currWord)) newWord = words [rand.nextInt (words.length)];
Actualizar el currWord variable de instancia con la nueva palabra de destino.
currWord = newWord;
El siguiente paso es crear una vista de texto para cada letra de la palabra objetivo. Aún dentro de nuestro método auxiliar, cree una nueva matriz para almacenar las vistas de texto de las letras de la palabra de destino.
charViews = new TextView [currWord.length ()];
A continuación, elimine cualquier vista de texto de la WordLayout diseño.
wordLayout.removeAllViews ();
Usa un simple para bucle para iterar sobre cada letra de la respuesta, cree una vista de texto para cada letra y configure el texto de la vista de texto a la letra actual.
Accentsconagua
para (int c = 0; c < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c)); La cadena se almacena como una matriz de caracteres. los carácter El método nos permite acceder a los caracteres en un índice específico. Todavía dentro de la para bucle, establezca las propiedades de visualización en la vista de texto y agréguela al diseño.
para (int c = 0; c < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c)); charViews[c].setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); charViews[c].setGravity(Gravity.CENTER); charViews[c].setTextColor(Color.WHITE); charViews[c].setBackgroundResource(R.drawable.letter_bg); //add to layout wordLayout.addView(charViews[c]); Establecemos el color del texto en blanco para que el usuario no pueda verlo contra el fondo blanco. Si adivinan la letra correctamente, la propiedad de color del texto es negra para revelarla al jugador. Regreso en el onCreate método, llame al método auxiliar que acabamos de crear.
jugar un juego();
Ampliaremos tanto el onCreate y el método de ayuda un poco más tarde.
El siguiente paso es crear un área para que el jugador elija las letras para adivinar. Revise el diseño de la actividad del juego y agregue la siguiente vista de cuadrícula para mantener los botones de letras. Inserte la vista de cuadrícula inmediatamente después del diseño lineal que agregamos para la palabra de respuesta.
Vamos a utilizar un adaptador para asignar las letras del alfabeto a los botones en la vista de cuadrícula. Colocamos siete botones por fila como se puede ver en el numColumns atributo.
Cada letra será un botón agregado al diseño mediante un adaptador. Agregue un nuevo archivo en la carpeta de diseño de su proyecto, asígnele el nombre letter.xml y llénelo con el siguiente fragmento de código.
Utilizamos una de las formas dibujables que creamos la última vez como fondo y configuramos un al hacer clic Método que implementaremos la próxima vez. Si está mejorando la aplicación para apuntar a diferentes densidades de pantalla, puede considerar adaptar el atributo de altura en consecuencia.
Agrega una nueva clase al paquete src de tu proyecto, nómbrelo LetterAdapter, y elige android.widget.BaseAdapter como su superclase.
Como verá, una clase de adaptador incluye una serie de métodos estándar que implementaremos. Agregue las siguientes instrucciones de importación a la nueva clase.
importar android.content.Context; importar android.view.LayoutInflater; importar android.widget.Button;
Dentro de la declaración de clase, agregue dos variables de instancia como se muestra a continuación.
Letras de cadena [] privadas; LayoutInflater letterInf privado;
los letras array almacenará las letras del abecedario y el diseño inflater aplicará el diseño de botón que definimos a cada vista manejada por el adaptador. Después de las variables de instancia, agregue un método constructor para el adaptador.
LetterAdapter público (Contexto c) // adaptador de instalación
Dentro del constructor, cree una instancia de la matriz alfabética y asigne las letras A-Z a cada posición.
letras = nueva cadena [26]; para (int a = 0; a < letters.length; a++) letters[a] = "" + (char)(a+'A');
Cada carácter se representa como un número para que podamos establecer las letras de la A a la Z en un bucle que comience en cero agregando el valor del carácter A a cada índice de matriz. Aún dentro del método del constructor, especifique el contexto en el que queremos inflar el diseño, que se pasará de la actividad principal más adelante..
letterInf = LayoutInflater.from (c);
Eclipse debería haber creado un getCount esquema del método. Actualice su implementación de la siguiente manera.
@Override public int getCount () return letters.length;
Esto representa el número de vistas, una para cada letra. No llamamos a los métodos en la clase de adaptador explícitamente dentro de la aplicación. Es el sistema operativo que los utiliza para construir el elemento de interfaz de usuario al que aplicamos el adaptador, que en este caso será la vista de cuadrícula.
Actualizar la implementación de getView como se muestra en el fragmento de código a continuación.
@ Anular la vista pública getView (int position, View convertView, ViewGroup parent) // crear un botón para la letra en esta posición en el alfabeto Button letterBtn; if (convertView == null) // infla el diseño del botón letterBtn = (Button) letterInf.inflate (R.layout.letter, parent, false); else letterBtn = (Button) convertView; // establece el texto a esta letra letterBtn.setText (letters [posición]); devolver la letra Btn;
Tómese un momento para dejar que todo se hunda. Esencialmente, este método construye cada vista asignada al elemento de la interfaz de usuario a través del adaptador. Inflamos el diseño del botón que creamos y configuramos la letra de acuerdo con la posición en el alfabeto que representa la vista. Hemos declarado que habrá 26 vistas asignadas, y la posición de cada una reflejará su posición en la matriz alfabética. Puede dejar los otros métodos en la clase de adaptador tal como son.
@Override public Object getItem (int arg0) return null; @ Anular pública long getItemId (int arg0) return 0;
Revise la clase de actividad del juego y agregue una variable de instancia para la vista de cuadrícula y el adaptador.
Cartas GridView privadas; LetterAdapter privado ltrAdapt;
También es necesario agregar otra declaración de importación.
importar android.widget.GridView;
En el onCreate Método, antes de la línea en la que se llama el jugar un juego método auxiliar, obtener una referencia a la vista de cuadrícula.
letters = (GridView) findViewById (R.id.letters);
Anexar el jugar un juegoImplementación actual con el siguiente fragmento de código. En este fragmento, creamos una instancia del adaptador y lo configuramos en la vista de cuadrícula.
ltrAdapt = new LetterAdapter (este); letters.setAdapter (ltrAdapt);
Ejecute la aplicación en el emulador y debería ver la interfaz de usuario. Sin embargo, todavía no podrás interactuar con los botones. En eso nos centraremos en la tercera y última entrega de esta serie..
Si ejecuta su aplicación en este punto, le presentará la interfaz del juego, pero aún no responderá a la interacción del usuario. Implementaremos la funcionalidad restante en la parte final de esta serie..
Cuando un jugador hace clic en los botones de letras, la aplicación debe verificar si la letra seleccionada está incluida en la palabra de destino y actualizar la respuesta y la horca en consecuencia. También presentaremos un cuadro de diálogo al jugador si gana o pierde, y también agregaremos un botón de ayuda. Finalmente, añadiremos navegación básica a través de una barra de acción..
