Cómo crear juegos en HTML basados en un navegador

Escrito por michael carroll | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear juegos en HTML basados en un navegador
create browser-based games at no cost (computer image by Ewe Degiampietro from Fotolia.com)

Muchos juegos de computadora basados ​​en un navegador que se encuentran en línea son creados utilizando Adobe Flash, una entorno costoso de autoría propietaria disponible casi exclusivamente para profesionales. Afortunadamente existe una alternativa a Flash que permite a los usuarios ocasionales crear juegos basados ​​en un navegador, sin costo alguno. Puedes crear una dinámica única y este tipo de juegos ​​incorporando el código JavaScript en páginas web con HTML normal.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Un editor de texto

Lista completaMinimizar

Instrucciones

  1. 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: <html> <body> Congratulations, you have set a new high score! <form name="hsform"> Please enter your name: <input type="text" name="hsname"> <input type="button" value="Submit"> </form> </body> </html>.

  2. 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. <head> <script language="JavaScript"> function reply() { alert("Thanks, " + document.hsform.hsname.value); } </script> </head>.

  3. 3

    Llama funciones JavaScript en respuesta a una acción del usuario en un formulario con atributos especiales de etiquetas <input>. 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: <input type="button" value="Submit" onclick="reply()">.

  4. 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): <script language="JavaScript"> var Coords = new Array(2); var IE = document.all?true:false; if (!IE) document.captureEvents(Event.MOUSEMOVE) document.onmousemove = updateCoords; var tempX = 0; var tempY = 0; function updateCoords(e) { if (IE) { // grab the x-y pos.s if browser is IE tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; } else { // grab the x-y pos.s if browser is NS tempX = e.pageX; tempY = e.pageY; } } function getCoords() { Coords[0] = tempX; Coords[1] = tempY; return Coords; } </script>.

  1. 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!"

  2. 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): <html> <head> <script language="JavaScript"> function onOff() { var state = document.getElementById("image").style.visibility; if (state=="hidden") { state="visible"; }else{ state="hidden"; } document.getElementById("image").style.visibility = state; } </script> </head> <body> <img src="image.jpg" id="image"> <form><input type="button" value="On/Off" onclick="onOff()"></form> </body> </html>.

  3. 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.

  4. 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 <script></script> 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): <style> img {position:absolute; top:100px; left:0px;} </style> <script language="JavaScript"> var imgX = 0, move; function onOff() { move = setInterval(animate,100); } function animate() { document.getElementById("image").style.left = imgX + ''px''; imgX = imgX + 10; if (imgX > 500){clearInterval(move);} } </script>.

  1. 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.

  2. 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 <script></script>: window.onload = mainFunctionName;

  3. 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.

  4. 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.

Consejos y advertencias

  • Presta atención a los distintos tipos de referencias DOM utilizadas en estos ejemplos y prueba con frecuencia el código con varios navegadores para asegurar la compatibilidad, ya que las normas del DOM no se aplican de la misma manera en todos los ellos (ver Referencias 2, página 107).

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles