Tabla de contenidos

Intro

En este tutorial, te voy a mostrar cómo crear una (muy) la simple demostración juego de rol que funciona en todas las plataformas de soporte HTML5, usando los LimeJS marco de código abierto de JavaScript.

Este marco le permite crear rápidamente juegos simples que funcionan independientemente de la resolución de la pantalla de su dispositivo (ordenador portátil, teléfono, televisión). Puede jugar a estos juegos a través de HTML5 apoyo a los navegadores web, o puede convertirlos en aplicaciones móviles nativas utilizando titanio o Phonegapp, y someterlos a las distintas tiendas de aplicaciones “” por ahí.

Juegos de rol

¿Cuál es el aspecto más importante de un juego de rol? Estoy seguro de que cada uno tendrá su propia opinión sobre esto. Algunos podrían decir los personajes, su evolución a veces errática y parcelas engañosas. Algunos otros podrían decir que la exploración de enormes mundos extraños. O tal vez la lucha contra extrañas criaturas creadas por alguna mente disparo para nuestro disfrute. No importa la respuesta a esta pregunta, creo que todos estamos de acuerdo en que los siguientes elementos no menos importantes son los siguientes:


  • Mundo
  • Caracteres
  • Monstruos
  • Historia

    cubrirá a estos elementos, a excepción de la “Historia” uno, ya que es realmente depende de ti para llegar a algo interesante.

    Tutorial requisitos

    • Conceptos básicos de HTML y Javascript conocimiento
    • Nociones básicas de la programación orientada a objetos
    • Un editor de texto o IDE para crear y editar código
    • Un poco de amor para los juegos de rol!

      LimeJS

      Vamos a utilizar un marco programador de juegos HTML5 impresionante llamada LimeJS. Este marco hace que sea fácil para empezar a hacer sus propios juegos, ya que viene con un buen apoyo para aspectos tales como imágenes representación, interacción con el usuario para pantallas táctiles y no táctiles, y muchos otros aspectos del juego dev (animaciones, física 2D, etc.) . Por otra parte, LimeJS tiene una comunidad grande y abierto.

      En este tutorial no vamos a entrar muy profundamente en la instalación del marco o usando toda ella de poder. Puede obtener las instrucciones de instalación de la guía oficial aquí.

      Si desea una explicación más detallada del proceso de instalación, he creado un capítulo completo sobre cómo instalar el marco para Windows, Mac y Ubuntu en mi curso basado en video [HTML5 Mobile desarrollo de juegos para principiantes, donde se puede también aprender mucho más acerca de cómo crear juegos con este marco. Voy a hablar más sobre este curso al final de este tutorial.

      Resumen de la instalación

      • Instalar Python
      • Instalar GIT
      • Instalar SVN
      • Descargar el archivo ZIP de www.limejs.com o clonar su Github repo
      • Cambiar el nombre de la carpeta que hemos descargado como “limejs”, estaré refiriendo a ella con ese nombre en este tutorial
      • Entra en la carpeta limejs usando su terminal. Tipo: bin / lime.py init

        (esto va a descargar un montón de dependencias) Si se encuentra con LimeJS Instalación de problemas, la comunidad es otro excelente lugar para buscar guías de ayuda y el sistema operativo específico.

        Creación de un nuevo proyecto

        Una vez que se ha instalado LimeJS, podemos crear un nuevo proyecto, vaya a nuestros limejs carpeta mediante el terminal y escribiendo:
        bin / lime.py crear rpg_tutorial1bin / lime.py crear rpg_tutorial

        Esto creará una carpeta llamada “rpg_tutorial” en la carpeta limejs. Ahí es donde todos nuestros archivos residirán.

        Tenga en cuenta que si se mueve esta carpeta en cualquier otro lugar, el juego no se ejecutará. Esto es porque mientras estamos desarrollando nuestro proyecto necesitará las bibliotecas en nuestra carpeta limejs. Una vez que hemos terminado con un proyecto, es necesario “compilación”, y archivos de la JS resultante se puede poner en cualquier lugar que desee.

        Mundo del Juego

        Vamos a empezar por la creación de nuestro mundo, que es una imagen hecha con este juego de fichas. El juego de fichas ha sido creado por Sharm y puesto en libertad con la licencia CC BY 3.0, lo que significa que es libre de utilizar esto para cualquier propósito que desee, siempre y cuando mantengamos este aviso y dar atribución a Sharm (gracias Sharm, quienquiera que seas! ).

        El juego tendrá una resolución de 352 × 256. El mapa de juego tiene la misma resolución (no vamos a hacer el desplazamiento en este tutorial). Puede descargar la imagen del mapa del juego desde este enlace y copiarlo a la carpeta “rpg_tutorial”.

        Hagamos un poco de codificación. Abrir los rpg_tutorial.js archivos, borrar todos los contenidos de TI (que es un proyecto de juego de muestra, vale la pena echarle un vistazo para obtener una introducción al marco) y copiar los siguientes:
        // establecer goog.provide principal espacio de nombres ( ‘rpg_tutorial’); // obtener los requisitos goog.require ( ‘lime.Director’); goog.require ( ‘lime.Scene’); goog.require ( ‘lime.Layer’); // punto de entrada rpg_tutorial.start = function () {director var = new lime.Director (document.body, 352256); director.makeMobileWebAppCapable (); director.setDisplayFPS (false); var mapScene = nuevo lime.Scene (); director.replaceScene (mapScene); } // 123456789101112131415 conjunto principal goog.provide espacio de nombres ( ‘rpg_tutorial’); // obtener los requisitos goog.require ( ‘lime.Director’); goog.require ( ‘lime.Scene’); goog.require ( ‘lime.Layer ‘); // punto de entrada rpg_tutorial.start = function () {vardirector = newlime.Director (document.body, 352256); director.makeMobileWebAppCapable (); director.setDisplayFPS (false); varmapScene = newlime.Scene (); director. replaceScene (mapScene);}

        Lo que he introducido no existe prácticamente un esqueleto básico para un nuevo proyecto. Para una buena introducción a todos estos elementos no es la guía oficial.

        Principalmente, lo que está sucediendo aquí es:


        • Nos están diciendo que el resto del proyecto que el espacio de nombres de los objetos declarados aquí es “rpg_tutorial”. Un espacio de nombres es un identificador único que le ayuda a distinguir los objetos en este archivo de objetos que podrían tener el mismo nombre en otros archivos (imagina que crea un “círculo”, ya existe un objeto “Círculo” en el marco, pero serían no debe confundirse como el suyo sería “your_namespace.Circle”, mientras que el que viene con el marco se llama “limejs.Circle”).
        • Algunos objetos se importan de manera que puedan ser utilizados aquí.
        • Declaramos el “director”, que es el objeto que hace más o menos las mismas funciones como director de la película: definimos los aspectos principales, decirle al juego que la escena que estamos jugando ahora, etc.
        • Crear la escena actual, que es donde sucede la acción.

          Hasta el momento esto no hace nada, así que vamos a mostrar nuestro mapa después de la escena ha sido declarado:
          var mapScene = new lime.Scene (); var mapLayer = new lime.Layer () setPosition (0,0) .setRenderer (lime.Renderer.CANVAS) .setAnchorPoint (0,0);. ​​var gamemap = new lime.Sprite () .setSize (352256) .setFill ( ‘map.png’) setPosition (0,0) .setAnchorPoint (0,0);. ​​mapLayer.appendChild (gamemap); mapScene.appendChild (mapLayer); 1234567varmapScene = newlime.Scene (); varmapLayer = newlime.Layer () setPosition (0,0) .setRenderer (lime.Renderer.CANVAS) .setAnchorPoint (0,0);.. vargameMap = newlime.Sprite setSize () (352,256) .setFill (‘ map.png ‘) setPosition (0,0) .setAnchorPoint (0,0);. ​​mapLayer.appendChild (gamemap); mapScene.appendChild (mapLayer);

          Ahora abra el archivo rpg_tutorial.html en su navegador web, debe ver la imagen del mapa del juego. Lo que estamos haciendo aquí es la creación de un nuevo objeto Sprite, que puede ser una imagen o simplemente un rectángulo con algunos de llenado (colores, gradientes). Un punto (0,0) de medios que utilizaremos la esquina superior izquierda de la imagen para definir su posición de anclaje (coordenadas ir desde la esquina superior izquierda de las cosas en este marco, y con el trabajo con la lona en general). Posición (0,0) significa que estamos poniendo punto de anclaje de la imagen a la esquina superior izquierda de la escena. Básicamente, la imagen cubrirá toda la pantalla.


          Note como si cambia el tamaño de la ventana del navegador, la imagen cambiará de tamaño también. Cosas interesantes. Lo que suelo hacer, así es que da la etiqueta de “cuerpo” en el archivo HTML del color negro usando CSS, eso es sólo mi preferencia aquí.

          La “capa” que hemos creado es un contenedor invisible donde ponemos los elementos. Una capa en sí puede ser animado, movido, cambiar de tamaño, etc Estamos utilizando el lienzo sobre esta capa, en lugar de utilizar el DOM.

          héroe

          ¿Qué sería de los juegos de rol sin un héroe? ¿Quién será entonces soportar las vicisitudes de un mundo decadente lleno de monstruos? Bueno, vamos a crear entonces. Lo que haremos es crear un héroe y que él se mueve a donde hacemos clic o toque en el mapa, ¿Qué le parece?

          Vamos a utilizar otro objeto Sprite para representar el héroe (Os animo a crear objetos personalizados para cada entidad del juego). El archivo de imagen que usaremos se etiqueta un dominio público y puede ser descargado aquí. Copiarlo a la carpeta rpg_tutorial.

          El código del objeto rpg_tutorial.start ahora será:
          rpg_tutorial.start = function () {director var = new lime.Director (document.body, 352256); director.makeMobileWebAppCapable (); director.setDisplayFPS (false); var mapScene = nuevo lime.Scene (); var mapLayer = new lime.Layer () setPosition (0,0) .setRenderer (lime.Renderer.CANVAS) .setAnchorPoint (0,0).; var gamemap = new lime.Sprite setSize () (352,256) .setFill ( ‘map.png’) setPosition (0,0) .setAnchorPoint (0,0)..; héroe var = new lime.Sprite setSize () (40,36) .setFill ( ‘hero.png’) setPosition (100100)..; mapLayer.appendChild (gamemap); mapLayer.appendChild (héroe); mapScene.appendChild (mapLayer); director.replaceScene (mapScene); } 1234567891011121314rpg_tutorial.start = function () {vardirector = newlime.Director (document.body, 352256); director.makeMobileWebAppCapable (); director.setDisplayFPS (false); varmapScene = newlime.Scene (); varmapLayer = newlime.Layer () .setPosition (0,0) .setRenderer (lime.Renderer.CANVAS) .setAnchorPoint (0,0);.. vargameMap = newlime.Sprite () ( ‘map.png’) setPosition setSize (352256) .setFill (0, 0) .setAnchorPoint (0,0); varhero = newlime.Sprite setSize () (40,36) .setFill ( ‘hero.png’) setPosition (100,100);.. mapLayer.appendChild (gamemap); mapLayer.appendChild ( héroe); mapScene.appendChild (mapLayer); director.replaceScene (mapScene);}


          Queremos que el héroe se mueva hacia donde hacemos clic o toque, para lo cual necesitamos para enlazar el evento y el “clic” “toque” en nuestro mapa, de manera que las héroe se mueve allí donde el usuario hace clic (o tocados). Esto se hace en LimeJS con el siguiente código, que vamos a añadir después de nuestra definición héroe:
          goog.events.listen (gamemap, [ ‘mousedown’, ‘touchstart’], la función (e) {movimiento var = new lime.animation.MoveTo (e.position.x, e.position.y) .setDuration (1) ; hero.runAction (movimiento);}); 1234goog.events.listen (gamemap, [ ‘mousedown’, ‘touchstart’], la función (e) {varmovement = newlime.animation.MoveTo (e.position.x, e. position.y) .setDuration (1); hero.runAction (movimiento);});

          Algunos comentarios:


          • Mediante el uso de goog.events.listen que se unen un objeto de juego (en este caso el mapa), con eventos, en este caso, pulsando el ratón o tocar la pantalla.
          • Creamos un nuevo “animación”, que es un movimiento para las coordenadas de destino, que se llevará a 1 segundo y completa.
          • La animación se aplica sobre el héroe.

            Idealmente, uno debe crear archivos separados para cada objeto del juego. Lo haremos en un poco, pero en aras de la simplicidad y la longitud de la dejaré hasta usted para organizar el código mejor. La siguiente cosa que haremos a nuestro carácter está dando algunas características:
            hero.life = 20; hero.money = 100; hero.attack = 5; 123hero.life = 20; hero.money = 100; hero.attack = 5;

            Monsters

            Es hora de que aparezca la maldad. Vamos a crear un monstruo y pusieron en el mapa. El archivo de imagen es un ser de dominio público y se puede llegar desde aquí. Después de dejar la definición héroe hora de añadir el sprite monstruo y le dan algunas propiedades:
            var monstruo = new lime.Sprite setSize () (40,36) .setFill ( ‘monster.png’) setPosition (200,200);.. monster.life = 15; monster.money = 10; monster.attack = 1; mapScene.appendChild (monstruo);. 12345varmonster = newlime.Sprite setSize () (40,36) .setFill ( ‘monster.png’) setPosition (200,200);. monster.life = 15; monster.money = 10; monstruo. ataque = 1; mapScene.appendChild (monstruo);


            marca Vamos hacerle frente de manera que si el usuario toca el monstruo, seremos llevados a una “escena de lucha”. No va a ser tan elaborado como se esperaba, pero puede ser utilizado como motivo de sus propias mejoras adicionales. Primero vamos a crear la escena de lucha. Tenemos que incluir el archivo LinearGradient de llenar el cielo con una transición de color lineal:
            goog.require ( ‘lime.fill.LinearGradient’); 1goog.require ( ‘lime.fill.LinearGradient’);

            Después de la definición monstruo de añadir el siguiente código para mostrar la escena de lucha con nuestro héroe y el monstruo (de nuevo, su tarea es hacer este código modular, etc):
            var fightScene = new lime.Scene () setRenderer ().; var fightLayer = new lime.Layer () setPosition (0,0) .setRenderer (lime.Renderer.CANVAS) .setAnchorPoint (0,0);. ​​sky_gradient var = new lime.fill.LinearGradient () setDirection (0,0. , 1,1) .addColorStop (0, ‘# B2DFEE’) addColorStop (1, ‘# 0000CD’);.. cielo var = new lime.Sprite setSize () (352,128) .setPosition (0,0) .setAnchorPoint ( 0,0) .setFill (sky_gradient);. hierba var = new lime.Sprite setSize () (352,128) .setPosition (0128) .setAnchorPoint (0,0) .setFill ( ‘rgb (0,125,0)’); fightLayer .appendChild (cielo); fightLayer.appendChild (hierba); // mostrar las imágenes del monstruo y herovar fighterOne = new lime.Sprite setSize () (hero.getSize ()) setFill (hero.getFill ())… setPosition (50210); var fighterTwo = new lime.Sprite () setSize (monster.getSize ()) setFill (monster.getFill ()) setPosition (280,210);… fightLayer.appendChild (fighterOne); fightLayer.appendChild (fighterTwo ); fightScene.appendChild (fightLayer); 12345678910111213141516varfightScene = newlime.Scene () setRenderer ();. varfightLayer = newlime.Layer () setPosition (0,0) .setRenderer (lime.Rendere. r.CANVAS) .setAnchorPoint (0,0);. ​​varsky_gradient = newlime.fill.LinearGradient () setDirection (0,0,1,1) .addColorStop (0, ‘# B2DFEE’) addColorStop (1, ‘# 0000CD. ‘); Varsky = newlime.Sprite setSize () (352,128) .setPosition (0,0) .setAnchorPoint (0,0) .setFill (sky_gradient);.. vargrass = newlime.Sprite setSize () (352,128) .setPosition ( 0128) .setAnchorPoint (0,0) .setFill ( ‘RGB (0,125,0)’); fightLayer.appendChild (cielo); fightLayer.appendChild (hierba); // muestran las imágenes del monstruo y herovarfighterOne = newlime.Sprite () .setSize (hero.getSize ()) setFill (hero.getFill ()) setPosition (50210);…. varfighterTwo = newlime.Sprite () setSize (monster.getSize ()) setFill (monster.getFill () ) .setPosition (280.210); fightLayer.appendChild (fighterOne); fightLayer.appendChild (fighterTwo); fightScene.appendChild (fightLayer);

            podemos comprobar cómo se busca haciendo que el director de ponerlo en su lugar usando replaceScene como lo hicimos antes con “mapScene”.

            Ok! Añadamos ahora la detección de colisiones de modo que si nuestro valiente héroe toca el monstruo, la escena de lucha entra en juego. Incluir este archivo, que contiene los métodos biblioteca matemática Google de cierre:
            goog.require ( ‘goog.math’); 1goog.require ( ‘goog.math’);

            A continuación, añadir este código después de la definición escena de lucha:
            hero.inFightScene = false;! lime.scheduleManager.schedule (function (dt) {if (this.inFightScene) {if (goog.math.Box.intersects (this.getBoundingBox (), monster.getBoundingBox ())) {director .replaceScene (fightScene); fightLayer.setDirty (255) hero.inFightScene = true;}}}, héroe); 1234567891011hero.inFightScene = false; lime.scheduleManager.schedule (function (dt) {if (! this.inFightScene) { si (goog.math.Box.intersects (this.getBoundingBox (), monster.getBoundingBox ())) {director.replaceScene (fightScene); fightLayer.setDirty (255) hero.inFightScene = true;}}}, héroe);

            Hay mucho sucediendo aquí chicos!


            • Estamos utilizando el scheduleManager, que será ejecutado periódicamente. El dt parámetro contiene el tiempo transcurrido entre iteraciones.
            • Si el jugador no está ya en la escena de lucha, estamos usando objeto “caja” de Cierre Biblioteca para comprobar si hay colisión entre las cajas de ambos caracteres (ver cómo se extrae el cuadro delimitador de cada uno).
            • Si los personajes son, en efecto colisionando, reemplace la escena.
            • El método setDirty () es sólo una solución para un error al sustituir marco de una escena a la lona.


              Todo listo! Tenemos una escena muy elegante pelea en su lugar, pero ¿qué pasa con la propia lucha? Bueno, puede crear sus propios algoritmos de combate que involucran todo tipo de elecciones del jugador, los atributos de los personajes, artículos, etc. Hay una gran cantidad de material en línea sobre peleas de rol que se pueden utilizar como fuente de inspiración. Lo que haré ahora es compensar un algoritmo de lucha muy simple, que será lanzando básicamente un número aleatorio y teniendo el atributo “ataque” de atributo de la vida del enemigo. Pero antes de eso, vamos a mostrar los atributos de los personajes en nuestra escena de lucha, y añadir algunas opciones de combate.

              Vamos a incluir este archivo para crear sencillos botones:
              goog.require ( ‘lime.GlossyButton’); 1goog.require ( ‘lime.GlossyButton’);

              La definición escena de la pelea va a tener este aspecto:
              var fightScene = new lime.Scene () setRenderer ().; var fightLayer = new lime.Layer () setPosition (0,0) .setRenderer (lime.Renderer.CANVAS) .setAnchorPoint (0,0);. ​​sky_gradient var = new lime.fill.LinearGradient () setDirection (0,0. , 1,1) .addColorStop (0, ‘# B2DFEE’) addColorStop (1, ‘# 0000CD’);.. cielo var = new lime.Sprite setSize () (352,128) .setPosition (0,0) .setAnchorPoint ( 0,0) .setFill (sky_gradient);. hierba var = new lime.Sprite setSize () (352,128) .setPosition (0128) .setAnchorPoint (0,0) .setFill ( ‘rgb (0,125,0)’); fightLayer .appendChild (cielo); fightLayer.appendChild (hierba); // mostrar las imágenes del monstruo y herovar fighterOne = new lime.Sprite setSize () (hero.getSize ()) setFill (hero.getFill ())… setPosition (50210);… var fighterTwo = new lime.Sprite () setSize (monster.getSize ()) setFill (monster.getFill ()) setPosition (280,210); // etiquetas con caracteres statsvar labelFighterOneLife = new lime.Label () .setText ( ‘vida:’ + hero.life) .setPosition (50150); var labelFighterOneAttack = new lime.Label () setText. ( ‘Ataque:’ + hero.attack) .setPosition (50170); var labelFighterTwoLife = norte ew lime.Label () setText ( ‘vida:’ + monster.life). .setPosition (280,150); var labelFighterTwoAttack = new lime.Label () setText ( ‘Ataque:’ + monster.attack) .setPosition (280170). ; // alguna optionsvar attackButton = new lime.GlossyButton setSize () (70,20) .setPosition (40,10) .setText ( ‘Ataque’) setColor ( ‘# B0171F’)..; var = new runButton lime.GlossyButton setSize () (70,20) .setPosition (120,10) .setText ( ‘Ejecutar’) setColor ( ‘# 00CD00’)..; fightLayer.appendChild (fighterOne); fightLayer.appendChild (fighterTwo); fightLayer.appendChild (labelFighterOneLife); fightLayer.appendChild (labelFighterOneAttack); fightLayer.appendChild (labelFighterTwoLife); fightLayer.appendChild (labelFighterTwoAttack); fightLayer.appendChild (attackButton); fightLayer .appendChild (runButton); fightScene.appendChild (fightLayer);. 12345678910111213141516171819202122232425262728293031323334353637383940414243varfightScene = newlime.Scene () setRenderer ();. varfightLayer = newlime.Layer () setPosition (0,0) .setRenderer (lime.Renderer.CANVAS) .setAnchorPoint (0,0);. ​​varsky_gradient = newlime.fill.LinearGradient () setDirection (0,0,1,1) .addColorStop (0, ‘# B2DFEE’) addColorStop (1, ‘# 0000CD’);. Varsky = newlime . .Sprite setSize () (352,128) .setPosition (0,0) .setAnchorPoint (0,0) .setFill (sky_gradient);. vargrass = newlime.Sprite setSize () (352,128) .setPosition (0128) .setAnchorPoint (0 , 0) .setFill ( ‘RGB (0,125,0)’); fightLayer.appendChild (cielo); fightLayer.appendChild (hierba); // muestran las imágenes del monstruo y h erovarfighterOne = newlime.Sprite () setSize (hero.getSize ()) setFill (hero.getFill ()) setPosition (50210);….. varfighterTwo = newlime.Sprite () setSize (monster.getSize ()) setFill ( . monster.getFill ()) setPosition (280,210); // etiquetas con caracteres statsvarlabelFighterOneLife = newlime.Label () setText ( ‘vida:’. + hero.life) .setPosition (50150); varlabelFighterOneAttack = newlime.Label (). setText ( ‘Ataque:’ + hero.attack) .setPosition (50170); varlabelFighterTwoLife = newlime.Label () setText ( ‘vida:’ + monster.life). .setPosition (280,150); varlabelFighterTwoAttack = newlime.Label (). setText ( ‘Ataque:’ + monster.attack).. .setPosition (280,170); // algunos optionsvarattackButton = newlime.GlossyButton setSize () (70,20) .setPosition (40,10) .setText ( ‘ataque’) setColor ( ‘# B0171F’);.. varrunButton = newlime.GlossyButton setSize () (70,20) .setPosition (120,10) .setText ( ‘Run’) setColor ( ‘# 00CD00’); fightLayer.appendChild (fighterOne) ; fightLayer.appendChild (fighterTwo); fightLayer.appendChild (labelFighterOneLife); fightLayer.appendChild (labelFighterOneAttack); fightLa yer.appendChild (labelFighterTwoLife); fightLayer.appendChild (labelFighterTwoAttack); fightLayer.appendChild (attackButton); fightLayer.appendChild (runButton); fightScene.appendChild (fightLayer);


              vamos a implementar el comportamiento “Ejecutar” uniendo el botón “clic” o “contacto” con volver a la escena va mapa. Agregue la siguiente definición después de la escena de la pelea.
              // huir, cowardgoog.events.listen (runButton, [ ‘mousedown’, ‘touchstart’], la función (e) {// volver al mapa director.replaceScene (mapScene); mapLayer.setDirty (255) // mover el héroe lejos del monstruo, o la escena de la pelea se activará de nuevo // esto es sólo una rápida manera, no elegante de hacer esto PosActual = hero.getPosition ();! hero.setPosition (currentPos.x-60, currentPos.y-60); hero.inFightScene = false;}); 1234567891011121314 // huir, cowardgoog.events.listen (runButton, [ ‘mousedown’, ‘touchstart’], la función (e) {// volver a la mapdirector.replaceScene (mapScene); mapLayer.setDirty (255) // mover el héroe lejos del monstruo, o la escena de la pelea se activará de nuevo // esto es sólo una rápida manera, no elegante de hacer thiscurrentPos = héroe! .getPosition (); hero.setPosition (currentPos.x-60, currentPos.y-60); hero.inFightScene = false;});

              Righto. Tenemos un héroe valiente que puede meterse en peleas y huir de ellos. Dulce.

              Ahora vamos a hombre un poco y entrar en la lucha contra sí mismo con esta fea, viciosa criatura / monstruo / mal rey una vez por todas. El algoritmo sencillo de lucha funcionará de la siguiente manera:


              1. Generar un número aleatorio, si es & lt; 0,5, el jugador golpea, de lo contrario los golpes del monstruo.
              2. Cuando un personaje golpea el otro personaje, el atributo “ataque” del atacante se restará de atributo de la “vida” del rival.
              3. Si alcances de atributos de la “vida” de un carácter cero .. entonces está listo para ser enterrado.

                Vamos a implementar esta uniendo el botón de ataque a la “clic” y eventos “tocar”, y mediante la ejecución de este sencillo algoritmo de lucha cuando cualquiera de estos eventos se desencadenan. Como he mencionado antes, que son muy bienvenidos para transformar el código en algo modular y escalable, y si lo hace y desea compartirlo con el mundo, házmelo saber y voy a agregar al tutorial, o si también puede hacerlo a través del repositorio de Github.
                // luchando algorithmgoog.events.listen (attackButton, [ ‘mousedown’, ‘touchstart’], la función (e) {// generar números aleatorios var = randomStuff Math.random (!); // si el jugador golpea (randomStuff & lt ; 0,5) {monster.life – = hero.attack; // ¿está muerto aún si (monster.life & lt; = 0) {console.log ( ‘monstruo muerto’); // obtener el dinero hero.money monstruo? + = monster.money; // volver al mapa director.replaceScene (mapScene); mapLayer.setDirty (255); hero.inFightScene = false; // eliminar el objeto monstruo monster.setHidden (true); monstruo de borrado;} } else {hero.life – = monster.attack;?. // que han sido asesinados si (hero.life & lt; = 0) {var = new labelGameOver lime.Label () setText ( ‘GAME OVER !!!’) .setPosition (160.100); fightLayer.appendChild (labelGameOver);}} // actualizar las estadísticas labelFighterOneLife.setText ( ‘vida’ + hero.life); labelFighterTwoLife.setText ( ‘vida’ + monster.life);}); 12345678910111213141516171819202122232425262728293031323334353637383940 // luchando algorithmgoog.events.listen attackButton, [ ‘mousedown’, ‘touc ( HStart ‘], la función (e) {// generar al azar numbervarrandomStuff = math.random) (; // si los golpes jugador (randomStuff & lt; 0,5) {monster.life- = hero.attack; // ¿está muerto todavía? si (monster.life & lt; = 0) {console.log ( ‘monstruo muerto’); // obtener el monstruo moneyhero.money + = monster.money; // volver a la mapdirector.replaceScene (mapScene); mapLayer.setDirty ( 255); hero.inFightScene = false; // eliminar el monstruo objectmonster.setHidden (true); monstruo de borrado;}} else {hero.life- = monster.attack; // que han sido asesinados si (hero.life? & lt; = 0) {varlabelGameOver = newlime.Label () setText ( ‘GAME OVER !!!’) setPosition (160.100); fightLayer.appendChild (labelGameOver);..}} // actualizar statslabelFighterOneLife.setText ( ‘vida’ + héroe .vida); labelFighterTwoLife.setText ( ‘vida’ + monster.life);});

                Los puntos clave aquí:


                • Nos están escuchando y eventos “clic” “tocar” en el botón de ataque usando la misma técnica que hemos utilizado anteriormente.
                • Un número aleatorio decide quién “éxitos”. En lugar de ser el 50% cada uno, se puede hacer depender esta agilidad y la experiencia del personaje.
                • Si el monstruo está muerto, estamos tomando su dinero ($$$) y matar al objeto.
                • Es una lucha desigual bastante, ya que somos manera más fuerte que el monstruo. Si le sucede a morir he añadido un “juego sobre” Texto a aparecer. Ahora que ya sabe cómo trabajar con escenas, usted podría ir a un juego sobre la escena.

                  Para evitar que la escena de la pelea para ser cargado de nuevo desde el cuadro delimitador del monstruo, cambie la línea donde nos registramos para la detección de colisiones, para éste, de manera que sólo los monstruos vivos activan este:
                  si (monster.life & gt; 0 & amp; & amp; goog.math.Box.intersects (this.getBoundingBox (), monster.getBoundingBox ())) {1Si (monster.life & gt; 0 & amp; & amp; goog.math.Box. intersecta (this.getBoundingBox (), monster.getBoundingBox ())) {

                  Hora de jugar y Descargar

                  Puede descargar los archivos del juego completo desde este enlace. Como he mencionado anteriormente, la ejecución de estos archivos fuera de la carpeta limejs no va a funcionar. Con el fin de implementar una LimeJS proyecto que tiene que seguir esta guía.

                  ¿Qué sigue

                  Después de hacer este tutorial son todos buenos para empezar con este marco impresionante. Lo primero que tengo por cierto que debe mirar es hacer de esto más modular, por ejemplo poniendo cada objeto del juego en un archivo separado, y añadir algunos métodos para que no se está repitiendo el código. Además, la pantalla escena de lucha y pelea algoritmo deben hacerse genérica a “cualquier” monstruo en lugar de tener un monstruo duro codificado. Está recibiendo en juego Dev fue mi objetivo aquí, no enseñar patrones de diseño de programación orientada a objetos (hay un montón de tutoriales para que por ahí!).

                  Ahora por dónde debe ir ahora? Tengo una idea.

                  HTML5 móvil desarrollo del juego para principiantes


                  He preparado un curso integral en línea que le guiará a través de la creación de HTML5 juegos multiplataforma utilizando marco de desarrollo LimeJS juego. El curso es 100% de vídeo basado de manera que se puede ver en tiempo real cómo los juegos son creados a partir de cero. Cada lección viene con su propio archivo zip con todo el código para que pueda tener una obra de teatro con los ejemplos y los utilizaron como iniciadores para sus propios juegos.

                  Mensajes relacionados

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *