{"id":20,"date":"2015-11-04T20:48:37","date_gmt":"2015-11-04T19:48:37","guid":{"rendered":"http:\/\/www.cmarzin.fr\/site\/?p=20"},"modified":"2016-01-07T18:30:27","modified_gmt":"2016-01-07T17:30:27","slug":"tuto1","status":"publish","type":"post","link":"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/","title":{"rendered":"Snake"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/snake\/jeu.js\"><\/script><\/p>\n<div class=\"sources\"><i class=\"fa fa-download\"><\/i> <a href=\"http:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake.rar\">Javascript<\/a> <a href=\"\">Actionscript<\/a>\n<\/div>\n<h2 class=\"bloctitle\">Pr\u00e9sentation<\/h2>\n<div class=\"bloc\">\n<div class=\"captures\">\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 25%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-20 gallery-columns-4 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake1.jpg' title=\"\" data-rl_title=\"\" class=\"rl-gallery-link\" data-rl_caption=\"\" data-rel=\"lightbox-gallery-1\"><img width=\"300\" height=\"169\" src=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake1-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake1-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake1-1024x579.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake1.jpg 1359w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake21.jpg' title=\"\" data-rl_title=\"\" class=\"rl-gallery-link\" data-rl_caption=\"\" data-rel=\"lightbox-gallery-1\"><img width=\"300\" height=\"169\" src=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake21-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake21-300x169.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake21-1024x578.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake21.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake3.jpg' title=\"\" data-rl_title=\"\" class=\"rl-gallery-link\" data-rl_caption=\"\" data-rel=\"lightbox-gallery-1\"><img width=\"300\" height=\"169\" src=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake3-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake3-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake3-1024x579.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake3.jpg 1274w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake4.jpg' title=\"\" data-rl_title=\"\" class=\"rl-gallery-link\" data-rl_caption=\"\" data-rel=\"lightbox-gallery-1\"><img width=\"300\" height=\"169\" src=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake4-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake4-300x169.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake4-1024x578.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake4.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n<\/div>\n<p>Snake, de l&rsquo;anglais signifiant \u00ab serpent \u00bb, est un jeu vid\u00e9o populaire cr\u00e9\u00e9 au milieu des ann\u00e9es 1970, disponible de par sa simplicit\u00e9 sur l&rsquo;ensemble des plate-formes de jeu existantes sous des noms de clone. Il s&rsquo;est de nouveau fait conna\u00eetre dans les ann\u00e9es 1990 avec l&rsquo;\u00e9mergence du nouveau support de jeu qu&rsquo;est le t\u00e9l\u00e9phone portable. Aujourd&rsquo;hui, il est toujours aussi populaire et est devenu un classique dans les jeux vid\u00e9o.<\/p>\n<p>Le joueur contr\u00f4le une longue et fine cr\u00e9ature semblable \u00e0 un serpent, qui doit slalomer entre les bords de l&rsquo;\u00e9cran et les obstacles qui pars\u00e8ment le niveau. Pour gagner chacun des niveaux, le joueur doit faire manger \u00e0 son serpent un certain nombre de pastilles ou de fruits (de la nourriture en g\u00e9n\u00e9ral), allongeant \u00e0 chaque fois la taille de la bestiole. Alors que le serpent avance inexorablement, le joueur ne peut que lui indiquer une direction \u00e0 suivre (en haut, en bas, \u00e0 gauche, \u00e0 droite) afin d&rsquo;\u00e9viter que la t\u00eate du serpent ne touche les murs ou son propre corps, dans ce cas il risque de mourir.<\/p>\n<p>Le niveau de difficult\u00e9 est contr\u00f4l\u00e9 par l&rsquo;aspect du niveau (simple ou labyrinthique), le nombre de pastilles \u00e0 manger, l&rsquo;allongement du serpent et sa vitesse.\n<\/p><\/div>\n<div class=\"lsep\"><\/div>\n<div class=\"sourcesdown\"><i class=\"fa fa-book\"><\/i> <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Snake_%28jeu_vid%C3%A9o%29\" target=\"_blank\">Wikipedia<\/a> <a href=\"http:\/\/forums.mediabox.fr\/wiki\/tutoriaux\/javascript\/divers\/exercice_snake\" target=\"_blank\">Mediabox<\/a><\/div>\n<h2 class=\"bloctitle\">Le code Javascript<\/h2>\n<div class=\"bloccode\">\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\n\/\/ variables\r\nvar canvas, ctx, longueur, angle, compteur, ajouteAnneaux, victoire, vitesse, droite, gauche, snake, pomme, posx, posy, stockAnneaux, timer;\r\nvar W = 480;\r\nvar H = 480;\r\n\r\n\/\/ charger les images du jeu\r\nvar snakeImg = new Image();\r\nvar head = new Image();\r\nvar pommeImg = new Image();\r\nvar fond = new Image();\r\nfond.src = &quot;assets\/fond.jpg&quot;;\r\npommeImg.src = &quot;assets\/pomme.png&quot;;\r\nhead.src = &quot;assets\/head.png&quot;;\r\nsnakeImg.src = &quot;assets\/anneau.png&quot;;\r\n\r\n\/\/ pr\u00e9paration du jeu\r\nwindow.onload = function() {\r\n\tcanvas = document.getElementById('canvas');\r\n\tctx = canvas.getContext('2d');\r\n\tcanvas.width = W;\r\n\tcanvas.height = H;\r\n\tinit();\r\n}\r\n\r\n\/\/ initialisation du jeu\r\nfunction init() {\r\n\r\n\tsnake = {};\r\n\tpomme = {};\r\n\tposx = &#x5B;];\r\n\tposy = &#x5B;];\r\n\tstockAnneaux = &#x5B;];\r\n\tlongueur = 5;\r\n\tangle = 0;\r\n\tcompteur = 0;\r\n\tajouteAnneaux = 4;\r\n\tvictoire = 140;\r\n\tvitesse = 10;\r\n\tdroite = 0;\r\n\tgauche = 0;\r\n\r\n\tfor (var i=0; i&lt;longueur; i++) {\r\n\t\tstockAnneaux.push({x:0,y:0,width:snakeImg.width,height:snakeImg.height})\r\n\t}\r\n\r\n\tsnake.x = W*.5;\r\n\tsnake.y = H*.5;\r\n\tsnake.width = head.width;\r\n\tsnake.height = head.height;\r\n\t\t\t\t\r\n\tpomme.x = 30+Math.random()*(W-60);\r\n\tpomme.y = 30+Math.random()*(H-60);\r\n\tpomme.width = pommeImg.width;\r\n\tpomme.height = pommeImg.height;\r\n\t\t\r\n\tcanvas.setAttribute('tabindex','1');\r\n\tcanvas.focus();\r\n\ttimer = setInterval(main,60);\r\n\tcanvas.addEventListener(&quot;keydown&quot;, appuie, false);\r\n\tcanvas.addEventListener(&quot;keyup&quot;, relache, false);\r\n}\r\n     \r\n\/\/ gestion clavier\r\nfunction appuie(e){\t\r\n\tif (e.keyCode == 39) droite = 1;\r\n\tif (e.keyCode == 37) gauche = 1;\r\n} \r\n\t\r\n\/\/ gestion clavier\r\nfunction relache(e){\t\r\n\tif (e.keyCode == 39) droite = 0;\r\n\tif (e.keyCode == 37) gauche = 0;\r\n} \r\n\t \r\n\/\/ boucle principale\r\nfunction main(){\r\n\tvar i;\r\n\tvar j;\r\n\r\n\t\/\/ Direction\r\n\tangle += (parseInt(droite)-parseInt(gauche))*20;\r\n\t\r\n\t\/\/ Enregistre la position de la t\u00eate\r\n\tposx&#x5B;0] = snake.x;\r\n\tposy&#x5B;0] = snake.y\r\n\t\t\r\n\t\/\/ Deplace la t\u00eate\r\n\tsnake.x += Math.cos(angle*Math.PI\/180)*vitesse;\r\n\tsnake.y += Math.sin(angle*Math.PI\/180)*vitesse;\r\n\r\n\t\/\/ Envoye le dernier anneau en premier \r\n\tvar dernier = longueur-1-compteur++;\r\n\tif (dernier == 0) compteur = 0;\r\n\tstockAnneaux&#x5B;dernier].x = posx&#x5B;0];\r\n\tstockAnneaux&#x5B;dernier].y = posy&#x5B;0];\r\n\t\t\r\n\t\/\/ D\u00e9place les anneaux\r\n\tfor (i=longueur-1; i&gt;0; i--) {\r\n\t\tposx&#x5B;i] = posx&#x5B;i-1];\r\n\t\tposy&#x5B;i] = posy&#x5B;i-1];\r\n\t}\r\n\r\n\t\/\/ si la t\u00eate touche de la nourriture\r\n\tif (collisions(snake,pomme)) {\r\n\t\t\t\r\n\t\t\/\/ ajoute des anneaux\r\n\t\tfor (i=0; i&lt;ajouteAnneaux; i++) {\r\n\t\t\tposx&#x5B;longueur] = posx&#x5B;longueur-1];\r\n\t\t\tposy&#x5B;longueur] = posy&#x5B;longueur-1];\r\n\t\t\tlongueur++;\r\n\t\t\tstockAnneaux.push({x:0,y:0,width:snakeImg.width,height:snakeImg.height});\r\n\t\t}\r\n\t\t\t\r\n\t\t\/\/ place la pomme ailleurs\r\n\t\tpomme.x = 30+Math.random()*(W-60);\r\n\t\tpomme.y = 30+Math.random()*(H-60);\r\n\t\t\t\r\n\t\t\/\/ Repositionne le Snake complet (assure la coh\u00e9sion)\r\n\t\tfor (i=0; i&lt;longueur; i++) {\r\n\t\t\tstockAnneaux&#x5B;i].x = posx&#x5B;i];\r\n\t\t\tstockAnneaux&#x5B;i].y = posy&#x5B;i];\r\n\t\t}\r\n\t\tcompteur = 0;\r\n\t}\r\n\t\t\r\n\t\/\/ V\u00e9rifie si la t\u00eate touche un bord\r\n\tif (snake.x&lt;0 || snake.x&gt;W || snake.y&lt;0 || snake.y&gt;H) finPartie();\r\n\t\r\n\t\/\/ V\u00e9rifie si la t\u00eate touche un anneau\r\n\tvar point = {x:snake.x+Math.cos(angle*Math.PI\/180)*4, y:snake.y+Math.sin(angle*Math.PI\/180)*4, width:1, height:1};\r\n\tfor (i =0; i&lt;stockAnneaux.length; i++){\r\n\t\tif(collisions(point,stockAnneaux&#x5B;i])) finPartie();\r\n\t}\r\n\r\n\t\/\/ v\u00e9rifie si le joueur gagne\r\n\tif (longueur&gt;=victoire) gagnePartie();\r\n\r\n\t\/\/ dessin final\r\n\trender();\r\n} \r\n\t\r\n\/\/ collisions\r\nfunction collisions(A,B) {\r\n\tif (A.y+A.height &lt; B.y || A.y &gt; B.y+B.height || A.x &gt; B.x+B.width || A.x+A.width &lt; B.x) return false;\r\n\treturn true;\r\n}\r\n\t\r\nfunction finPartie(){\r\n\talert(&quot;Perdu, cliquez pour rejouer.&quot;);\r\n\tclearInterval(timer);\r\n\tinit();\r\n}\r\n\t\r\nfunction gagnePartie(){\r\n\talert(&quot;Bravo, cliquez pour rejouer.&quot;);\r\n\tclearInterval(timer);\r\n\tinit();\r\n}\r\n\t \r\n\/\/ Dessine le jeu\r\nfunction render() {\t\r\n\tctx.drawImage(fond,0,0);\r\n\tctx.save();\r\n\t\t\r\n\tctx.translate(snake.x + snake.width \/ 4, snake.y + snake.height \/ 2);\r\n\tctx.rotate(angle*Math.PI\/180);\r\n\tctx.drawImage(head,-snake.width\/4,-snake.height\/2);\r\n\tctx.translate(-(snake.x + snake.width \/ 4), -(snake.y + snake.height \/ 2));\r\n\tctx.restore();\r\n\t\t\r\n\tfor(var i =0; i&lt;stockAnneaux.length;i++){\r\n\t\tctx.drawImage(snakeImg,posx&#x5B;i],posy&#x5B;i]);\r\n\t}\r\n\tctx.drawImage(pommeImg,pomme.x,pomme.y);\r\n}\r\n<\/pre>\n<\/div>\n<div class=\"lsep\"><\/div>\n<div class=\"sourcesdown\"><i class=\"fa fa-cog\"><\/i> <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Trigonom%C3%A9trie\" target=\"_blank\">Trigonom\u00e9trie<\/a> <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/CanvasRenderingContext2D\" target=\"_blank\">Canvas Rendering Context 2D<\/a> <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/WindowTimers\/setInterval\" target=\"_blank\">setInterval<\/a><\/div>\n<h2 class=\"bloctitle\">A retenir<\/h2>\n<div class=\"blocorange\">\nCe qui est notable dans ce programme c&rsquo;est la mani\u00e8re dont on va g\u00e9rer les anneaux du serpent. Si l&rsquo;on essaye d&rsquo;ajouter des anneaux \u00e0 la suite du dernier, on risque fort de se compliquer la t\u00e2che, il faut non seulement les coordonn\u00e9es du dernier anneau, mais \u00e9galement savoir dans quelle direction le placer. Sachant qu&rsquo;on utilise la trigonom\u00e9trie, nous avons 360 possibilit\u00e9s pour placer ces nouveaux anneaux. C&rsquo;est pourquoi il faut essayer de penser le syst\u00e8me autrement, la solution est de placer tout nouvel anneau \u00e0 l&rsquo;ancienne place de la t\u00eate du serpent, ce dernier avan\u00e7ant en permanence. Ainsi on simplifie son positionnement, mais on s&rsquo;assure aussi que le serpent n&rsquo;est pas dans une configuration o\u00f9 il risque d&rsquo;entrer en collision avec ses propres anneaux quand il mange une pomme, les  nouveaux anneaux s&rsquo;ajoutant juste derri\u00e8re sa t\u00eate.<\/p>\n<p>L&rsquo;autre petite chose utile ici c&rsquo;est la trigonom\u00e9trie. Pour ceux qui n&rsquo;en auraient aucune notion, on joue avec des angles et on utilise le sinus et le cosinus de l&rsquo;angle pour d\u00e9terminer une direction sur les deux axes (x et y). Il suffit ensuite de multiplier cette direction sur chaque axe par une vitesse donn\u00e9e et l&rsquo;objet avance. Attention, dans la plupart des langages de programmation les angles sont exprim\u00e9s en radians, il nous faut donc op\u00e9rer une conversion entre les degr\u00e9s et les radians pour faire nos calculs. <\/p>\n<p>Enfin, derni\u00e8re petite astuce concernant les graphismes, chaque objet poss\u00e8de un point d&rsquo;origine ou de pivot, c&rsquo;est lui qu&rsquo;on utilise pour placer l&rsquo;objet, or ce point est la plupart du temps le point situ\u00e9 aux coordonn\u00e9es 0,0 de l&rsquo;objet soit son point haut gauche. Afin d&rsquo;afficher correctement nos objets \u00e0 l&rsquo;\u00e9cran il va nous falloir appliquer une petite correction pour replacer virtuellement ce point au centre de l&rsquo;objet avant de l&rsquo;afficher.\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p><i class=\"fa fa-clock-o\"><\/i> 03h00<br \/>\n<i class=\"fa fa-user\"><\/i> D\u00e9butant<br \/>\n<i class=\"fa fa-code\"><\/i> Moteur<br \/>\n<i class=\"fa fa-cog\"><\/i> Javascript<br \/>\n<i class=\"fa fa-graduation-cap\"><\/i> G\u00e9om\u00e9trie et Math\u00e9matiques<br \/>\n<i class=\"fa fa-suitcase\"><\/i> Bases du langage Javascript<\/p>\n","protected":false},"author":1,"featured_media":88,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":[],"categories":[4],"tags":[12,11,14],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Snake - Cmarzin\" \/>\n<meta property=\"og:description\" content=\"03h00  D\u00e9butant  Moteur  Javascript  G\u00e9om\u00e9trie et Math\u00e9matiques  Bases du langage Javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/\" \/>\n<meta property=\"og:site_name\" content=\"Cmarzin\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-04T19:48:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-07T17:30:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"169\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture est.\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#website\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/\",\"name\":\"Cmarzin\",\"description\":\"Formation et d\\u00e9veloppement Web et Multimedias\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.cmarzin.fr\/site\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/#primaryimage\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake.jpg\",\"contentUrl\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/snake.jpg\",\"width\":300,\"height\":169},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/#webpage\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/\",\"name\":\"Snake - Cmarzin\",\"isPartOf\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/#primaryimage\"},\"datePublished\":\"2015-11-04T19:48:37+00:00\",\"dateModified\":\"2016-01-07T17:30:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#\/schema\/person\/7c0008d57d9793c6cac9bea19c9dc1ba\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/\",\"name\":\"Accueil\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/04\/tuto1\/#webpage\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#\/schema\/person\/7c0008d57d9793c6cac9bea19c9dc1ba\",\"name\":\"cmarzin@noos.fr\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#personlogo\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2719b7011bb8e1850a08c47f07a022ed?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2719b7011bb8e1850a08c47f07a022ed?s=96&d=mm&r=g\",\"caption\":\"cmarzin@noos.fr\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/20"}],"collection":[{"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":105,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/20\/revisions\/744"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media\/88"}],"wp:attachment":[{"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}