Tabla de contenidos

Intro

Había una vez, los niños utilizan para jugar con real “carne y hueso” animales como perros, gatos y hámsters. Los niños de hoy juegan con algoritmos elaborados que simulan los seres vivos y llevan a cabo acciones tales como comer, jugar e incluso estallar. Llamamos a estas invenciones equivocadas “mascotas virtuales”.

estoy exagerando. Los niños todavía juegan con animales reales y sí, juegan con las mascotas virtuales también al igual que muchos adultos hacen. Y no hay nada malo en ello. mascotas virtuales son uno más de los muchos tipos de juegos de vídeo se pueden encontrar hoy en día, y este tutorial va a enseñar cómo hacer un simple mascota virtual con el que se pueden ejecutar en cualquier dispositivo que soporte HTML 5.

HTML5 desarrollo del juego

Una de las mejores cosas de HTML5 es que todo lo que necesita para hacer que los juegos son un editor de texto, un navegador web y, por supuesto, un programa para crear la obra. Esa parte no es ni siquiera necesario hacer eso con sitios como OpenGameArt.org que proporcionan obra impresionante juego se puede utilizar de forma gratuita.

Vamos a estar construyendo este sencillo juego de mascotas virtuales utilizando un marco JS llamada LimeJS. Puede descargar este marco e instalarlo siguiendo la guía oficial en www.limejs.com.

La guía oficial le proporciona un buen punto de partida cuando se trata de la instalación y el uso del marco. La comunidad es también un gran lugar para encontrar información.

Si usted está buscando una alternativa guiada y completo que te enseña todos los conceptos básicos de este gran marco a partir de cero (bueno, suponiendo que tenga conocimientos básicos JS), he preparado un curso en línea titulado HTML5 Mobile desarrollo de juegos para principiantes, que son bienvenidos a la salida (usando el enlace que le dará 30% de descuento en el precio del curso).


Configuración del Proyecto

Después de instalar LimeJS según la guía oficial o de mi curso en línea, nuestro siguiente paso será crear el proyecto. Que vamos a abrir nuestra terminal, cd para los limejs cualquier tipo de carpetas:
bin / lime.py crear virtual_pet1bin / lime.py crear virtual_pet

Esto creará una carpeta llamada “virtual_pet” dentro de nuestros limejs carpeta con algunos archivos de inicio. virtual_pet.html abierta Vamos a añadir algunas etiquetas y labrar a la sección de la cabeza. Esto nos dará un fondo negro en la página y un pequeño programa para corregir un problema al cambiar escenas (no vamos a utilizar esto en este tutorial, pero es algo que siempre añadir).
.lime escena {display: block! important;} body {background-color: negro;} 12.lime escena {display: es bloqueado;} body {background-color: negro;}

virtual_pet.js Abiertas y sustituir su contenido por lo siguiente:
// conjunto de espacio de nombres principal goog.provide ( ‘virtual_pet’); // obtener los requisitos goog.require ( ‘lime.Director’); goog.require ( ‘lime.Scene’); goog.require ( ‘lime.Layer’); // punto de entrada virtual_pet.start = function () {// objeto para almacenar propiedades de nivel de juego var gameObj = {anchura: 320, altura: 480, renderer: lime.Renderer.CANVAS}; director var = new lime.Director (document.body, gameObj.width, gameObj.height); var gameScene = new lime.Scene () setRenderer (gameObj.renderer) var gameLayer = new lime.Layer () setAnchorPoint (0,0)..; gameScene.appendChild (gameLayer); director.makeMobileWebAppCapable (); director.replaceScene (gameScene); } // esto es necesario para el acceso exterior después de código se compila en modo ADVANCED_COMPILATIONS goog.exportSymbol ( ‘virtual_pet.start’, virtual_pet.start); // 12345678910111213141516171819202122232425262728 conjunto namespacegoog.provide principal ( ‘virtual_pet’); // obtener requirementsgoog. require ( ‘lime.Director’); goog.require ( ‘lime.Scene’); goog.require ( ‘lime.Layer’); // entrypointvirtual_pet.start = function () {// objeto para tienda de juegos de nivel propertiesvargameObj = {anchura: 320, altura: 480, renderer: lime.Renderer.CANVAS};. vardirector = newlime.Director (document.body, gameObj.width, gameObj.height); vargameScene = newlime.Scene () setRenderer (gameObj. renderer) vargameLayer = newlime.Layer () setAnchorPoint (0,0);. ​​gameScene.appendChild (gameLayer); director.makeMobileWebAppCapable (); director.replaceScene (gameScene);} // esto es necesario para acceso desde el exterior después de código se compila en ADVANCED_COMPILATIONS modegoog.exportSymbol ( ‘virtual_pet.start’, virtual_pet.start);

