Cómo crear juegos en HTML basados en un navegador (En 12 Pasos)

Paso 1

Usa elementos de formulario HTML para crear interfaces de usuario sencillas para tu juego. Puedes hacer botones, campos de texto, casillas de verificación, menús y botones radiales en un formulario HTML (ver Referencias 1, sección 17.4.1). Por ejemplo, las siguientes 10 líneas de HTML hacen una interfaz sencilla para recoger el nombre de un jugador: Congratulations, you have set a new high score!

Please enter your name:

.

Paso 2

Refiere los elementos del formulario HTML incrustado en el código JavaScript usando el Document Object Model (ver Referencias 2, capítulo 8). Por ejemplo, la siguiente función de Javascript recupera el nombre del jugador en el campo de texto creado en el paso 1. Inserta este código entre las líneas primera y segunda del código del paso 1. .

Paso 3

Llama funciones JavaScript en respuesta a una acción del usuario en un formulario con atributos especiales de etiquetas . Por ejemplo, para hacer que el botón "Enviar" creado en el paso 1 llame a la función de JavaScript agregado en el paso 2, cambia el código HTML del botón por lo siguiente: .

Paso 4

Utiliza este código, un ejemplo modificado de The JavaScript Source, para determinar las coordenadas del cursor del mouse del usuario en la ventana del navegador (ver Referencias 3): .

Paso 1

Utiliza elementos de formulario para proporcionar información al usuario, así como recibir aportes. Por ejemplo, la siguiente línea de código JavaScript utiliza el elemento de entrada de texto creado en la "Entrada de usuario" para la producción textual: document.hsform.hsname.value = "¡Gracias por jugar!"

Paso 2

Oculta y muestra imágenes u otros elementos en los documentos HTML haciendo referencia a la propiedad de estilo en el DOM, como en esta página de ejemplo adaptado del libro de Goodman "Libro de recetas de JavaScript y DHTML" (ver Referencias 2, página 361):

.

Paso 3

Manipula muchos otros elementos de la ventana del navegador con referencias DOM en el código JavaScript. Por ejemplo, puedes cambiar el tamaño de los marcos, hacer que la página se desplace, cambiar el color de fondo y mostrar los cuadros de diálogo de alerta como se ve en la "Entrada de usuario". Mira la sección "Recursos" para obtener una lista de ejemplos de código que demuestran la gran amplitud de la influencia que puedes ejercer sobre el navegador del usuario con JavaScript.

Paso 4

Utiliza referencias DOM, mecanismos especiales de tiempo JavaScript, CSS y las propiedades de estilo para animar sin problemas imágenes u otros objetos HTML a través de la ventana del navegador. Reemplaza el bloque en el código de ejemplo del paso 2 con el siguiente para crear una animación simple, como una adaptación del "Libro de recetas de JavaScript y DHTML" (ver Referencias 2, página 417): .

Paso 1

Une las funciones de entrada y salida en el código JavaScript con una función principal que controle la ejecución del juego.

Paso 2

Ejecuta automáticamente la función principal tan pronto como se carga la página mediante el uso de la siguiente línea de JavaScript, ubicada justo después de tu función principal dentro del bloque : window.onload = mainFunctionName;

Paso 3

Usa la función de alerta () en JavaScript que te ayudará a depurar tu juego a medida que lo creas. Basta con colocar diferentes alertas en diferentes puntos de tu código; a continuación, abre la página y rastrea la ejecución por el orden de las alertas. También puedes mostrar útiles datos de depuración en cada ventana de alerta, tales como el valor de un contador de bucles u otra variable.

Paso 4

Publica tu documento HTML y las imágenes en un sitio web, e invita a la gente a jugar a tu juego, sin necesidad de complementos (plug-in) para Flash.