{"id":95597,"date":"2022-10-24T07:04:56","date_gmt":"2022-10-24T05:04:56","guid":{"rendered":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/"},"modified":"2020-12-04T05:12:17","modified_gmt":"2020-12-04T08:12:17","slug":"realizando-tu-primer-juego-en-javascript-primer-parte","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/","title":{"rendered":"Cr\u00e9er votre premier jeu en JavaScript - Premi\u00e8re 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-primer-parte\/#Paso-1-Comenzando-con-un-fondo-animado\" >Paso 1: Comenzando con un fondo animado<\/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-primer-parte\/#%C2%BFComo-empezar\" >\u00bfC\u00f3mo empezar?<\/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-primer-parte\/#%C2%A1Nubes-por-todas-partes\" >\u00a1Nubes por todas partes!<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div itemprop=\"articleBody\">\n<p>En el tutorial de hoy, vamos a empezar con la primera parte para realizar un juego fenomenal en JavaScript. Este post es una de las muestras de que este lenguaje de programaci\u00f3n es sumamente v\u00e9rsatil, f\u00e1cil de aprender, y te ayudar\u00e1 a simplificar muchos aspectos de tu c\u00f3digo. As\u00ed que, sin mas que decir \u00a1Comencemos!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Paso-1-Comenzando-con-un-fondo-animado\"><\/span>Paso 1: Comenzando con un fondo animado<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Realmente quer\u00eda escribir un tutorial sobre una tecnolog\u00eda de juegos que me gusta usar, as\u00ed que aqu\u00ed est\u00e1. En esta historia, vamos a empezar a hacer un peque\u00f1o juego de <strong>shoot\u2019em up<\/strong> con <strong>PixiJS,<\/strong> una biblioteca de Javascript muy simple y genial.<\/p>\n<p>Lo que vamos a hacer exactamente es hacer una nave espacial capaz de moverse y disparar, olas enemigas entrando y un hermoso fondo animado con nubes en movimiento. La primera parte (esta que lees ahora) se centrar\u00e1 en los antecedentes.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo-empezar\"><\/span>\u00bfC\u00f3mo empezar?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Comencemos por poner en marcha nuestro proyecto: He subido una estructura de c\u00f3digo ya establecida, as\u00ed que todos estamos trabajando con la misma base. Sin embargo, si quieres hacerlo t\u00fa mismo, puse una foto de mi carpeta justo debajo:<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/Karzam\/Spaceship_Tutorial_Starter_Project\">Clic aqu\u00ed para descargar tu carpeta<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-235 aligncenter\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/hn.jpg\" alt=\"Comencemos por poner en marcha nuestro proyecto: He subido una estructura de c\u00f3digo ya establecida, as\u00ed que todos estamos trabajando con la misma base. Sin embargo, si quieres hacerlo t\u00fa mismo, puse una foto de mi carpeta justo debajo:\" width=\"250\" height=\"297\"\/><\/p>\n<p>Necesitaremos un servidor local para ejecutar el juego: Te invito a descargar WAMP si est\u00e1s trabajando con Windows, o MAMP para macOS, son gratuitos y f\u00e1ciles de usar. Vamos a poner tu carpeta de juegos en el servidor (htdocs for MAMP \/ www for WAMP) y teclear el enlace localhost en tu navegador favorito (para m\u00ed ser\u00eda:<em> http:\/\/localhost:8888\/Spaceship\/bin\/<\/em>)<\/p>\n<p>En<em> index.html<\/em>, estamos importando los archivos javascript del encabezado:<\/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=\"\u201c..\/src\/main.js\u201d\"&gt;&lt;\/script&gt;&#13;\n&#13;\n<\/pre>\n<p>\u2026 y necesitamos hacer lo mismo para cada archivo que hacemos. Luego viene la inicializaci\u00f3n de Pixi (que se basa en el motor de renderizado WebGL):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nvar renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);&#13;\n&#13;\n<\/pre>\n<p>Para este tutorial, le decimos al juego que cubra toda la ventana del navegador, as\u00ed que si lo intentas ahora obtendr\u00e1s un fondo totalmente negro.<\/p>\n<p>El archivo main.js es el lugar donde comienza todo el juego. Es como un manager, con la primera funci\u00f3n ejecutada del juego, y el bucle donde podemos decirle al juego lo que tiene que hacer en cada cuadro. Lo que queremos es un fondo azul para el cielo cuando empiece el juego, as\u00ed que vamos a actualizar la <strong>funci\u00f3n init<\/strong>:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\nfunction init()&#13;\n{&#13;\nrenderer.backgroundColor = 0x22A7F0;&#13;\nrenderer.render(stage);&#13;\nloop();&#13;\n}&#13;\n<\/pre>\n<p>Pixi est\u00e1 usando el formato de color hexadecimal, as\u00ed que necesitas escribir tu c\u00f3digo de color precedido por 0x. \u00a1Guardemos y veamos el resultado en su navegador!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%A1Nubes-por-todas-partes\"><\/span>\u00a1Nubes por todas partes!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Este fondo es muy aburrido, agreguemos algunas nubes flotantes.<\/p>\n<p>Primero, agreguemos un nuevo archivo de la clase <em>CloudManager<\/em> en la carpeta<strong> src<\/strong> (el cual va a crear y mover las nubes).<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\nclass CloudManager&#13;\n{&#13;\nconstructor()&#13;\n{&#13;\n}&#13;\nupdate()&#13;\n{&#13;\n}&#13;\n}&#13;\n<\/pre>\n<p>No olvides a\u00f1adirlo en el archivo<em> index.html<\/em> como hicimos para <em>main.js<\/em>:<\/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\/CloudManager.js\"&gt;&lt;\/script&gt;&#13;\n&lt;script src=\"..\/src\/main.js\"&gt;&lt;\/script&gt;&#13;\n&#13;\n<\/pre>\n<p>El constructor es el punto de entrada de esta clase donde podemos a\u00f1adir la <strong>funci\u00f3n spawn<\/strong> para nuestras nubes. Lo que queremos es b\u00e1sicamente un m\u00e9todo capaz de crear una nube cada <em>X<\/em> segundos, y est\u00e1 perfecto porque hay una cosa de javascript para esto:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nwindow.setInterval(function()&#13;\n{&#13;\n}&#13;\n, 1000);&#13;\n&#13;\n<\/pre>\n<p>Este pedazo de c\u00f3digo, colocado en el constructor, llamar\u00e1 a lo que est\u00e1 dentro de los soportes del juego cada 1000 milisegundos (= 1 segundo).<\/p>\n<p>A\u00f1adamos sprites de nubes en la carpeta de activos, y como es mejor tenemos 2 im\u00e1genes diferentes: (las nubes son blancas con fondo transparente por lo que eran invisibles en esta p\u00e1gina, pero aqu\u00ed est\u00e1n los enlaces en GitHub:<\/p>\n<p><strong>Necesitamos cargar los sprites antes de que empiece el juego<\/strong>, as\u00ed que a\u00f1\u00e1delos en la funci\u00f3n <em>Pixi.loader.add<\/em>:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nPIXI.loader.add([&#13;\n\"assets\/cloud_1.png\",&#13;\n\"assets\/cloud_2.png\"&#13;\n]).load(init);&#13;\n&#13;\n<\/pre>\n<p>Ok, ahora podemos mostrar las nubes en el m\u00e9todo <em>setInterval<\/em> del <strong>CloudManager<\/strong>:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nwindow.setInterval(function()&#13;\n{&#13;\nconst sprite = (Math.random() &gt; 0.5 ? \"cloud_1\" : \"cloud_2\");&#13;\nthis.cloud = new PIXI.Sprite(PIXI.loader.resources[\"assets\/\" + sprite + \".png\"].texture);&#13;\nthis.cloud.anchor.set(0.5, 0.5);&#13;\nthis.cloud.position.set(renderer.width * 1.2, renderer.height * Math.random());&#13;\nstage.addChild(this.cloud);&#13;\n}&#13;\n, 1000);&#13;\n&#13;\n<\/pre>\n<p>Para reanudar este c\u00f3digo:<\/p>\n<ul>\n<li>Primero, estamos calculando un n\u00famero aleatorio entre 0 y 1, y o bien es inferior a 0,5, por lo que almacenamos el primer sprite en una constante, o bien es el segundo.<\/li>\n<li>Luego, creamos un nuevo objeto sprite con la imagen que obtuvimos en la l\u00ednea anterior.<\/li>\n<li>El punto de origen de este sprite va a ser su esquina superior izquierda, por lo que fijamos su punto de anclaje en el centro.<\/li>\n<li>Tenemos que mostrar la nube m\u00e1s all\u00e1 del borde derecho de la pantalla, para que pueda moverse a la izquierda a trav\u00e9s de la pantalla: <strong>renderer.width * 1.2 es la posici\u00f3n del borde izquierdo + el ancho de la pantalla + 20% de su ancho.<\/strong> Podemos estar seguros de que no lo veremos desovando. Para la posici\u00f3n <strong>y, renderer.height * Math.random()<\/strong> es un n\u00famero entre <strong>0 y la altura de la ventana<\/strong>. Por lo tanto, la posici\u00f3n vertical de la nube se ubicar\u00e1 entre la parte superior e inferior de la pantalla.<\/li>\n<li>Por \u00faltimo, a\u00f1adimos esta nube a la escena.<\/li>\n<\/ul>\n<p>Si ejecuta este c\u00f3digo, no deber\u00eda aparecer nada, y es a prop\u00f3sito porque tienen que desaparecer de la vista. As\u00ed que ahora tenemos que hacer que se muevan.<\/p>\n<p>La funci\u00f3n de actualizaci\u00f3n es el lugar para hacerlo. Pero necesitamos almacenar las nubes en un <strong>array<\/strong> para poder iterar y establecer sus posiciones. Inicialicemos una nueva matriz en el <strong>constructor de<\/strong> <strong>CloudManager<\/strong>:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.cloudsList = [];&#13;\n&#13;\n<\/pre>\n<p>\u2026 y empuja las nubes hacia adentro despu\u00e9s de la <strong>funci\u00f3n stage.addChild<\/strong>:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.cloudsList.push(this.cloud);&#13;\n&#13;\n<\/pre>\n<p>Ahora podemos iterar el array en actualizaci\u00f3n y establecer la posici\u00f3n de cada nube:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nthis.cloudsList.forEach(function(element) {&#13;\nelement.position.x -= 4;&#13;\n});&#13;\n&#13;\n<\/pre>\n<p>\u00a1Ahora deber\u00eda estar funcionando!<\/p>\n<p>Oh, espera, algo deber\u00eda molestarnos: \u00bfad\u00f3nde van todas esas nubes?<\/p>\n<p>S\u00ed, si no los eliminamos despu\u00e9s de que salieron de la pantalla, seguir\u00e1n existiendo y puede causar algunos problemas de rendimiento. A\u00f1adamos una declaraci\u00f3n de forEach para cada uno de ellos que los borre cuando su posici\u00f3n horizontal sea un poco inferior al borde izquierdo de la pantalla (as\u00ed que no podemos verlos saliendo):<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nif (element.position.x &lt; -renderer.width * 0.3) {&#13;\nelement.destroy();&#13;\narray.splice(0, 1);&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>\u00a1Hemos terminado con las nubes!<\/p>\n<p>\u00bfQu\u00e9 hay de hacer una variaci\u00f3n aleatoria en el tama\u00f1o de las nubes? A\u00f1ade esto al bloque de creaci\u00f3n de nubes:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nlet minScale = 0.2;&#13;\nlet maxScale = 1.2;&#13;\nlet scale = Math.random() * (maxScale - minScale) + minScale;&#13;\nthis.cloud.scale.set(scale, scale);&#13;\n&#13;\n<\/pre>\n<p>Si te falta algo o no funciona en tu c\u00f3digo, puedes comprobar el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/Karzam\/Spaceship_Tutorial_Part_1\">resultado aqu\u00ed.<\/a><\/p>\n<p>Ahora contin\u00faa a la pr\u00f3xima parte para finalizar nuestro primer juego en JavaScript. \u00a1Sigue adelante!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>En el tutorial de hoy, vamos a empezar con la primera parte para realizar un juego fenomenal en JavaScript. Este post es una de las muestras de que este lenguaje&#8230;<\/p>","protected":false},"author":1,"featured_media":95598,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1374],"tags":[],"class_list":["post-95597","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 Primer parte - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"En el tutorial de hoy, vamos a empezar con la primera parte para realizar un juego fenomenal en JavaScript. Este post es una de las muestras de que este\" \/>\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-primer-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 Primer parte\" \/>\n<meta property=\"og:description\" content=\"En el tutorial de hoy, vamos a empezar con la primera parte para realizar un juego fenomenal en JavaScript. Este post es una de las muestras de que este\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-24T05:04:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/vintage-9247610.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"440\" \/>\n\t<meta property=\"og:image:height\" content=\"264\" \/>\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-primer-parte\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Realizando tu primer juego en JavaScript \u2013 Primer parte\",\"datePublished\":\"2022-10-24T05:04:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/\"},\"wordCount\":1035,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/vintage-9247610.jpg\",\"articleSection\":[\"Javascript\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/\",\"name\":\"Realizando tu primer juego en JavaScript \u2013 Primer parte - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/vintage-9247610.jpg\",\"datePublished\":\"2022-10-24T05:04:56+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"En el tutorial de hoy, vamos a empezar con la primera parte para realizar un juego fenomenal en JavaScript. Este post es una de las muestras de que este\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/realizando-tu-primer-juego-en-javascript-primer-parte\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/vintage-9247610.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/vintage-9247610.jpg\",\"width\":440,\"height\":264,\"caption\":\"vintage-9247610-6026200-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 Premi\u00e8re partie - R Marketing Digital","description":"Dans le tutoriel d&#039;aujourd&#039;hui, nous allons commencer par la premi\u00e8re partie de la cr\u00e9ation d&#039;un jeu ph\u00e9nom\u00e9nal en JavaScript. Cet article est l&#039;un des exemples que ce","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-primer-parte\/","og_locale":"fr_FR","og_type":"article","og_title":"Realizando tu primer juego en JavaScript \u2013 Primer parte","og_description":"En el tutorial de hoy, vamos a empezar con la primera parte para realizar un juego fenomenal en JavaScript. Este post es una de las muestras de que este","og_url":"https:\/\/rmarketingdigital.com\/fr\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-24T05:04:56+00:00","og_image":[{"width":440,"height":264,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/vintage-9247610.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-primer-parte\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Realizando tu primer juego en JavaScript \u2013 Primer parte","datePublished":"2022-10-24T05:04:56+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/"},"wordCount":1035,"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/vintage-9247610.jpg","articleSection":["Javascript"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/","url":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/","name":"R\u00e9aliser son premier jeu en JavaScript \u2013 Premi\u00e8re partie - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/vintage-9247610.jpg","datePublished":"2022-10-24T05:04:56+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Dans le tutoriel d&#039;aujourd&#039;hui, nous allons commencer par la premi\u00e8re partie de la cr\u00e9ation d&#039;un jeu ph\u00e9nom\u00e9nal en JavaScript. Cet article est l&#039;un des exemples que ce","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/javascript\/realizando-tu-primer-juego-en-javascript-primer-parte\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/vintage-9247610.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/vintage-9247610.jpg","width":440,"height":264,"caption":"vintage-9247610-6026200-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\/95597","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=95597"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95597\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/95598"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=95597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=95597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=95597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}