Esto nos dará un objeto llamado “gameObj” que vamos a utilizar para tienda de juegos-l evel propiedades y los elementos básicos de todos los proyectos LimeJS tienen, al igual que un director, una escena y una capa. El director se encarga de la imagen grande, al igual que en una película. Diciendo cosas como la aplicación lo que la escena se está mostrando se llevan a cabo por el director ( “replaceScene”). Las capas son contenedores que nos permiten ubicar elementos en. Los elementos se colocan en propias coordenadas de la capa.

The Pet

Estoy seguro de que tiene una mascota linda en mente, algo así como un hámster de dibujos animados o un perro. Tal vez algunos de ustedes están pensando en salir de las mascotas virtuales ordinarios, como un político o Psy. No se preocupe, la mascota vamos a tener es algo mucho más simple: ¿qué tal un círculo

Nuestra mascota (permite llamarlo Zenvita) tendrá dos propiedades numéricas:


  • Salud. Pensé que estaría bien tener el círculo crecer en tamaño que la mascota se torna más saludable, y disminuir si se vuelve poco saludable (aunque con los seres humanos por lo general es todo lo contrario), hasta llegar a 0 y muere.
  • Felicidad El más feliz de la mascota, la más verde del círculo. Si la mascota va triste que se convertirá en marrón, hasta que finalmente se convierte en rojo y troqueles.

    Le permite crear un nuevo archivo llamado pet.js con el siguiente contenido:
    goog.provide ( ‘virtual_pet.Pet’); goog.require ( ‘lime.Circle’); virtual_pet.Pet = function (gameObj) {goog.base (this); this.gameObj = gameObj; this.happiness = 100; this.health = 100; this.setPosition (this.gameObj.width / 2, this.gameObj.height / 2); this.updateLook ();}; goog.inherits (virtual_pet.Pet, lime.Circle); / ** * actualizar el aspecto de la mascota de acuerdo a la misma de la felicidad y la salud * / virtual_pet.Pet.prototype.updateLook = function () {/ / tamaño de la mascota de acuerdo con la var salud petSize = this.gameObj.maxPetSize * this.health/100; this.setSize (petSize, petSize); // color de acuerdo a la felicidad (entre verde y rojo) var redAmount = parseInt ((100-this.happiness) / 100 * 255); // 255 si 0 salud var greenAmount = parseInt ((this.happiness) / 100 * 255); // 255 si 100 this.setFill salud (redAmount, greenAmount, 0);}; 1234567891011121314151617181920212223242526272829goog.provide ( ‘virtual_pet.Pet’); goog.require ( ‘lime.Circle’); virtual_pet.Pet = function (gameObj) { goog.base (this); this.gameObj = gameObj; this.happiness = 100; this.health = 100; this.setPosition (this.gameObj.width / 2, this.gameObj.height / 2); this.updateLook ( );}; goog.inherits (virtual_pet.Pet, lime.Circle); / ** * actualizar el aspecto de la mascota de acuerdo a la misma de la felicidad y la salud * / virtual_pet.Pet.prototype.updateLook = function () {// tamaño del para mascotas de acuerdo con la healthvarpetSize = this.gameObj.maxPetSize * this.health / 100; this.setSize (petSize, petSize); // color de acuerdo a la felicidad (entre verde y rojo) varredAmount = parseInt ((100-this.happiness ) / 100 * 255); // 255 si 0 healthvargreenAmount = parseInt ((this.happiness) / 100 * 255); // 255 si 100 healththis.setFill (redAmount, greenAmount, 0);};

    Después de añadir un nuevo archivo no se olvide de “requerir” este nuevo objeto en la espalda virtual_pet.js:
    goog.require ( ‘virtual_pet.Pet’); 1goog.require ( ‘virtual_pet.Pet’);

    Agregue esto a la definición del objeto gameObj en virtual_pet.js:
    maxPetSize: 200,

    y ejecute el siguiente comando en el terminal para actualizar las dependencias del proyecto:
    bin / actualización lime.py

    Ok deja mirada en el archivo pet.js ahora. Estamos definiendo un nuevo objeto llamado virtual_pet.Pet, que hereda de un círculo. LimeJS le permite utilizar las capacidades de herencia Google cierre. Esto significa básicamente que un objeto virtual_pet.Pet tendrá las mismas propiedades y métodos de lime.Circle, además de la nueva materia añadimos.

    En el constructor que estamos pasando el objeto gameObj con la materia de nivel de juego de modo que se pueda acceder o modificado. Estamos dando a la mascota un valor predeterminado de 100, tanto para la felicidad y la salud. La ubicación inicial de Zenvita será el centro de la pantalla. Por último, estamos llamando a un método llamado updateLook (), que se define más abajo.

    updateLook () hace lo siguiente:


    • Calcular el tamaño actual del animal doméstico basado en el tamaño máximo predeterminado y la salud actual de la mascota.
    • Configuración de este tamaño a la mascota, utilizando setSize (), que es disponible en lime.Circle objetos.
    • Calcular la cantidad de verde y rojo de acuerdo a la felicidad de la mascota. las definiciones de color RGB consisten en tres números que van de 0 a 255 y representan la cantidad de rojo, verde y azul. Zenvita no tendrá según azul, rojo y verde solo a él de la felicidad.
    • definido el llenado del círculo como por la cantidad de cada color.

      Vamos a crear la nueva mascota en virtual_pet.js y ver el resultado. Añadir lo siguiente después de “gameScene.appendChild (gameLayer);”:
      // crear petvar mascota = new virtual_pet.Pet (gameObj, gameLayer); gameLayer.appendChild (PET); 123 // crear petvarpet = newvirtual_pet.Pet (gameObj, gameLayer); gameLayer.appendChild (PET);

      Si recargar su navegador debería ver a la mascota con un fondo negro. Si cambia la salud y la felicidad de la mascota y vuelva a cargar la página que debe ver el aumento en el tamaño y el color cambia.


      Juego encima Condiciones

      marca Vamos hacerle frente de manera que si llega a 0 Zenvita salud o la felicidad 0, se muere. Y vamos a hacer que una mascota muy exigente que necesita ser constantemente entretenidos y alimentados. Zenvita perderá 1 unidad de salud y felicidad por segundo, lo que significa si lo deja quieto durante 100 segundos que va a morir.

      Vamos a utilizar la función de gestor de programación para configurar un temporizador, de modo que se ejecuta cada 0,1 segundos. Ahora ¿por qué no todos los segundos? así, estoy planeando sobre el uso de este mismo contador de tiempo más adelante para otra de las características que requiere un período más corto, por lo que 0,1 segundos va a hacer por ambos.

      En el constructor virtual_pet.Pet, añada lo siguiente abajo “updateLook ();”:
      var dt = 100; lime.scheduleManager.scheduleWithDelay (function () {this.happiness – = 0,1; this.health – = 0,1; // juego sobre si (this.happiness & lt; = 0 || this.health & lt; = 0) {alert ( ‘Game over!’); location.reload ();} this.updateLook ();}, esto, dt); 12345678910111213vardt = 100; lime.scheduleManager.scheduleWithDelay (function () {this.happiness- = 0,1; this.health- = 0,1; // juego overif (this.happiness & lt; = 0 || this.health & lt; = 0) {alert ( ‘Game over!’); location.reload ();} this.updateLook ();}, esto, dt);

      ¿Qué pieza de código hace, se ejecuta cada 100 milisegundos, y en cada carrera que disminuye la salud y la felicidad de la mascota y actualiza aspecto de la mascota. Si ninguna de las propiedades alcanza un valor de 0 o menos, el juego ha terminado y la página se vuelve a cargar (se puede sustituir eso con una pantalla final apropiado / triste).

      Antecedentes y área de menú

      Vamos a añadir un color de fondo al juego y un área de menú. Añadir lo siguiente en virtual_pet.js después de la definición gameLayer, lo que nos dará rectángulos básicos para representar estas áreas:
      fondo var = new lime.Sprite (). setSize (gameObj.width, gameObj.height * 4/5). setFill ( ‘# F3E2A9’) setAnchorPoint (0,0) .setPosition (0,0);.. var menuArea = new lime.Sprite () setSize (gameObj.width, gameObj.height / 5). setFill ( ‘# 8B5A00’) setPosition (gameObj.width / 2, gameObj.height * 9/10) gameLayer.appendChild (fondo).; gameLayer.appendChild (menuArea);.. 12345678varbackground = newlime.Sprite () setSize (gameObj.width, gameObj.height * 4/5) .setFill ( ‘# F3E2A9’) setAnchorPoint (0,0) .setPosition (0,0 );.. varmenuArea = newlime.Sprite () setSize (gameObj.width, gameObj.height / 5) .setFill ( ‘# 8B5A00’) setPosition (gameObj.width / 2, gameObj.height * 9/10) gameLayer.appendChild (fondo); gameLayer.appendChild (menuArea);

      Después de recargar, el juego debe estar buscando de esta manera:


      artículos del animal doméstico

      Está bien hasta el momento no hay mucho pasando excepto la realización de nuestra mascota tiene hambre y molesto. Necesitamos artículos como las manzanas, helados y juguetes para conseguir esto más interesante.

      Vamos a crear un nuevo archivo llamado item.js, no se olvide de añadir una declaración “requerir” para él en virtual_pet.js y ejecutar las LimeJS proyectan comando de actualización que nos encontramos antes. Utilice la siguiente tabla para obtener el contenido del archivo:
      goog.provide ( ‘virtual_pet.Item’); goog.require ( ‘lime.Sprite’); virtual_pet.Item = function (felicidad, salud) {goog.base (this); this.happiness = felicidad; this.health = salud; } goog.inherits (virtual_pet.Item, lime.Sprite); 1234567891011goog.provide ( ‘virtual_pet.Item’); goog.require ( ‘lime.Sprite’); virtual_pet.Item = función (la felicidad, la salud) {goog.base (este); this.happiness = felicidad; this.health = salud;} goog.inherits (virtual_pet.Item, lime.Sprite);

      cosas a tener en cuenta:


      • Nuestros hereda de objetos elemento de lime.Sprite (usado para crear rectángulos o imágenes).
      • Cuando se crea un objeto de elemento, la felicidad y la salud de este elemento proporciona a la mascota, todavía debería considerarse como parámetros.

        Ahora en nuestra área de menú estaremos agregando botón para dar la mascota algunos artículos. En una versión más pulida que podría haber una pantalla para elegir entre los cientos de artículos con diferentes características, que podría tener que cargar desde la web y hacer que el usuario las compran con dinero real .. en esta demo vamos a adoptar un enfoque mucho más simple y difícil que el código de tres elementos para que el usuario elija.

        Vamos a añadir el siguiente código a virtual_pet.js, después de que el área de menú se añade a la capa:
        var appleButton = new lime.Sprite (). setSize (gameObj.height / 10, gameObj.height / 10). setPosition (gameObj.width / 4, gameObj.height * 9/10) .setFill ( ‘images / Apple.png’); goog.events.listen (appleButton, [ ‘touchstart’, ‘mousedown’], la función (e) {e.stopPropagation (); gameObj.currentItem = {width: gameObj.height / 10, altura: gameObj.height / 10, llenar: ‘images / Apple.png’, la felicidad: -5, la salud: 20};}); var icecreamButton = new lime.Sprite (). setSize (gameObj.height / 20, gameObj.height / 10). setPosition (gameObj.width / 2, gameObj.height * 9/10) .setFill ( ‘imágenes / icecream.png’); goog.events.listen (icecreamButton, [ ‘touchstart’, ‘mousedown’], la función (e) {e.stopPropagation (); gameObj.currentItem = {width: gameObj.height / 20, altura: gameObj.height / 10, relleno: ‘images / icecream.png’, felicidad: 20, de la salud: -10;}}); var toyButton = new lime.Sprite (). setSize (gameObj.height / 15, gameObj.height / 10). setPosition (gameObj.width * 3/4, gameObj.height * 9/10) .setFill ( ‘images / toy.png’); goog.events.listen (toyButton, [ ‘touchstart’, ‘mousedown’], la función (e) {e.stopPropagation (); gameObj.currentItem = {width: gameObj.height / 15, altura: gameObj.height / 10, relleno: ‘images / toy.png’, felicidad: 10, de la salud: 0;}}); gameLayer.appendChild (appleButton); gameLayer.appendChild (icecreamButton); gameLayer.appendChild (toyButton);. 123456789101112131415161718192021222324252627282930313233343536373839404142434445varappleButton = newlime.Sprite () setSize (gameObj.height / 10, gameObj.height / 10) .setPosition (gameObj.width / 4, gameObj.height * 9/10) .setFill (‘ images / Apple.png ‘); goog.events.listen (appleButton, [‘ touchstart’, ‘mousedown’], la función (e) {e.stopPropagation (); gameObj.currentItem = {width: gameObj.height / 10, altura: gameObj.height / 10, de relleno: ‘images / Apple.png’, la felicidad: -5, la salud: 20};}); varicecreamButton = newlime.Sprite setSize () (gameObj.height / 20, gameObj.height. /10).setPosition(gameObj.width/2,gameObj.height*9/10).setFill(‘images/icecream.png’);goog.events.listen(icecreamButton,[‘touchstart’,’mousedown ‘], función (e) {e.stopPropagation (); gameObj.currentItem = {width: gameObj.height / 20, altura: gameObj.height / 10, de relleno: ‘images / icecream.png’, felicidad: 20, la salud: -10 };});. vartoyButton = newlime.Sprite () setSize (gameObj.height / 15, gameObj.height / 10) .setPosition (gameObj.width * 3/4, gameObj.height * 9/10) .setFill (‘ images / t oy.png ‘); goog.events.listen (toyButton, [‘ touchstart’, ‘mousedown’], la función (e) {e.stopPropagation (); gameObj.currentItem = {width: gameObj.height / 15, altura: gameObj.height / 10, de relleno: ‘images / toy.png’, la felicidad: 10, de la salud: 0};}); gameLayer.appendChild (appleButton); gameLayer.appendChild (icecreamButton); gameLayer.appendChild (toyButton); < p> Nota: . Si usted quiere hacer esto algo más abstracto en lugar de repetir el código de este tipo, se puede ver en mi tutorial juego de la agricultura en Binpress para una aplicación más pulido de esta característica

        Lo que estamos haciendo con los botones es:


        • La creación de sprites con fondos de imagen para cada botón (se puede descargar todo el código y las imágenes más abajo).
        • Encuadernación clics del ratón y eventos de toque a cada botón de modo que un “elemento seleccionado actualmente” está configurado en cada caso.

          Vea cómo la niña se sumará la salud, sino tener la felicidad de distancia (las manzanas son un poco aburrido, deja la cara él), helados traerán la felicidad pero que sea por enfermedad, y los juguetes se acaba de añadir un poco de diversión a la vida de Zenvita.

          nom nom nom

          Después de haber dado al usuario la capacidad de seleccionar un elemento, que necesitamos ahora para darles la posibilidad de colocar estos objetos en el fondo del juego, por lo que Zenvita puede conseguir y nom nom nom …

          En primer lugar, vamos a añadir otra propiedad a la definición del objeto gameObj, que debería tener este aspecto:
          var gameObj = {anchura: 320, altura: 480, renderer: lime.Renderer.DOM, maxPetSize: 200, artículos: []}; 1234567vargameObj = {anchura: 320, altura: 480, renderer: lime.Renderer.DOM, maxPetSize : 200, artículos: []};

          la matriz de elementos contendrá todos los elementos que se dejan caer en el juego de fondo. Vamos a añadir un evento de clic / toque unión a un segundo plano, en virtual_pet.js, justo después de la definición de fondo, por lo que los nuevos elementos se crean cuando el usuario hace clic en él:
          goog.events.listen (fondo, [ ‘touchstart’, ‘mousedown’], la función (e) {if (gameObj.currentItem) {pos var = e.position; var newItem = new virtual_pet.Item (gameObj.currentItem.happiness , gameObj.currentItem.health) .setPosition (pos) .setSize (gameObj.currentItem.width, gameObj.currentItem.height) .setFill (gameObj.currentItem.fill); gameLayer.appendChild (newItem); gameObj.items.push ( newItem); movimiento var = new lime.animation.MoveTo (e.position.x, e.position.y) .setDuration (2); pet.runAction (movimiento); gameObj.currentItem = null;}}); 12345678910111213141516goog. events.listen (fondo, [ ‘touchstart’, ‘mousedown’], la función (e) {if (gameObj.currentItem) {varpos = e.position; varnewItem = newvirtual_pet.Item (gameObj.currentItem.happiness, gameObj.currentItem. salud) .setPosition (pos) .setSize (gameObj.currentItem.width, gameObj.currentItem.height) .setFill (gameObj.currentItem.fill); gameLayer.appendChild (newItem); gameObj.items.push (newItem); varmovement = newlime.animation.MoveTo (e.position.x, e.position.y) .setDu ración (2); pet.runAction (movimiento); gameObj.currentItem = null;}});

          Esto creará el objeto elemento y colocarlo donde hacemos clic (o táctil). También estamos creando un movimiento animado por lo que la mascota va a donde se ha caído el artículo. La selección del elemento actual se borra mediante el establecimiento de esta propiedad a nulo.

          En pet.js, dentro de nuestra función de planificador, que se sumará la detección de colisiones para que los artículos son consumidos por la mascota si están ocupando el mismo espacio (de lo contrario, la mascota se destinará a la comida, pero no va a ser comido) . La función de planificador se verá así:
          var dt = 100; var i, arrayLen, toremove; lime.scheduleManager.scheduleWithDelay (function () {this.happiness – = 0,1; this.health – = 0,1; // juego sobre si (this.happiness & lt; = 0 | | this.health & lt; = 0) {alert ( ‘Juego encima’); location.reload ();} // cheque por colisión con objetos toremove = new array (); for (i = 0, = arrayLen esto. gameObj.items.length; i & lt; arrayLen; i ++) {if (goog.math.Box.intersects (this.gameObj.items [i] .getBoundingBox (), this.getBoundingBox ())) {this.happiness = Math. min (this.happiness + this.gameObj.items [i] .happiness, 100); this.health = Math.min (this.health + this.gameObj.items [i] .salud, 100); toRemove.push ( i);}} // eliminar recogió artículos para (i = toRemove.length; i & gt; 0; i–) {this.gameLayer.removeChild (this.gameObj.items [toremove [i-1]]); this.gameObj.items.splice (toremove [i-1], 1);} this.updateLook ();}, esto, dt); 12345678910111213141516171819202122232425262728293031vardt = 100; vari, arrayLen, toremove; lime.scheduleManager.scheduleWithDelay (function ( ) {this.happiness- = 0,1; thi s.health- = 0,1; // juego overif (this.happiness & lt; = 0 || this.health & lt; = 0) {alert ( ‘Game over!’); location.reload ();} // cheque por colisión con artículos toremove = newArray (); for (i = 0, arrayLen = this.gameObj.items.length; i & lt; arrayLen; i ++) {if (goog.math.Box.intersects (this.gameObj.items [i] .getBoundingBox (), this.getBoundingBox ())) {this.happiness = Math.min (this.happiness + this.gameObj.items [i] .happiness, 100); this.health = Math.min (this.health + este .gameObj.items [i] .salud, 100); toRemove.push (i);}} // eliminar recogió artículos para (i = toRemove.length; i & gt; 0; i -) {this.gameLayer.removeChild (this.gameObj.items [toremove [i-1]]); this.gameObj.items.splice (toremove [i-1], 1);} this.updateLook ();}, esto, dt);

          ¿Qué está pasando aquí:


          • iterar a través de los objetos colocados gameObj.items (array), si alguno de ellos choca con la mascota, que se añade a una matriz “toremove”.
          • elementos que chocan añadir / restar la salud y la felicidad a la mascota.
          • eliminar todos los elementos que chocan.
          • La razón por la que estoy haciendo for (i = 0, arrayLen = this.gameObj.items.length; i & lt; arrayLen; i ++) en lugar de for (i = 0; i & lt; this.gameObj.items.length; i ++) es porque conseguir usos longitud de una matriz recursos, por lo que es más eficiente para llevar a cabo esta operación sólo una vez en lugar de en cada iteración.

            animales domésticos como ser acariciado

            añadir una última cosa Vamos a este juego. Mascotas como ser acariciado, entonces ¿qué lo hacemos de manera que cuando el animal es arrastrado alrededor de la aumenta de felicidad?

            Agregue el código siguiente al constructor en pet.js, después de que el planificador. El uso de “e.swallow” puede ser utilizado en otros eventos en LimeJS y le permite ejecutar código cuando se termina el evento.
            // arrastre alrededor para que sea goog.events.listen más feliz (esto, [ ‘mousedown’, ‘touchstart’], la función (e) {e.startDrag (true); var pet = esta; e.swallow ([‘ mouseup’, ‘touchend’], la función () {this.happiness = Math.min (this.happiness + 5100);});}); 123 456 789 // arrastre alrededor para que sea happiergoog.events.listen (esto, [ ‘mousedown’, ‘touchstart’], la función (e) {e.startDrag (true); varpet = esta; e.swallow ([ ‘mouseup’, ‘touchend’], la función () {this.happiness = Math. min (this.happiness + 5100);});});


            descargar los archivos

            Puede descargar el código y las imágenes de este tutorial utilizando este enlace.

            Los próximos pasos

            Hay muchas maneras en que podría mejorar esta demostración del juego y convertirlo en un éxito de taquilla:


            • Añadir la capacidad de guardar / cargar los datos de un servidor
            • En lugar de tener un círculo para un uso doméstico un buen carácter lindo, animado y que de acuerdo con ella de la salud y la felicidad.
            • Añadir un sinnúmero de artículos para comprar, comercio, etc.
            • La mascota podría tener comportamientos aleatorios, como una ráfaga de felicidad o un ataque de pánico.

              espero que hayan disfrutado de este tutorial y están ansiosos por aprender más sobre HTML5 aplicación y el desarrollo del juego. En Zenva, tenemos muchos cursos sobre la aplicación y el desarrollo del juego, no dude en comprobar a cabo aquí.

              Y no se olvide que al utilizar el siguiente enlace, se obtiene un descuento agradable en el curso móvil HTML5 desarrollo del juego para principiantes, que utiliza el marco LimeJS para crear muchas demostraciones fresco juego como éste. El curso también le guiará a través de los pasos que tiene que pasar por el fin de empacar su juego de HTML5 en una aplicación nativa para iOS y Android.


              Mensajes relacionados

Deja una respuesta

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