{"id":173,"date":"2015-11-01T03:55:15","date_gmt":"2015-11-01T02:55:15","guid":{"rendered":"http:\/\/www.cmarzin.fr\/site\/?p=173"},"modified":"2016-01-07T17:51:11","modified_gmt":"2016-01-07T16:51:11","slug":"pendu","status":"publish","type":"post","link":"https:\/\/www.cmarzin.fr\/site\/2015\/11\/01\/pendu\/","title":{"rendered":"Pendu"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/pendu\/jeu.js\"><\/script><\/p>\n<div class=\"sources\"><i class=\"fa fa-download\"><\/i> <a href=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/pendu\/pendu.rar\">Javascript<\/a> <a href=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/pendu\/pendufla.rar\">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-173 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\/pendu1.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\/pendu1-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu1-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu1.jpg 952w\" 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\/pendu3.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\/pendu3-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu3-300x169.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu3-1024x578.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu3.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\/pendu2.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\/pendu2-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu2-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu2-1024x579.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu2.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\/pendu4.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\/pendu4-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu4-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu4.jpg 640w\" 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>Le pendu est un jeu consistant \u00e0 trouver un mot ou une phrase en devinant quelles sont les lettres qui le composent. Le jeu se joue traditionnellement \u00e0 deux, avec un papier et un crayon, selon un d\u00e9roulement bien particulier.<\/p>\n<p>Les deux joueurs dans cet exemple s&rsquo;appellent A et B.<\/p>\n<p>A pense \u00e0 un mot et dessine une rang\u00e9e de tirets, chacun correspondant \u00e0 une lettre de ce mot.<br \/>\nB annonce une lettre.<\/p>\n<p>    La lettre fait-elle partie du mot ?<br \/>\n    Oui : A l&rsquo;inscrit \u00e0 sa place autant de fois qu&rsquo;elle se trouve dans le mot.<br \/>\n    Non : A dessine le premier trait du pendu.<\/p>\n<p>Le jeu se poursuit jusqu&rsquo;\u00e0 ce que :<\/p>\n<p>    B gagne la partie en trouvant toutes les lettres du mot ou en le devinant correctement.<br \/>\n    A gagne la partie en compl\u00e9tant le dessin du pendu.<\/p>\n<p>Un jeu vraiment tr\u00e8s simple \u00e0 la fois dans sa version classique et dans sa version informatique. Cependant il va nous permettre d&rsquo;aborder une notion parfois bien utile, la gestion du texte.\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\/Le_pendu_%28jeu%29\" target=\"_blank\">Wikipedia<\/a> <a href=\"http:\/\/forums.mediabox.fr\/wiki\/tutoriaux\/javascript\/divers\/exercice_pendu\" 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\/\/ variables\r\nvar canvas, ctx, texte, phrase, erreur, infos, images, touche, lettre, longueur;\t\r\nvar W = 480;\r\nvar H = 480;\r\n \r\n\/\/ pr\u00e9paration du jeu\r\nwindow.onload = function() {\r\n    canvas = document.getElementById('canvas');\r\n    ctx = canvas.getContext('2d');\r\n\tcanvas.width = W;\r\n\tcanvas.height = H;\r\n\tloadImages(5);\r\n}\r\n \r\n\/\/ chargement des images\r\nfunction loadImages(nbImg){\r\n\timages = &#x5B;];\r\n\tfor(var i=1; i&lt;nbImg+1; i++){\r\n\t\tvar b = new Image();\r\n\t\tb.src = &quot;assets\/phase&quot;+i+&quot;.jpg&quot;;\r\n\t\tb.onload = function() {\r\n\t\t\timages.push(this);\r\n\t\t\tif(--nbImg==0) init();\r\n\t\t};\r\n\t}\r\n}\r\n \r\n\/\/ initialisation du jeu\r\nfunction init() {\r\n\terreur = \t\t0;\r\n\tphrase = \t\t&quot;Vous jouez au pendu sur le Wiki de Mediabox&quot;\r\n\tinfos = \t\tphrase.replace(\/&#x5B;A-Za-z]\/g,&quot;_&quot;);\r\n\tlongueur = \t\tphrase.length;\r\n\ttexte = \t\tinfos;\r\n\trender();\r\n\tcanvas.setAttribute('tabindex','1');\r\n\tcanvas.focus();\r\n\tcanvas.addEventListener(&quot;keydown&quot;, appuie, false);\r\n}\r\n \r\n\/\/ gestion phrase\r\nfunction appuie(e){\t\r\n\ttouche = (String.fromCharCode(e.keyCode)).toLowerCase();\r\n\tlettre = false;\t\r\n\tfor (var i=0; i&lt;longueur; i++)\t{\r\n\t\tif (phrase.charAt(i).toLowerCase() == touche){\r\n\t\t\tinfos = infos.substr(0,i)+phrase.substr(i,1)+infos.substr(i+1);\r\n\t\t\tlettre = true;\r\n\t\t}\r\n\t}\r\n\ttexte = infos;\r\n\tif (!lettre) ++erreur;\r\n\trender();\r\n\tif (erreur&gt;4) finPartie(&quot;Perdu, cliquez pour rejouer.&quot;);\r\n\tfor (var j=0; j&lt;longueur; j++)\t{\r\n\t\tif (infos.charAt(j) == &quot;_&quot;)\treturn;\r\n\t}\r\n\tfinPartie(&quot;Bravo, cliquez pour rejouer.&quot;);\r\n}\r\n \r\n\/\/ fin de la partie\r\nfunction finPartie(message){\r\n\talert(message);\r\n\tinit();\r\n}\r\n \r\n\/\/ Dessine le jeu\r\nfunction render() {\t\r\n\tctx.fillStyle = &quot;rgb(256,256,256)&quot;;\r\n\tctx.fillRect(0, 0, W, H);\r\n\tif(erreur&gt;0) ctx.drawImage(images&#x5B;erreur-1],0,0);\r\n\tctx.fillStyle = &quot;black&quot;;\r\n\tctx.font = &quot;16px Arial&quot;;\r\n\tctx.textAlign = &quot;center&quot;;\r\n\tctx.fillText(infos, W\/2, H-30);\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\/Expression_rationnelle\" target=\"_blank\">Expression rationnelle<\/a> <a href=\"http:\/\/www.commentcamarche.net\/contents\/587-javascript-les-tableaux\" target=\"_blank\">Tableaux<\/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\/EventTarget\/addEventListener\" target=\"_blank\">Ecouteurs d&rsquo;\u00e9v\u00e9nement<\/a><\/div>\n<h2 class=\"bloctitle\">A retenir<\/h2>\n<div class=\"blocorange\">\nC&rsquo;est court et il n&rsquo;y a pas grand chose \u00e0 manger l\u00e0 dedans, mais \u00e7a devrait vous permettre de commencer \u00e0 manipuler le texte au sein de vos jeux.\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><i class=\"fa fa-clock-o\"><\/i> 01h00<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> Manipulation du texte<br \/>\n<i class=\"fa fa-suitcase\"><\/i> Bases du langage Javascript<\/p>\n","protected":false},"author":1,"featured_media":161,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":[],"categories":[4],"tags":[12,11,28],"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\/01\/pendu\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pendu - Cmarzin\" \/>\n<meta property=\"og:description\" content=\"01h00  D\u00e9butant  Moteur  Javascript  Manipulation du texte  Bases du langage Javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/01\/pendu\/\" \/>\n<meta property=\"og:site_name\" content=\"Cmarzin\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-01T02:55:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-07T16:51:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu.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=\"2 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\/01\/pendu\/#primaryimage\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu.jpg\",\"contentUrl\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/pendu.jpg\",\"width\":300,\"height\":169},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/01\/pendu\/#webpage\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/01\/pendu\/\",\"name\":\"Pendu - Cmarzin\",\"isPartOf\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/01\/pendu\/#primaryimage\"},\"datePublished\":\"2015-11-01T02:55:15+00:00\",\"dateModified\":\"2016-01-07T16:51:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#\/schema\/person\/7c0008d57d9793c6cac9bea19c9dc1ba\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/01\/pendu\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/01\/pendu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/01\/pendu\/#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\/01\/pendu\/#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\/173"}],"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=173"}],"version-history":[{"count":4,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/173\/revisions"}],"predecessor-version":[{"id":764,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/173\/revisions\/764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media\/161"}],"wp:attachment":[{"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media?parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/categories?post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/tags?post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}