{"id":177,"date":"2015-11-13T03:57:58","date_gmt":"2015-11-13T02:57:58","guid":{"rendered":"http:\/\/www.cmarzin.fr\/site\/?p=177"},"modified":"2016-01-07T23:47:43","modified_gmt":"2016-01-07T22:47:43","slug":"cascade","status":"publish","type":"post","link":"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/cascade\/","title":{"rendered":"Cascade"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/cascade\/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\/cascade\/cascade.rar\">Javascript<\/a> <a href=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/cascade\/cascadefla.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-177 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\/cascade1.jpg' title=\"\" data-rl_title=\"\" class=\"rl-gallery-link\" data-rl_caption=\"\" data-rel=\"lightbox-gallery-1\"><img width=\"300\" height=\"166\" src=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade1-300x166.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade1-300x166.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade1.jpg 480w\" 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\/cascade2.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\/cascade2-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade2-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade2.jpg 600w\" 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\/cascade3.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\/cascade3-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade3-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade3.jpg 474w\" 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\/cascade4.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\/cascade4-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade4-300x169.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade4-1024x578.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade4.jpg 1080w\" 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> Cascade est un jeu de r\u00e9flexion dont le but est de d\u00e9truire des s\u00e9ries de blocs align\u00e9s de la m\u00eame couleur. Lorsqu&rsquo;un bloc est d\u00e9truit l&rsquo;ensemble des blocs situ\u00e9s au dessus descend pour combler le vide. Lorsqu&rsquo;une colonne enti\u00e8re est d\u00e9truite l&rsquo;ensemble des colonnes suivantes se d\u00e9place pour combler le vide. La partie est termin\u00e9e lorsqu&rsquo;il ne reste plus de blocs \u00e0 d\u00e9truire ou si plus aucun bloc n&rsquo;a de bloc voisin permettant de cr\u00e9er une s\u00e9rie destructible.<\/p>\n<p>C&rsquo;est assez maigre comme d\u00e9finition mais cela suffit pour nous attaquer \u00e0 l&rsquo;exercice, ce type de jeu \u00e9tant une variante r\u00e9cente du tr\u00e8s c\u00e9l\u00e8bre Tetris, aucune d\u00e9finition n&rsquo;existe sur Wikipedia, il est cependant int\u00e9ressant \u00e0 \u00e9tudier car il pose des probl\u00e8mes de r\u00e9cursivit\u00e9 et d&rsquo;optimisation.\n<\/p><\/div>\n<div class=\"lsep\"><\/div>\n<div class=\"sourcesdown\"><i class=\"fa fa-book\"><\/i> <a href=\"http:\/\/forums.mediabox.fr\/wiki\/tutoriaux\/javascript\/divers\/exercice_cascade\" 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, W, H, posX, posY, T, C, L, i, images, stock, voisins, valeurs, images;\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\tW = 480;\r\n\tH = 480;\r\n\tcanvas.width = \tW;\r\n\tcanvas.height = H;\r\n\tposX = canvas.offsetLeft;\r\n\tposY = canvas.offsetTop;\r\n\tT = 32;\r\n\tC = W\/T;\r\n\tloadImages(5);\r\n}\r\n \r\n\/\/ chargement des images\r\nfunction loadImages(nbImg){\t\r\n\timages = &#x5B;];\r\n\tfor(i=1; i&lt;nbImg+1; i++){\r\n\t\tvar b = new Image();\r\n\t\tb.src = &quot;assets\/tuile&quot;+i+&quot;.png&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\tstock = &#x5B;];\r\n\tvoisins = &#x5B;];\r\n\tvaleurs = &#x5B;];\t\r\n\tfor (i=0;i&lt;C*C;i++){\r\n\t\tvoisins.push(&#x5B;]);\r\n\t\tvaleurs.push(parseInt(Math.random()*4+1));\r\n\t\tstock.push({x : parseInt(i%C)*T, y : parseInt(i\/C)*T, id : i, width : T, height : T, frame : valeurs&#x5B;i]});\r\n\t}\r\n\trender();\r\n\tcanvas.addEventListener(&quot;mousedown&quot;, jouer, false);\r\n\tcanvas.addEventListener(&quot;mouseup&quot;, checkTile, false);\r\n}\r\n \r\n\/\/ cliquer sur une case\r\nfunction jouer(e){\r\n\tdecouvre(parseInt((e.clientX-posX)\/T)+parseInt((e.clientY-posY)\/T)*C);\r\n}\r\n \r\n\/\/ d\u00e9couvrir les cases de m\u00eame couleur\r\nfunction decouvre(n){\r\n\ttrouveVoisin(n,stock&#x5B;n].x\/T,stock&#x5B;n].y\/T,C-1,valeurs&#x5B;n]);\r\n\tif(voisins&#x5B;n].length){\r\n\t\tvar v = voisins&#x5B;n];\r\n\t\tfor (var h=0; h&lt;v.length; h++){\r\n\t\t\tif (v&#x5B;h].frame!=5) {\r\n\t\t\t\tv&#x5B;h].frame=5;\r\n\t\t\t\tdecouvre(v&#x5B;h].id);\r\n\t\t\t\tvaleurs&#x5B;v&#x5B;h].id] = 5;\r\n\t\t\t}\r\n\t\t}\r\n\t\tvoisins&#x5B;n] = &#x5B;];\r\n\t\tvaleurs&#x5B;n] = 5;\r\n\t\tstock&#x5B;n].frame = 5;\r\n\t\trender();\r\n\t}\r\n}\r\n \r\n\/\/ trouver les cases vides voisines\r\nfunction trouveVoisin(i,X,Y,L,F){\r\n\tif(X&gt;0 &amp;&amp; valeurs&#x5B;i-1]==F) voisins&#x5B;i].push(stock&#x5B;i-1]);\r\n\tif(X&lt;L &amp;&amp; valeurs&#x5B;i+1]==F) voisins&#x5B;i].push(stock&#x5B;i+1]);\r\n\tif(Y&gt;0 &amp;&amp; valeurs&#x5B;i-C]==F) voisins&#x5B;i].push(stock&#x5B;i-C]);\r\n\tif(Y&lt;L &amp;&amp; valeurs&#x5B;i+C]==F) voisins&#x5B;i].push(stock&#x5B;i+C]);\r\n} \r\n \r\n\/\/ v\u00e9rifier les tuiles\r\nfunction checkTile(e) {\r\n\tvar x = C; \r\n\twhile(x--) checkColonne(x);\r\n\tcheckLigne();\r\n\tfor (var j=0; j&lt;stock.length;j++) stock&#x5B;j].frame = valeurs&#x5B;stock&#x5B;j].id];\r\n\trender();\r\n\tverifieJeu();\r\n} \r\n \r\n\/\/ v\u00e9rifie une colonne\r\nfunction checkColonne(c){\r\n\tvar y = 0;\r\n\twhile(y&lt;C) {\r\n\t\ti = c+y*C;\r\n\t\tif (valeurs&#x5B;i+C] &amp;&amp; valeurs&#x5B;i] != 5 &amp;&amp; valeurs&#x5B;i+C] == 5) {\r\n\t\t\tvaleurs&#x5B;i+C]= valeurs&#x5B;i];\r\n\t\t\tvaleurs&#x5B;i] = 5;\r\n\t\t\tcheckColonne(c);\r\n\t\t}\r\n\t\ty++;\r\n\t}\r\n}\r\n \r\n\/\/ v\u00e9rifie une ligne\r\nfunction checkLigne(){\r\n\tvar x = C; \r\n\twhile(x--) checkDecalage(x);\r\n}\r\n \r\nfunction checkDecalage(c){\r\n\tvar t = valeurs.length-C+c\r\n\tif(valeurs&#x5B;t] !=5 &amp;&amp; valeurs&#x5B;t-1] == 5 &amp;&amp; t-1&gt;valeurs.length-C-1){\r\n\t\tvar y = 0;\r\n\t\twhile(y&lt;C) {\r\n\t\t\ti = c+y*C;\r\n\t\t\tvaleurs&#x5B;i-1] = valeurs&#x5B;i];\r\n\t\t\tvaleurs&#x5B;i] = 5;\r\n\t\t\ty++;\r\n\t\t}\r\n\t\tcheckLigne()\r\n\t}\r\n}\r\n \r\n\/\/ v\u00e9rifie si il reste des combinaisons jouables\t\r\nfunction verifieJeu(){\r\n\tvar test = true;\r\n\tfor (var n=0; n&lt;stock.length; n++){\r\n\t\tif(valeurs&#x5B;n]!=5){\r\n\t\t\ttrouveVoisin(n,stock&#x5B;n].x\/T,stock&#x5B;n].y\/T,C-1,valeurs&#x5B;n]);\r\n\t\t\tif(voisins&#x5B;n].length) test=false;\r\n\t\t\tvoisins&#x5B;n] = &#x5B;];\r\n\t\t}\r\n\t}\r\n\tif (test) finPartie();\r\n}\r\n \r\n\/\/ fin de partie\r\nfunction finPartie(){\r\n\talert(&quot;Fin de partie, cliquez pour rejouer.&quot;);\r\n\tinit();\r\n}\r\n \r\n\/\/ Dessine le jeu\r\nfunction render() {\t\r\n\tfor(var i=0; i&lt;stock.length; i++){\r\n\t\tctx.drawImage(images&#x5B;stock&#x5B;i].frame-1], stock&#x5B;i].x, stock&#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\">\nCe jeu utilise a fond la r\u00e9cursivit\u00e9, on la retrouve un peu partout y compris en dehors des jeux, par exemple elle est utilis\u00e9e dans les algorithmes de \u201cflood fill\u201d ( https:\/\/fr.wikipedia.org\/wiki\/Algorithme_de_remplissage_par_diffusion ).\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><i class=\"fa fa-clock-o\"><\/i> 02h00<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, grilles et r\u00e9cursivit\u00e9<br \/>\n<i class=\"fa fa-suitcase\"><\/i> Bases du langage Javascript<\/p>\n","protected":false},"author":1,"featured_media":163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":[],"categories":[4],"tags":[12,11,24],"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\/cascade\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cascade - Cmarzin\" \/>\n<meta property=\"og:description\" content=\"02h00  D\u00e9butant  Moteur  Javascript  Tableaux, grilles et r\u00e9cursivit\u00e9  Bases du langage Javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/cascade\/\" \/>\n<meta property=\"og:site_name\" content=\"Cmarzin\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-13T02:57:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-07T22:47:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade.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=\"4 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\/cascade\/#primaryimage\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade.jpg\",\"contentUrl\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/cascade.jpg\",\"width\":300,\"height\":169},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/cascade\/#webpage\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/cascade\/\",\"name\":\"Cascade - Cmarzin\",\"isPartOf\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/cascade\/#primaryimage\"},\"datePublished\":\"2015-11-13T02:57:58+00:00\",\"dateModified\":\"2016-01-07T22:47:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#\/schema\/person\/7c0008d57d9793c6cac9bea19c9dc1ba\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/cascade\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/cascade\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/cascade\/#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\/cascade\/#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\/177"}],"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=177"}],"version-history":[{"count":7,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":770,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/177\/revisions\/770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media\/163"}],"wp:attachment":[{"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media?parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/categories?post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/tags?post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}