Video: Juego de Snake en javascript HTML5 Canvas

Con números aleatorios, puede hacer interesantes juegos HTML5. Echar un vistazo a un juego simple que utiliza HTML, CSS y javascript juntos. Este juego tiene una serie de características interesantes:

• Utiliza la página web como la interfaz. Al igual que muchos programas javascript, utiliza una página web como la interfaz de usuario. Un elemento de entrada se utiliza para la entrada, una div es el elemento principal de salida, y un botón desencadena todas las acciones.

• Utiliza CSS para el estilo. Las distintas partes de la página se formatean con CSS. El CSS se almacena en una hoja de estilos externa para mayor comodidad y reutilización.

• Se le dice al usuario el número de vueltas que ha tomado. En cada paso, el equipo recuerda al usuario cómo han sucedido muchas vueltas.

• Cuando el usuario ha adivinado correctamente, aparece un botón de reinicio. Thisbutton se oculta en un primer momento, y sólo aparece cuando es necesario.

• La respuesta correcta está disponible para los programadores a través de una característica especial de depuración. Mientras que las pruebas del programa, el desarrollador puede ver cuál es la respuesta correcta es, pero esta información está oculta para el usuario.

• Un en eso() función de que comience el juego. los en eso() función inicializa el juego. Se llama cuando el programa comienza primero y otra vez cuando el usuario quiere empezar de nuevo.

• Otra función está unida a la botón. Cuando el usuario hace clic en el botón Comprobar su conjetura, conjetura del usuario actual se compara con la respuesta correcta, y una indirecta se devuelve al usuario.

  

Cómo diseñar el programa de juego

Cuando se construye un programa complejo, es necesario comenzar con un plan de diseño.

Gran parte del trabajo en el desarrollo del juego ocurre antes de comenzar la programación. Si se diseña bien el juego, la programación es mucho más fácil de hacer. Un diseño del juego le ayuda a comprender muchas cosas sobre el juego antes de comenzar a escribir código:

Disposición general: Mientras que la disposición no está completamente decidido por este dibujo, es fácil ver el aspecto general.

En realidad es difícil crear un buen documento de diseño, pero al hacerlo hace que la programación de un poco más fácil. Es difícil de entender lo que estás tratando de hacer, y también es difícil de averiguar cómo hacerlo. Tener un documento de diseño separa esos dos procesos para que pueda concentrarse en la primera qué que está haciendo, y luego preocuparse cómo vas a hacerlo.

¿Cómo construir el código HTML para el juego

El código HTML para el juego de adivinar el número es bastante fácil de escribir si usted ha diseñado el juego en el papel primero. Aquí está el código:

Video: Android Studio Tutorial Español 1.4 | Juego Android Adivina el numero

número del Adivino

Es agradable para separar HTML, CSS y javascript, porque esta práctica le permite “dividir y conquistar” un gran problema en una serie de problemas más pequeños. Estas son las principales características del documento HTML:

1. Enlace a la CSS en un archivo externo.

   Por el momento, la CSS no es crítica, por lo que lo mueve fuera en un archivo separado para que pueda trabajar con él más adelante.

2. Externalizar el código javascript.

   También mover el código javascript en un archivo externo, de modo que usted no tiene que preocuparse por ello todavía. En el código HTML, simplemente hacer las conexiones con los archivos externos.

3. Construir un formulario como el componente principal de la página.

   El aspecto más importante de esta página es la forma. Como la mayoría de las formas, que tendrá un conjunto de campos, etiquetas, elementos de entrada y botones.

4. Crear un div para la salida.

   La salida div es sólo un ordinario div. Lo pones en el interior del fieldset por lo que mantendrá una conexión visual con el resto del formulario. Puede poner el texto predeterminado en el interior del div (Aunque es probable que cambiar este texto más adelante). Porque el div se hará referencia a través de código, se necesita una carné de identidad atributo.

5. Hacer un área de entrada para la conjetura del usuario.

   El usuario tendrá que escribir una especie de introducción numérica. Utilizar un elemento de entrada para este propósito. Consulte la documentación de recordar la carné de identidad de este elemento. (Tú hizo hacer un documento de diseño, ¿verdad?) Es bueno añadir una etiqueta a la entrada para que el usuario sepa lo que se espera allí.

6. Construir un botón para comprobar la conjetura.

   El usuario no comete una conjetura hasta que se hace clic en el botón Comprobar el Guess. Por lo tanto, usted realmente necesita tener un botón de este tipo. Este botón no necesita un nombre, pero va a llamar a la checkGuess () función.

7. Construir un segundo botón para volver a empezar.

   Una característica interesante de este programa es un botón que permite al usuario reiniciar. Este segundo botón sólo está disponible cuando el usuario ha adivinado la respuesta. Se crea con HTML estándar y el uso de CSS y javascript trucos para que desaparezca y aparezca en la demanda.