{"id":169,"date":"2015-11-13T03:54:35","date_gmt":"2015-11-13T02:54:35","guid":{"rendered":"http:\/\/www.cmarzin.fr\/site\/?p=169"},"modified":"2016-01-07T05:08:05","modified_gmt":"2016-01-07T04:08:05","slug":"memory","status":"publish","type":"post","link":"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/memory\/","title":{"rendered":"Memory"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/memory\/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\/memory\/memory.rar\">Javascript<\/a> <a href=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/memory\/memoryfla.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-169 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\/memory3.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\/memory3-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory3-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory3-1024x579.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory3.jpg 1600w\" 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\/memory2.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\/memory2-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory2-300x169.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory2-1024x578.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory2.jpg 1406w\" 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\/memory1.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\/memory1-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory1-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory1-1024x579.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory1.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\/memory4.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\/memory4-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory4-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory4-1024x579.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory4.jpg 1274w\" 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 jeu se compose de paires de cartes portant des illustrations identiques. L&rsquo;ensemble des cartes est m\u00e9lang\u00e9, puis \u00e9tal\u00e9 face contre table. \u00c0 son tour, chaque joueur retourne deux cartes de son choix. S&rsquo;il d\u00e9couvre deux cartes identiques, il les ramasse et les conserve, ce qui lui permet de rejouer. Si les cartes ne sont pas identiques, il les retourne faces cach\u00e9es \u00e0 leur emplacement de d\u00e9part.<\/p>\n<p>Le jeu se termine quand toutes les paires de cartes ont \u00e9t\u00e9 d\u00e9couvertes et ramass\u00e9es. Le gagnant est le joueur qui poss\u00e8de le plus de paires.<\/p>\n<p>Un jeu tr\u00e8s simple qui, pour notre exercice, se jouera en solo.\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\/Memory_%28jeu%29\" target=\"_blank\">Wikipedia<\/a> <a href=\"http:\/\/forums.mediabox.fr\/wiki\/tutoriaux\/javascript\/divers\/exercice_memory\" 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,posX,posY,c1,c2,i,reste;\t\t\t\t\t\/\/ globales\r\nvar images, tuiles, paires;\t\t\t\t\t\t\/\/ tableaux\r\n \r\n\/\/ param\u00e8tres\r\nvar C = \t6;\r\nvar T = \t80;\r\nvar W = \t480;\r\nvar H = \t480;\r\nvar nbImg = \t20;\r\nvar dos = \t19;\r\nvar vide = \t20;\r\n \r\nwindow.onload = function() {\t\t\t\t\t\t\/\/ pr\u00e9paration du jeu\r\n    canvas = \t\tdocument.getElementById('canvas');\r\n    ctx = \t\t\tcanvas.getContext('2d');\r\n\tposX = \t\t\tcanvas.offsetLeft;\r\n\tposY = \t\t\tcanvas.offsetTop;\r\n\tcanvas.width = \tW;\r\n\tcanvas.height = H\r\n\tloadImages();\r\n}\r\n \r\nfunction loadImages(){\t\t\t\t\t\t\t\/\/ chargement des images\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\/img&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\nfunction init() {\t\t\t\t\t\t\t\/\/ initialisation de la partie\r\n\ttuiles = \t&#x5B;];\r\n\tpaires = \t&#x5B;];\r\n\ttotal = \tC*C;\r\n\tfor (i=0; i&lt;total*.5; i++){\r\n\t\tpaires.push(i,i);\r\n\t}\r\n\tfor (i=0; i&lt;total; i++){\r\n\t\tvar c = {};\r\n\t\tc.x = parseInt(i%C)*T;\r\n\t\tc.y = parseInt(i\/C)*T;\r\n\t\tvar r = parseInt(Math.random()*paires.length);\r\n\t\tc.ref = paires&#x5B;r]+1;\r\n\t\tpaires.splice(r,1);\r\n\t\tc.frame = dos;\r\n\t\ttuiles.push(c);\r\n\t}\r\n\trender();\r\n\tcanvas.addEventListener(&quot;click&quot;, choisir, false);\r\n}\r\n \r\nfunction choisir(e){\t\t\t\t\t\t\t\t\t\t\t\t\/\/ cliquer sur une case\r\n \r\n\tvar c = tuiles&#x5B;parseInt((e.clientX-posX)\/T)+parseInt((e.clientY-posY)\/T)*C];\t\t\t\t\/\/ trouve la case sur laquelle on a cliqu\u00e9\r\n \r\n\tif(c.frame != vide) {\t\t\t\t\t\t\t\t\t\t\t\/\/ si ce n'est pas une case vide\r\n\t\tc.frame = c.ref;\t\t\t\t\t\t\t\t\t\t\/\/ enregistre l'image \u00e0 afficher\r\n\t\tif (!c1){\t\t\t\t\t\t\t\t\t\t\t\/\/ si aucune carte n'a \u00e9t\u00e9 retourn\u00e9e\r\n\t\t\tc1 = c;\t\t\t\t\t\t\t\t\t\t\t\/\/ la carte choisie est la premi\u00e8re \r\n\t\t} else if (c1 == c){\t\t\t\t\t\t\t\t\t\t\/\/ sinon si la carte choisie est d\u00e9j\u00e0 retourn\u00e9e\r\n\t\t\tc1.frame = dos;\t\t\t\t\t\t\t\t\t\t\/\/ masque la carte\r\n\t\t\tc1 = null;\t\t\t\t\t\t\t\t\t\t\/\/ la premi\u00e8re carte n'est plus s\u00e9lectionn\u00e9e\r\n\t\t} else if (!c2) {\t\t\t\t\t\t\t\t\t\t\/\/ sinon si la deuxi\u00e8me carte n'est pas choisie\r\n\t\t\tc2 = c;\t\t\t\t\t\t\t\t\t\t\t\/\/ la carte choisie est la deuxi\u00e8me carte\r\n\t\t\tif (c1.ref == c2.ref) {\t\t\t\t\t\t\t\t\t\/\/ si les r\u00e9f\u00e9rences des deux cartes est identique\r\n\t\t\t\tc1.frame = c2.frame = vide;\t\t\t\t\t\t\t\/\/ supprime les deux cartes de l'affichage\r\n\t\t\t\tc1 = c2 = null;\t\t\t\t\t\t\t\t\t\/\/ d\u00e9selectionne les deux cartes\r\n\t\t\t\ttotal -=  2;\t\t\t\t\t\t\t\t\t\/\/ d\u00e9cr\u00e9mente le total des cartes\r\n\t\t\t\tif (total == 0)\tfinPartie();\t\t\t\t\t\t\t\/\/ si il n'y a plus de carte \u00e0 d\u00e9couvrir la partie est termin\u00e9e\r\n\t\t\t} \r\n\t\t} else {\t\t\t\t\t\t\t\t\t\t\t\/\/ sinon la paire n'est pas bonne\r\n\t\t\tc1.frame = c2.frame = dos;\t\t\t\t\t\t\t\t\/\/ masque les deux cartes\r\n\t\t\tc2 = null;\t\t\t\t\t\t\t\t\t\t\/\/ d\u00e9slectionne la deuxi\u00e8me carte\r\n\t\t\tc1 = c;\t\t\t\t\t\t\t\t\t\t\t\/\/ enregistre la premi\u00e8re carte\r\n\t\t}\r\n\t}\r\n\trender();\t\t\t\t\t\t\t\t\t\t\t\t\/\/ mise \u00e0 jour de l'affichage\r\n}\r\n \r\nfunction finPartie(){\t\t\t\t\t\t\t\t\t\t\t\t\/\/ fin de partie\r\n\talert(&quot;Fin de partie, cliquez pour rejouer.&quot;);\r\n\tinit();\r\n}\r\n \r\nfunction render() {\t\t\t\t\t\t\t\t\t\t\t\t\/\/ Dessine le jeu\r\n\tfor(var i=0; i&lt;tuiles.length; i++){\r\n\t\tctx.drawImage(images&#x5B;tuiles&#x5B;i].frame-1], tuiles&#x5B;i].x, tuiles&#x5B;i].y);\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n<div class=\"lsep\"><\/div>\n<div class=\"sourcesdown\"><i class=\"fa fa-cog\"><\/i> <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\">\nVoil\u00e0 une fois encore un jeu au code tr\u00e8s tr\u00e8s simple que vous n&rsquo;aurez sans doute pas de difficult\u00e9 \u00e0 prendre en main.\n<\/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> Tableaux et grilles<br \/>\n<i class=\"fa fa-suitcase\"><\/i> Bases du langage Javascript<\/p>\n","protected":false},"author":1,"featured_media":159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":[],"categories":[4],"tags":[12,26,11,25],"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\/13\/memory\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Memory - Cmarzin\" \/>\n<meta property=\"og:description\" content=\"03h00  D\u00e9butant  Moteur  Javascript  Tableaux et grilles  Bases du langage Javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/memory\/\" \/>\n<meta property=\"og:site_name\" content=\"Cmarzin\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-13T02:54:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-07T04:08:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory.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=\"3 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\/13\/memory\/#primaryimage\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory.jpg\",\"contentUrl\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/memory.jpg\",\"width\":300,\"height\":169},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/memory\/#webpage\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/memory\/\",\"name\":\"Memory - Cmarzin\",\"isPartOf\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/memory\/#primaryimage\"},\"datePublished\":\"2015-11-13T02:54:35+00:00\",\"dateModified\":\"2016-01-07T04:08:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#\/schema\/person\/7c0008d57d9793c6cac9bea19c9dc1ba\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/memory\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/memory\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/memory\/#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\/13\/memory\/#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\/169"}],"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=169"}],"version-history":[{"count":5,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/169\/revisions\/796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media\/159"}],"wp:attachment":[{"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}