prucommercialre.com


Cómo construir el Número del Adivino en su juego HTML5

Con números aleatorios, puede hacer interesantes juegos HTML5. Echa 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, un div es el elemento de salida principal, 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 cuántas vueltas que ha tomado. En cada paso, el equipo recuerda al usuario cómo muchas vueltas han sucedido.
  • Cuando el usuario ha adivinado correctamente, aparecerá un botón Reiniciar. Este botón 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 función especial de depuración. Al probar el programa, el desarrollador puede ver cuál es la respuesta correcta es, pero esta información está oculta para el usuario.
  • Una función init () comienza el juego. La función init () inicializa el juego. Se llama cuando el programa comienza primero y de nuevo cuando el usuario quiere empezar de nuevo.
  • Otra función se adjunta al botón. Cuando el usuario hace clic en el botón Guess Su Dale, conjetura del usuario actual se compara con la respuesta correcta, y una indirecta se devuelve al usuario.

    Cómo construir el Número del Adivino en su juego HTML5

Cómo diseñar el programa de juego

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

Cómo construir el Número del Adivino en su juego HTML5

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

  • Distribución general: Mientras que el diseño no está completamente decidido por este dibujo, es fácil ver el aspecto general.
  • Elementos con nombre: Cada elemento que tiene que tener un nombre se ha determinado, y los nombres están escritos en el documento. Algunos elementos (como el primer botón) no necesitan nombres porque no se hace referencia en el código.
  • Funciones de los botones: Cada botón será llamar a una función. El diagrama indica que funcionan cada botón llamará.
  • Planea Función: Cada función está prevista con una descripción en idioma Inglés de lo que la función va a hacer.
  • Las variables globales: Las variables que tendrán que ser compartida entre las funciones se describen.

En realidad es difícil crear un buen documento de diseño, pero al hacerlo hace que la programación 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 primero pueda concentrarse en lo que estás haciendo, y luego preocuparse por cómo va a hacerlo.

¿Cómo construir el HTML para el juego

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

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Charset meta = "UTF-8">
<Title> Número del Adivino </ title>
<Link rel = "stylesheet"
type = "text / css"
href = "numGuess.css" />
<Script type = "text / javascript"
src = "numGuess.js"> </ script>
</ Head>
<Body onload = "init ()">
<H1> Número del Adivino </ h1>
<Form>
<Fieldset>
<Div id = "salida">
Estoy pensando en un número entre 0 y 100.
Adivina mi número, y te diré si eres
demasiado alto, demasiado bajo, o correcta.
</ Div>
<Label for = ""> Su Guess </ label>
<Input type = "text"
id = "txtGuess">
<Tipo botón = "button"
onclick = "checkGuess ()">
comprobar su conjetura
</ Button>
<Tipo botón = "button"
id = "nuevo"
onclick = "init ()">
inténtalo de nuevo
</ Reset>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Es agradable para separar HTML, CSS y JavaScript, porque esta práctica le permite "divide y vencerás" 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 tarde.
  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 que los vínculos 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.

    El div salida es sólo un div ordinaria. Te lo pones en el interior del conjunto de campos por lo que mantendrá una relación visual con el resto del formulario. Puede poner el texto por defecto dentro de la div (aunque es probable que cambiar este texto más adelante). Debido a que el div se hará referencia a través de código, que necesita un atributo id.
  5. Hacer una área de entrada para adivinar el usuario.

    El usuario tendrá que escribir algún tipo de entrada numérica. Utilice un elemento de entrada para este propósito. Consulte la documentación de recordar el id de este elemento. (Lo hiciste hacer un documento de diseño, ¿no?) Es bueno agregar una etiqueta a la entrada por lo que el usuario sabe lo que se espera allí.
  6. Construir un botón para comprobar la conjetura.

    El usuario no comete una conjetura hasta que hace clic en el botón Check Your Guess. Por lo tanto, usted realmente necesita tener tal botón. Este botón no tiene un nombre, pero va a llamar a la función checkGuess ().
  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 para reiniciar. Este segundo botón sólo está disponible cuando el usuario ha adivinado la respuesta. Se crea con HTML ordinario y el uso de CSS y trucos de JavaScript para hacerla desaparecer y aparecer bajo demanda.