BORRADOR
Pong es un juego simple, que consiste en una paleta (que es controlada por el usuario) y una bola. El balón rebota en la paleta y tres paredes. Si la bola toca la pala, las ganancias de puntos de usuario, si el balón detrás de la paleta, el juego ha terminado.
Después de completar esta aplicación, usted tendrá una buena comprensión de los siguientes:
App Inventor medio ambiente: diseñador, editor de bloques, emulador y / o teléfono físico
App Inventor componentes: lona, botones, etiquetas, sprites de animación, los procedimientos sin parámetros, variables globales y condicionales
una selección de imágenes y sonidos en el App Inventor Mediateca
materiales de apoyo impresos
fragmentos de vídeo para ayudar a los estudiantes a través de esta lección (crédito: K.Roy)
Para abrir la ventana del Diseñador de App Inventor, vaya a http://appinventor.mit.edu e inicie sesión con un ID de Google (cuenta de Gmail).
Descargar y guardar una imagen de una barra y un archivo de sonido ding de la Mediateca
En la columna izquierda de la Designer, abra la paleta básica y primero arrastre un componente Label a la Viewer (# 1).En el panel Componentes, seleccione el componente Label1 y cambiar su nombre a "ScoreLabel" (# 2). En el panel de propiedades (a la derecha), elimine el texto de la pantalla de Label1 componente de reemplazar con "Score" (# 3) y cambiar su tamaño a 18, su anchura de 150 píxeles y la altura para ser 30 píxeles.
Desde la paleta básica, arrastre dos botones al Visor en las etiquetas. Cambie el nombre del primer botón de "botón Start" y cambiar su campo de texto a "Inicio". Cambie el nombre del segundo botón de "ResetButton" y cambiar su campo de texto de "Reset".
En la paleta Disposición de la pantalla, arrastre un componente de disposición horizontal para el espectador. Arrastre el ScoreLabel en la disposición horizontal en primer lugar, a continuación, arrastre los dos botones en el componente de disposición horizontal junto al componente ScoreLabel (se puede ver esto en el marco del panel Componentes también).
Desde la paleta básica, arrastre un componente lona y establecer el ancho a 300 y la altura a 390 píxeles bajo el panel de propiedades. Usted puede cambiar el color de fondo del lienzo para cualquier color que te gusta.
En el panel de la animación, arrastre una bola y componentes Sprite imagen en el componente de la lona en el visor (# 1).Resalte el componente Sprite imagen (# 2) y cambiar su imagen para paddle.gif (# 3). Puede descargar la imagen aquísi no se ha descargado aún.
Resalte el Ball1 en el panel Componentes y vaya al panel Propiedades para establecer el título y el 30, el intervalo a 50, el radio hasta 20, y la velocidad a 5. Usted puede cambiar el color de la bola (PaintColor) a cualquier color que te gusta.
CONSTRUIR: Bloques Editor
En la esquina superior derecha del Diseñador, haga clic en el botón Editor de bloques. Espere un momento mientras se carga el editor de bloques. Esto toma un poco de tiempo, y con frecuencia requiere que haga clic en "aceptar", "ok", o "mantener", como las descargas de programas Java en el ordenador. Si tienes problemas para cargar el Editor de bloques, visite http://www.java.com para ver si tiene instalado java, o para solucionar problemas de su instalación. Hay más información sobre cómo iniciar el Editor de bloques en las Instrucciones de instalación .
Una vez que el editor de bloques es abierta, hay varias opciones de funcionamiento a lo largo del lado izquierdo de la pantalla.
Desde la paleta Mi Bloques, abra el cajón Canvas1 y arrastre el bloque Canvas1.Touched en el área de trabajo. Este bloque viene automáticamente con tres bloques: el nombre de X, de Y y bloques touchedSprite nombre.
Desde la paleta Mi Bloques, abra el cajón ImageSprite1 y arrastre el bloque ImageSprite1.x conjunto en la toma de "do" del bloque Canvas1.Touched.
Desde la paleta Mi Bloques, abra el cajón de mi Definiciones y arrastre el bloque x valor en el borde del bloqueImageSprite1.x set. Ellos se encajarán como piezas de un rompecabezas magnéticos.
El valor de x y el valor bloques Ÿ se agregan automáticamente a Mi Definiciones cajón cuando se pone el bloque Canvas1.Touched en tu editor de bloques de área de trabajo. Whenver un toque se detecta en Canvas1, estas "variables" se asignarán los valores de las coordenadas X e Y de la posición del tacto.
Desde la paleta Mi Bloques, abra el cajón Ball1 y arrastre el bloque Ball1.EdgeReached sobre el área de trabajo, así como el bloque Ball1.Bounce. Una vez hecho esto, abra el cajón de mi Definiciones e insertar el bloque de extremo en el enchufe del bloque Ball1.Bounce que está pidiendo un valor límite. Rebote es una función incorporada para los sprites. Narra el sprite a rebotar en la pared.
El bloque Ball1.EdgeReached genera automáticamente la variable de borde en Mis Definiciones. Cuando la pelota llega a un borde que necesita una manera de informar de que la información para el programa principal. Lo hace mediante el almacenamiento de un número en la variable de borde. Ver la imagen de abajo para aprender acerca de App Inventor valores borde de la lona.
App Inventor asigna valores numéricos a los bordes de un lienzo de la siguiente manera:
arriba = 1, derecha = 3, abajo = -1, izquierda = -3
Rúbrica valores para objetos animados van en un círculo completo, como una brújula, con valores entre 0 y 360 grados.
Un objeto que se mueve hacia la parte superior de la pantalla, se dice que tiene un rumbo de 90 grados.
Desde la paleta Mi Bloques, abra el cajón StartButton y arrastre el bloque StartButton.Click hacia el espectador (# 1).Haga clic en el cajón Ball1 y arrastre un conjunto Ball1.Heading para bloquear y colocarlo en la sección "do" del bloqueStartButton.Click (# 2). De la gaveta de Matemáticas de la paleta, arrastre el bloque entero aleatorio llamada y añadirla al final de la manzana Ball1.Heading (# 3).
Saque un bloque número 123 de la gaveta de Matemáticas de la paleta. Enchufe en el primero en la zona "de" y el tipo "225" en el bloque en lugar de la "123". Haga esto una vez más para la zona "a" y escriba "315". Esto hará que la pelota tome en un rumbo entre 225 y 315 grados cuando se hace clic en el botón de inicio (véase sección diagrama anterior).
Del cajón Ball1, arrastre un conjunto Ball1.Speed para bloquear y colocarlo bajo el conjunto Ball1.Heading bloquear.Ponga un bloque número 123 en la "a" toma y el tipo de valor 5. Esto moverá el balón 5 píxeles en la dirección de su partida cada vez que sus garrapatas de reloj interno. El "reloj interno" de un objeto se llama su intervalo. El intervalo de un sprite pelota se estableció inicialmente en 1000 (milisegundos = 1 segundo), pero se puede cambiar esto en las propiedades del sprite. Recuerde, al principio de este tutorial hemos cambiado la propiedad Interval de Ball1 a 50 ms.
Del cajón Ball1, arrastre un bloque Ball1.MoveTo y se pone debajo del bloque Ball1.Speed. Del cajón de Matemáticas, arrastre un (/) bloque división y ponerlo en la toma de "x" en el bloque Ball1.MoveTo. Desde la paleta Mi Bloques, abra el cajón Screen1 y arrastre un bloque Screen1.Width y soltar que en el primer área en blanco en el bloque de la división. Haga clic en la segunda área en blanco y escriba "2" (un bloque número 123 aparece con "2" en el cuadro de texto). Del cajón Ball1, arrastre un bloque Ball.Radius y colocar eso en la zona "y" del bloque Ball1.MoveTo. Esto iniciará el balón en el centro de la pantalla cerca de la parte superior cada vez que se pulsa el botón de inicio.(¿Entiendes por qué El bloque "MoveTo" dice Ball1 para pasar a la coordenada x que es la mitad del ancho de la pantalla, y la coordenada y que es igual al radio de la bola en sí - que es un número bajo de modo el balón aparecerá muy cerca de la parte superior de la pantalla.)
Del cajón Ball1, arrastre un conjunto Ball1.Enabled bloquear. Haz clic en la pantalla al lado del bloque y haga clic en "Logic" desde el pequeño menú de color que aparece, a continuación, haga clic en "true". Esto iniciará la pelota en movimiento.
Del cajón Ball1, arrastre un Ball1.Interval configurado para bloquear y ponerlo en el número 10. Esto hará que la bola se mueva cada 10 milisegundos (y se moverá el número de píxeles especificados en la propiedad "velocidad"). Una vez creado el bloque de intervalo, mueva el conjunto Ball1.Enabled y Ball1.Interval bloques en la parte superior del bloque Ball1.Heading, para que aparezcan los primeros bloques del bloque de eventos StartButton.Click.
Del cajón ImageSprite1, arrastre un bloque cuando ImageSprite1.Dragged y colóquelo en el área de trabajo. Desde el mismo cajón, arrastre un ImageSprite1.MoveTo y colóquelo en el que ImageSprite1.Dragged. Haga clic en el cajón de mi Definiciones y arrastre un bloque de valores CurrentX y colóquelo en el hueco de "x". Del cajón ImageSprite1, arrastre un bloque ImageSprite1.Y y colóquelo en el hueco de "y". Esto moverá la pala en x (horizontal) al arrastrar, pero se mueve en y (vertical).
Del cajón Ball1, arrastre un bloque cuando Ball1.CollidedWith y colóquelo en un área abierta. Haga clic en la palabra "otros" en el bloque de nombre y tipo "ImageSprite1" (debe escribir el nombre de la imagen del sprite exactamente).
Del cajón Ball1, arrastre un conjunto Ball1.Heading para bloquear y colóquelo dentro del bloque Ball1.CollidedWith.Haga clic en el Built-In paleta y abrir el cajón de Matemáticas y arrastrar un bloque resta. Haga clic en la primera área en blanco y escriba "360". Haga clic en la paleta Mis Bloques, abra el cajón Ball1 y, a continuación, arrastre un bloqueBall1.Heading y colóquelo en la segunda área en blanco. Esto invertirá la pelota cuando golpea la pala. (¿Entiendes por qué? Mira el diagrama de la partida anterior para ver lo que sucede cuando se resta 360 de cualquier otra partida. Encabezamientos deben estar entre 0 y 360, y un número negativo es tratado como si es positiva.)
En el espacio de trabajo, encontrar el lugar donde se pone el bloque cuando Ball1.EdgeReached. Vamos a añadir algunos nuevos bloques a este evento, así que por ahora arrastra el bloque Ball1.Bounce lejos de Ball1.EdgeReachedpara que sea separado. Deje el bloque Ball1.Bounce suelto en el área de trabajo, por ahora.
Bajo el Built-In paleta, abra el cajón de control y arrastre un bloque ifelse. Del cajón de Matemáticas, arrastre un bloque de igual (=) y colocarlo en la toma de "test". Abra el cajón de mi Definiciones y arrastre un bloque de extremo valor y ponerlo en la primera área en blanco. Haga clic en la segunda área en blanco y escriba "1" (por la parte inferior o el borde sur). Esto pondrá a prueba para ver si el borde al que se llegó es el borde inferior de la tela.
Del cajón Ball1, arrastre un conjunto Ball1.Enabled para bloquear y colóquelo en el "entonces hacer" área del bloqueifelse. Haz clic a la derecha de que, para obtener el menú emergente, haga clic en "Logic" y selecciona "false". Esto evitará que la pelota se mueva cuando se pasa de la paleta. Además, arrastre un bloque scoreLabel.Text conjunto del cajón ScoreLabel, y adjuntarlo debajo del conjunto Ball1.Enabled bloque. Desde el Built-In paleta, abra el cajón de texto, y arrastre un bloque de texto y soltarlo después de la "a" (también se puede hacer clic en el área de trabajo para obtener el menú emergente y seleccione el texto). Haga clic en el texto y cambiarlo a "Game Over!" Este texto aparecerá en la pantalla en el ScoreLabel cuando la pelota se pasa de la paleta.
Ahora toma el bloque Ball1.Bounce huérfanos que se ha sentado a solas en su espacio de trabajo y colóquelo en el conector "else-do" del bloque ifelse. Todavía debe tener el bloque borde valor que se asigna a su toma de "borde".Este bloque entero ifelse hará que la pelota rebote fuera de todos los bordes excepto en la parte inferior (sur) una.Pasos 13 a 15 años deben hacer una serie de bloques que tiene este aspecto:
Desde el Built-In paleta, abra el cajón Definición, arrastre una variable def como bloque y colocarlo en un lugar abierto.Haga clic en y tipo "score" "variable" para cambiar el nombre de la variable para anotar. Ponga un bloque de números con el valor 0 en el mismo en el "como" socket. Esto crea una variable llamada "calificación" y establece su valor a 0.
Bajo el Built-In paleta, abra el cajón Definición y arrastre un bloque de procedimiento y colóquelo en un área abierta.Haga clic en "procedimiento" y cambiarle el nombre a "updateScore". Luego del cajón Definición, arrastre y un bloque denombre y haga clic en el "nombre" y escriba "scorevalue". Esto crea un parámetro para el procedimiento que se denomina "scorevalue". Un parámetro es una variable temporal que contiene un valor de un procedimiento. Se especifica el valor cuando se llama al procedimiento.
Desde la paleta Mi Bloques, abra la carpeta Mis Definiciones y arrastrar una puntuación global conjunto para bloquear y colóquelo en el área de "do" del procedimiento updateScore. De mis Definiciones arrastrar un bloque scorevalue valor y ponerlo en la zona "a". Esto establece la puntuación variable para el valor pasado.
Del cajón ScoreLabel, arrastre un bloque scoreLabel.Text conjunto y soltarlo después de la secuencia anterior. Desde el Built-In paleta, abra el cajón de texto, y arrastre un bloque de unión y soltarlo después de la "a". Establezca la primera área en blanco para el texto "Score:" y establecer la segunda área en blanco la valoración global de la paleta de mis bloqueos y las definiciones Mi cajón. Esto hará que el texto de la etiqueta de puntuación a una cadena que une "Score:" y el valor real de la variable score.
En la paleta de mi Blocks, abra el cajón de mi Definiciones y arrastre un bloque updateScore llamada y soltarlo al final del StartButton.Click al lado del bloque y el tipo 0 para actualizar el marcador a 0.
En la paleta de mi Blocks, abra el cajón de mi Definiciones, arrastre otra updateScore llamada y colóquelo en el bloqueBall1.CollidedWith. Bajo el Built-In paleta, abra el cajón Matemáticas arrastrar una adición (+) bloquean y soltarlo al final del bloque updateScore llamada. De las definiciones Mi cajón, arrastre un bloque puntuación global y soltarlo en la primera área en blanco. Haga clic en la segunda área en blanco y escriba 1. Esto incrementará la puntuación en 1.
En la paleta de mi Blocks, abra el cajón ResetButton y arrastre el cuándo ResetButton.Click a la zona abierta. Volver al conjunto de edificios rodeados por el bloque StartButton.Click que ha creado antes y resaltar todo el bloque proceso al hacer clic una vez en el bloque verde StartButton.Click, Ball1.Move a, y el control de hit (Ctrl) y la tecla c juntos para copiar el bloque. A continuación, haga clic en el área abierta (en cualquier lugar) y el control de hit (ctrl) y v llave juntos para pegar el bloque que ha copiado. Arrastre todo el bloque copiado en el ResetButton.Click.
Del cajón ScoreLabel, arrastre el ScoreLabel.Text para bloquear y colocarlo bajo el bloque anterior. Escriba "0" y arrastre el bloque de "0" a la cuenca vacía del ScoreLabel.Text bloquear. Además, abre el cajón de texto bajo el Built-In paleta y arrastre a cabo una combinación de bloques y soltarlo después de la ScoreLabel.Text. Establezca la primera área en blanco para el texto "Score:" y establecer la segunda área en blanco para el número cero. (Nota: ¿Sería también el trabajo de llamar a la UpdateScore procedimiento con 0 como parámetro scorevalue ¿Por qué o por qué no?)
¡Ya está! Por un poco de diversión, pruebe a cambiar el color o el tamaño de la bola o la barra para personalizar su aplicación.
Empaquete la aplicación para tu teléfono!
Tenga en cuenta que su aplicación desaparece cuando se conecta el teléfono desde el cable USB. Se debe a que la aplicación está siendo almacenado en el servidor y no en el teléfono. Siga estas instrucciones y empaquetar su aplicación para tu teléfono!
Reto 1: Cambio de la velocidad y el tamaño de la bola!
¿Se puede aumentar la velocidad de la pelota y disminuye el tamaño de la pelota cuando la puntuación se incrementa un incremento del 10? (Sugerencia: En el cajón de Matemáticas, el bloque restante (a, b) devuelve el resultado de dividir a entre b y tomando el resto, por ejemplo, el resto (11,5) = 1, el resto (-11, 5) = -. 1, el resto (11, -5) = 1, y el resto (-11, -5) = -1).
Reto 2: Adición de sonidos!
Descargar los archivos de audio de la App Inventor Mediateca página y subirlos a la moda. Hacer el "noink" juego de sonido cuando la pelota golpea el borde de la pared, el sonido "ta-da" cuando la velocidad de los aumentos de pelota, y el sonido del zumbador cuando el balón detrás de la paleta.
Más Desafíos:
Dar al jugador tres vidas para que puedan obtener tres intentos antes de "Game Over".
Si programa varias vidas, disminuir el marcador en 1 cada vez que el jugador pierde una vida.
Investigar lo que ocurre si se cambia el rango de números aleatorios para la rúbrica al hacer clic en el botón de inicio de inicio.
Trate de hacer que la aplicación responde a la titulación del teléfono en lugar de arrastrar la paleta
Mejorar este juego - fijar el "bug" que pasa si hace clic en el botón de arranque después de un juego ha terminado:
Tenga en cuenta que cuando el juego ha terminado, si el jugador hace clic en "Inicio" en lugar de "actualizar", el mensaje "Game Over" permanece en la pantalla hasta que el jugador anota el primer punto. ¿Cómo se puede arreglar? ¿Es realmente necesario tener un botón de encendido y el botón de reset?