{"id":95605,"date":"2022-07-26T03:09:46","date_gmt":"2022-07-26T01:09:46","guid":{"rendered":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/"},"modified":"2020-12-04T08:16:46","modified_gmt":"2020-12-04T11:16:46","slug":"realizando-tu-primer-juego-en-javascript-segunda-parte","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/","title":{"rendered":"Cr\u00e9er votre premier jeu en JavaScript - Deuxi\u00e8me partie"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#Vamos-a-ponernos-al-dia\" >Vamos a ponernos al d\u00eda<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#Creando-nuestra-increible-nave-espacial\" >Creando nuestra incre\u00edble nave espacial<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#Mover-la-nave-espacial\" >Mover la nave espacial<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#Lanzamiento-de-cohetes\" >Lanzamiento de cohetes<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div itemprop=\"articleBody\">\n<p>Este art\u00edculo es la segunda parte de mi tutorial para hacer un peque\u00f1o juego con Javascript. Realizando tu primer juego en JavaScript \u2013 Primera parte.<\/p>\n<p>En esta segunda parte vamos a poner en marcha el funcionamiento de nuestro juego, d\u00e1ndole mas animaci\u00f3n, versatilidad y movimiento. Sin mas que decir, \u00a1Vamos a comenzar con esta segunda parte!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vamos-a-ponernos-al-dia\"><\/span>Vamos a ponernos al d\u00eda<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Como ya sabr\u00e1s, tenemos mucho adelantado de este tutorial. Sigue el siguiente enlace y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/Karzam\/Spaceship_Tutorial_Part_2\">mira el c\u00f3digo fuente completo de este tutorial <\/a>. Absolutamente todo lo conseguir\u00e1s siguiendo esa URL. As\u00ed que no esperes mas y continuemos con nuestro tutorial.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creando-nuestra-increible-nave-espacial\"><\/span>Creando nuestra incre\u00edble nave espacial<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ahora que el fondo est\u00e1 hecho, \u00a1por fin podemos empezar a armar nuestra nave espacial!<\/p>\n<p>Vamos a crear un archivo <em>Player.js<\/em> y agregarlo a <em>index.html<\/em> como un script (<strong>igual que como hicimos con CloudManager<\/strong>).<\/p>\n<p>Aqu\u00ed est\u00e1 una (hermosa) nave espacial dise\u00f1ada en pocos minutos, adem\u00e1s que la puedes a\u00f1adir a tu <strong>carpeta de assets<\/strong> y en la <strong>funci\u00f3n loader<\/strong> de <em>main.js<\/em>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-239 aligncenter\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/nave.png\" alt=\"\" width=\"200\" height=\"155\"\/><\/p>\n<p>B\u00e1sicamente, queremos que esta nave aparezca cerca del borde izquierdo de la pantalla. Tambi\u00e9n necesitamos que su ancla (punto de posici\u00f3n del objeto) est\u00e9 en el centro del sprite, y como es quiz\u00e1s demasiado grande, podemos reescalarla como te muestro aqu\u00ed abajo:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nclass Player&#13;\n{&#13;\nconstructor()&#13;\n{&#13;\nthis.sprite = new\u00a0 PIXI.Sprite(PIXI.loader.resources[\"assets\/spaceship.png\"].texture);&#13;\nthis.sprite.interactive = true;&#13;\n&#13;\nthis.sprite.anchor.set(0.5, 0.5);&#13;\nthis.sprite.position.set(renderer.width * 0.2, renderer.height * 0.4);&#13;\nthis.sprite.scale.set(0.4, 0.4);&#13;\n&#13;\nstage.addChild(this.sprite);&#13;\n}&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>Por supuesto, tenemos que declarar este objeto como una <em>variable global<\/em> del archivo <strong>main.js<\/strong>, para que pueda ser instanciado en el juego:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nvar stage = new PIXI.Container();&#13;\nvar cloudManager;&#13;\nvar player;&#13;\n...&#13;\n&#13;\n<\/pre>\n<p>\u2026 y en la<strong> funci\u00f3n init<\/strong> del mismo archivo (justo despu\u00e9s de <em>CloudManager<\/em>):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nplayer = new Player();&#13;\n&#13;\n<\/pre>\n<p>Ahora deber\u00edas ver la brillante nave espacial navegando.<\/p>\n<p>Sin embargo, si esperas unos segundos, deber\u00edas tener algunos problemas:<\/p>\n<p>\u00a1La nave espacial est\u00e1 volando detr\u00e1s de las nubes!<\/p>\n<p>S\u00ed, porque de hecho, el \u00faltimo objeto creado se mueve detr\u00e1s del anterior. Las nubes est\u00e1n desovando despu\u00e9s de que la nave espacial haya sido instanciada, as\u00ed que necesitamos que el gestor de nubes genere nubes en la parte inferior de la lista de objetos. Para ello, s\u00f3lo tenemos que actualizar un poco el <em>addChild<\/em> de la clase <strong>CloudManager<\/strong>:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nstage.addChildAt(esta.nube, 0);&#13;\n&#13;\n<\/pre>\n<p>addChildAt nos permite pasar un segundo par\u00e1metro, que es la posici\u00f3n en la lista de objetos del escenario. Cuanto m\u00e1s lejos est\u00e9, m\u00e1s lejos estar\u00e1 el sprite en la pantalla.<\/p>\n<p>\u00ab0\u00bb significa el primer \u00edndice en la lista de objetos, as\u00ed que cada vez que creamos una nueva nube, la a\u00f1adimos en la primera posici\u00f3n de la lista, asegurando que aparecer\u00e1 detr\u00e1s de la nave espacial.<\/p>\n<p>Ahora que est\u00e1 hecho, podemos iniciar los controles de la nave espacial.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Mover-la-nave-espacial\"><\/span>Mover la nave espacial<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Volvamos a la clase de <em>Player.js<\/em> y agreguemos algunas l\u00edneas en el constructor:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nwindow.addEventListener('keydown', this.onKeyDown.bind(this));&#13;\nwindow.addEventListener('keyup', this.onKeyUp.bind(this));&#13;\n&#13;\n<\/pre>\n<p>Esto permite que el juego detecte los eventos del teclado (cuando se pulsa y suelta una tecla). Cuando ocurre uno de estos eventos, se ejecuta el m\u00e9todo al final de cada l\u00ednea.<\/p>\n<p>Nota: Al a\u00f1adir \u00ab.bind(this)\u00bb al final de la funci\u00f3n, pasamos el contexto del objeto a \u00e9l, lo que significa que todav\u00eda podemos acceder a sus propiedades llamando \u00bb this \u00ab. Si no lo escribimos de esta manera, la funci\u00f3n callback no es capaz de determinar con qu\u00e9 objeto estamos trabajando. S\u00f3lo recuerda que si una de tus funciones de devoluci\u00f3n de llamada recibe un error \u00abundefined this\u00bb, es posible que tengas que atar tu objeto de esta manera.<\/p>\n<p>Vamos a definir 2 m\u00e9todos vac\u00edos en la misma clase (los rellenaremos dentro de un rato):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nonKeyDown(key) = {};&#13;\nonKeyUp(key) = {};&#13;\n&#13;\n<\/pre>\n<p>Tambi\u00e9n necesitamos 3 variables para mover la nave espacial: sus direcciones horizontal y vertical (X e Y) y la velocidad (todas ellas en el constructor):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.directionX = 0;&#13;\nthis.directionY = 0;&#13;\nthis.speed = 8;&#13;\n&#13;\n<\/pre>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.keyCodes = {37: -1, 38: -1, 39: 1, 40: 1};&#13;\n&#13;\n<\/pre>\n<p>Este objeto es b\u00e1sicamente una asociaci\u00f3n de c\u00f3digos clave y valores de direcci\u00f3n:<\/p>\n<ul>\n<li><strong>37 es la tecla de flecha izquierda,<\/strong> para mover nuestra nave espacial hacia la izquierda necesitamos disminuir su posici\u00f3n en X.<\/li>\n<li><strong>38 es la tecla de flecha arriba,<\/strong> para mover nuestra nave espacial a la parte superior necesitamos disminuir su posici\u00f3n en Y.<\/li>\n<li><strong>39 es la tecla de flecha a la derecha,<\/strong> para mover nuestra nave espacial a la derecha necesitamos aumentar su posici\u00f3n en X.<\/li>\n<li><strong>40 es la tecla de flecha abajo,<\/strong> para mover nuestra nave espacial al fondo necesitamos aumentar su posici\u00f3n en Y.<\/li>\n<\/ul>\n<p>Cada vez que se pulsa una tecla, se recupera la direcci\u00f3n correspondiente:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nonKeyDown(key)&#13;\n{&#13;\nif (key.keyCode == 37 || key.keyCode == 39)&#13;\nthis.directionX = this.keyCodes[key.keyCode];&#13;\nelse if (key.keyCode == 38 || key.keyCode == 40)&#13;\nthis.directionY = this.keyCodes[key.keyCode];&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>Se ve bastante raro, pero vamos a explicar eso: si el c\u00f3digo de la tecla es 37 o 39 (que significa tecla de flecha izquierda o derecha), entonces simplemente fijamos la direcci\u00f3n de la X. Si es 38 o 40, puedes adivinar lo que est\u00e1 pasando (s\u00ed, en realidad es la direcci\u00f3n vertical). Eso es todo!<\/p>\n<p>Vamos a a\u00f1adir el m\u00e9todo de actualizaci\u00f3n del reproductor (como el <strong>Cloud Manager<\/strong>, \u00bfrecuerdas?):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nupdate()&#13;\n{&#13;\nthis.sprite.position.x += this.directionX * this.speed;&#13;\nthis.sprite.position.y += this.directionY * this.speed;&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>\u2026 y por supuesto, no olvides llamarlo en la funci\u00f3n de bucle de main.js<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nplayer.update();&#13;\n&#13;\n<\/pre>\n<p>Si guardas y recargas el juego, (deber\u00eda) funcionar bien, excepto que la nave sigue movi\u00e9ndose cuando soltamos las teclas de direcci\u00f3n. Es obvio porque no hemos completado la funci\u00f3n onKeyUp, que est\u00e1 capturando la clave que acaba de ser liberada. As\u00ed que de esta manera podemos detenerlo ajustando la directionX o directionY a 0.<\/p>\n<p>S\u00f3lo hay un peque\u00f1o problema: \u00bfqu\u00e9 pasa si ponemos la direcci\u00f3n a 0 porque hemos soltado la tecla izquierda, pero la tecla derecha sigue pulsada?<\/p>\n<p>S\u00ed, la nave espacial se va a detener, y tendr\u00edamos que presionar la tecla derecha de nuevo para movernos, lo cual no es muy l\u00f3gico.<\/p>\n<p>As\u00ed que, \u00bfpor qu\u00e9 no comprobar si la tecla derecha o izquierda sigue pulsada, para que podamos reajustar la direcci\u00f3n a esta tecla pulsada anteriormente?<\/p>\n<p>Eso es lo que vamos a hacer. Y para ello necesitamos almacenar el estado de cada tecla en un booleano, pulsado o soltado (verdadero o falso). Pongamos todos estos estados en una variable de objeto en el constructor de reproductores:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.keyState = {37: false, 38: false, 39: false, 40: false};&#13;\n&#13;\n<\/pre>\n<p>Si una tecla (identificada por su propio c\u00f3digo) es presionada, entonces simplemente cambiamos su estado a true, y si es liberada la configuramos a false. F\u00e1cil, \u00bfverdad?<\/p>\n<p>A\u00f1adamos esta l\u00ednea al principio de onKeyDown:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\nthis.keyState[key.keyCode] = true;&#13;\n<\/pre>\n<p>\u2026y este en <em>onKeyUp:<\/em><\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.keyState[key.keyCode] = false;&#13;\n<\/pre>\n<p>Ahora podemos continuar con la l\u00f3gica <strong>onKeyUp<\/strong>: si se suelta una de las teclas horizontales o verticales pero se sigue pulsando la opuesta, cambiamos la direcci\u00f3n a la \u00faltima. Si ambos son liberados, detendremos la nave:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nif (!this.keyState[37] &amp;&amp; this.keyState[39])&#13;\nthis.directionX = this.keyCodes[39];&#13;\nelse if (this.keyState[37] &amp;&amp; !this.keyState[39])&#13;\nthis.directionX = this.keyCodes[37];&#13;\nelse this.directionX = 0;&#13;\n&#13;\nif (!this.keyState[38] &amp;&amp; this.keyState[40])&#13;\nthis.directionY = this.keyCodes[40];&#13;\nelse if (this.keyState[38] &amp;&amp; !this.keyState[40])&#13;\nthis.directionY = this.keyCodes[38];&#13;\nelse this.directionY = 0;&#13;\n<\/pre>\n<p><strong>Nota:<\/strong> Hay m\u00faltiples maneras de manejar el movimiento de la nave espacial, esta ciertamente no es la m\u00e1s limpia, pero creo que es una de las m\u00e1s simples de entender.<\/p>\n<p>Estamos listos, \u00a1Guardar y recargar y disfrutar!<\/p>\n<p><strong>Actualizaci\u00f3n:<\/strong> \u00a1La nave espacial puede salir de la pantalla! Intente comprobar su posici\u00f3n antes de actualizarla. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/Karzam\/Spaceship_Tutorial_Part_2\/blob\/master\/src\/Player.js\">Puede comprobar el resultado aqu\u00ed.<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Lanzamiento-de-cohetes\"><\/span>Lanzamiento de cohetes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ahora que podemos controlar la nave, queremos que dispare cohetes.<\/p>\n<p>Comencemos por a\u00f1adir el sprite en la carpeta de activos:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-259 aligncenter\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/rocket.png\" alt=\"\" width=\"50\" height=\"33\"\/><\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\nPIXI.loader.add([&#13;\n\"assets\/cloud_1.png\",&#13;\n\"assets\/cloud_2.png\",&#13;\n\"assets\/spaceship.png\",&#13;\n\"assets\/rocket.png\"&#13;\n]).load(init);&#13;\n<\/pre>\n<p>Crea un nuevo archivo llamado<strong> Rocket.js<\/strong> en la<strong> carpeta src<\/strong> y a\u00f1\u00e1delo en <strong>index.html<\/strong> con los otros tipos:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\n&lt;script src=\"..\/src\/lib\/pixi.min.js\"&gt;&lt;\/script&gt;&#13;\n&lt;script src=\"..\/src\/Player.js\"&gt;&lt;\/script&gt;&#13;\n&lt;script src=\"..\/src\/CloudManager.js\"&gt;&lt;\/script&gt;&#13;\n&lt;script src=\"..\/src\/Rocket.js\"&gt;&lt;\/script&gt;&#13;\n&lt;script src=\u201c..\/src\/main.js\"&gt;&lt;\/script&gt;&#13;\n&#13;\n<\/pre>\n<p>Volvamos a la clase de Jugadores. Queremos que sea capaz de disparar un cohete si pulsa el bot\u00f3n de la barra espaciadora. La <strong>funci\u00f3n onKeyDown<\/strong> ya est\u00e1 captando estos eventos, as\u00ed que s\u00f3lo necesitamos hacer una condici\u00f3n con el c\u00f3digo de clave que queremos (barra espaciadora en este ejemplo):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\nonKeyDown(key)&#13;\n{&#13;\nthis.keyState[key.keyCode] = true;&#13;\n&#13;\nif (key.keyCode == 32) {&#13;\nlet rocket = new Rocket(this.sprite.position.x,&#13;\nthis.sprite.position.y);&#13;\n}&#13;\n&#13;\nif (key.keyCode == 37 || key.keyCode == 39)&#13;\nthis.directionX = this.keyCodes[key.keyCode];&#13;\nelse if (key.keyCode == 38 || key.keyCode == 40)&#13;\nthis.directionY = this.keyCodes[key.keyCode];&#13;\n}&#13;\n<\/pre>\n<p>Estamos dando la posici\u00f3n de la nave espacial en el constructor de cohetes, as\u00ed que en el interior nos limitamos a fijar su posici\u00f3n a la de la nave espacial (con un desplazamiento para que aparezca delante de la nave en lugar de en el centro).<\/p>\n<p>As\u00ed que vamos, inicializa <strong>Rocket.js<\/strong> con el constructor:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nclass Rocket&#13;\n{&#13;\nconstructor(x, y)&#13;\n{&#13;\nthis.sprite = new\u00a0\u00a0\u00a0\u00a0 PIXI.Sprite(PIXI.loader.resources[\"assets\/rocket.png\"].texture);&#13;\n&#13;\nthis.sprite.anchor.set(0.5, 0.5);&#13;\nthis.sprite.position.set(x + 40, y);&#13;\n&#13;\nstage.addChild(this.sprite);&#13;\n}&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>Muy bien, si guardas y recargas, puedes disparar cohetes (est\u00e1ticos) presionando la barra espaciadora!<\/p>\n<p>Para que se muevan, necesitamos crear una variable de array que contenga todos los cohetes existentes en el juego (no sabemos cu\u00e1ntos de ellos est\u00e1n en el escenario):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\nlet _list = new Array();&#13;\n&#13;\nclass Rocket&#13;\n{&#13;\nstatic get list() { return _list; }&#13;\nstatic set list(value) { _list = value; }&#13;\n&#13;\n\u2026&#13;\n<\/pre>\n<p>La variable <strong>_list<\/strong> se encuentra fuera de la clase porque es est\u00e1tica, lo que significa que su valor es \u00fanico y no es s\u00f3lo la propiedad de un objeto (a diferencia de esto). Sin embargo, podemos conseguirlo y configurarlo como queramos (con las dos primeras l\u00edneas de la clase).<\/p>\n<p>Podemos empujar el objeto actual dentro de esta lista (dentro del constructor) y declarar la variable de velocidad en el mismo tiempo:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.speed = 20;&#13;\nRocket.list.push(this)&#13;\n<\/pre>\n<p>\u2026. y tambi\u00e9n a\u00f1adir el m\u00e9todo de actualizaci\u00f3n:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\nupdate()&#13;\n{&#13;\nthis.sprite.position.x += this.speed;&#13;\n&#13;\nif (this.sprite.position.x &gt; renderer.width * 1.1) {&#13;\nthis.sprite.destroy();&#13;\nRocket.list.splice(Rocket.list.indexOf(this), 1);&#13;\n}&#13;\n}&#13;\n<\/pre>\n<p>Esto es b\u00e1sicamente lo mismo que antes, actualizamos la posici\u00f3n <strong>x<\/strong> del cohete (y no la <strong>y<\/strong> porque no se mueve verticalmente) y al igual que las nubes, lo eliminamos cuando sale fuera de los l\u00edmites de la pantalla, excepto que esta vez es el borde derecho.<\/p>\n<p>Despu\u00e9s de eso, en el bucle de<strong> main.js,<\/strong> s\u00f3lo tenemos que analizar la lista de cohetes y llamar a la funci\u00f3n de actualizaci\u00f3n para cada elemento:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction loop()&#13;\n{&#13;\ncloudManager.update();&#13;\nplayer.update();&#13;\n&#13;\nRocket.list.map((element) =&gt;&#13;\n{&#13;\nelement.update();&#13;\n});&#13;\n&#13;\nrequestAnimationFrame(loop);&#13;\nrenderer.render(stage);&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>\u00a1Ahora guarda, recarga, y pru\u00e9balo!<\/p>\n<p>Est\u00e1 disparando, pero no es autom\u00e1tico. Tienes que presionar la tecla para cada cohete y cuando no te mueves, es un poco raro porque est\u00e1 disparando muy r\u00e1pido. Lo que queremos es poder disparar autom\u00e1ticamente cuando se mantiene pulsada la tecla, con una velocidad ajustable.<\/p>\n<p>Vamos a definir dos nuevas variables en el constructor de Jugadores: la velocidad de disparo (que puede ser modificada) y el Enfriamiento, que va a ser el valor del temporizador:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\nthis.fireSpeed = 10;&#13;\nthis.fireCooldown = 0;&#13;\n<\/pre>\n<p>Tambi\u00e9n necesitamos actualizar <strong>keyState<\/strong> para a\u00f1adir la tecla de espacio, porque queremos saber si est\u00e1 pulsada o no:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.keyState = {32: false, 37: false, 38: false, 39: false, 40: false};&#13;\n&#13;\n<\/pre>\n<p>Esta es la funci\u00f3n que estamos usando para disparar (tenemos que llamarla en la actualizaci\u00f3n del reproductor):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nupdateFire()&#13;\n{&#13;\nif (this.fireCooldown &lt; this.fireSpeed)&#13;\nthis.fireCooldown++;&#13;\n&#13;\nif (this.keyState[32] &amp;&amp; this.fireCooldown &gt;=\u00a0\u00a0 this.fireSpeed)&#13;\n{&#13;\nlet rocket = new Rocket(this.sprite.position.x,\u00a0\u00a0 this.sprite.position.y);&#13;\nthis.fireCooldown = 0;&#13;\n}&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>Es bastante simple: simplemente incrementamos el temporizador de 0 a la velocidad de disparo que fijamos y si se pulsa la tecla y el temporizador ha alcanzado el valor, generamos un cohete y reajustamos el temporizador a 0.<\/p>\n<p>Esta funci\u00f3n se ejecuta permanentemente en el bucle de actualizaci\u00f3n del reproductor:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nupdate()&#13;\n{&#13;\nthis.sprite.position.x += this.directionX * this.speed;&#13;\nthis.sprite.position.y += this.directionY * this.speed;&#13;\n&#13;\nthis.updateFire();&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>\u00a1Trabajo hecho! Si lo desea m\u00e1s r\u00e1pido, s\u00f3lo tiene que disminuir la velocidad de disparo (y aumentarla para una velocidad m\u00e1s lenta).<\/p>\n<p>\u00a0<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cet article est la deuxi\u00e8me partie de mon tutoriel pour faire un petit jeu avec Javascript. Cr\u00e9er votre premier jeu en JavaScript - Premi\u00e8re partie. Dans cette seconde partie nous allons\u2026<\/p>","protected":false},"author":1,"featured_media":95606,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1374],"tags":[],"class_list":["post-95605","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Realizando tu primer juego en JavaScript \u2013 Segunda parte - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Este art\u00edculo es la segunda parte de mi tutorial para hacer un peque\u00f1o juego con Javascript. Realizando tu primer juego en JavaScript \u2013 Primera parte. En\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Realizando tu primer juego en JavaScript \u2013 Segunda parte\" \/>\n<meta property=\"og:description\" content=\"Este art\u00edculo es la segunda parte de mi tutorial para hacer un peque\u00f1o juego con Javascript. Realizando tu primer juego en JavaScript \u2013 Primera parte. En\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-26T01:09:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/Marcianitos1-5458973.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"746\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Realizando tu primer juego en JavaScript \u2013 Segunda parte\",\"datePublished\":\"2022-07-26T01:09:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/\"},\"wordCount\":1716,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Marcianitos1-5458973.jpg\",\"articleSection\":[\"Javascript\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/\",\"name\":\"Realizando tu primer juego en JavaScript \u2013 Segunda parte - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Marcianitos1-5458973.jpg\",\"datePublished\":\"2022-07-26T01:09:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Este art\u00edculo es la segunda parte de mi tutorial para hacer un peque\u00f1o juego con Javascript. Realizando tu primer juego en JavaScript \u2013 Primera parte. En\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-segunda-parte\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Marcianitos1-5458973.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Marcianitos1-5458973.jpg\",\"width\":746,\"height\":600,\"caption\":\"marcianitos1-5458973-6763870-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"R\u00e9aliser son premier jeu en JavaScript \u2013 Deuxi\u00e8me partie - R Marketing Digital","description":"Cet article est la deuxi\u00e8me partie de mon tutoriel pour faire un petit jeu avec Javascript. Cr\u00e9er votre premier jeu en JavaScript - Premi\u00e8re partie. Au","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/","og_locale":"fr_FR","og_type":"article","og_title":"Realizando tu primer juego en JavaScript \u2013 Segunda parte","og_description":"Este art\u00edculo es la segunda parte de mi tutorial para hacer un peque\u00f1o juego con Javascript. Realizando tu primer juego en JavaScript \u2013 Primera parte. En","og_url":"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/","og_site_name":"R Marketing Digital","article_published_time":"2022-07-26T01:09:46+00:00","og_image":[{"width":746,"height":600,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/Marcianitos1-5458973.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Realizando tu primer juego en JavaScript \u2013 Segunda parte","datePublished":"2022-07-26T01:09:46+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/"},"wordCount":1716,"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/Marcianitos1-5458973.jpg","articleSection":["Javascript"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/","url":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/","name":"R\u00e9aliser son premier jeu en JavaScript \u2013 Deuxi\u00e8me partie - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/Marcianitos1-5458973.jpg","datePublished":"2022-07-26T01:09:46+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Cet article est la deuxi\u00e8me partie de mon tutoriel pour faire un petit jeu avec Javascript. Cr\u00e9er votre premier jeu en JavaScript - Premi\u00e8re partie. Au","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-segunda-parte\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/Marcianitos1-5458973.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/Marcianitos1-5458973.jpg","width":746,"height":600,"caption":"marcianitos1-5458973-6763870-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=95605"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95605\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/95606"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=95605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=95605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=95605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}