{"id":171,"date":"2015-11-13T03:53:59","date_gmt":"2015-11-13T02:53:59","guid":{"rendered":"http:\/\/www.cmarzin.fr\/site\/?p=171"},"modified":"2016-01-07T17:54:53","modified_gmt":"2016-01-07T16:54:53","slug":"tic-tac-toe","status":"publish","type":"post","link":"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/tic-tac-toe\/","title":{"rendered":"Tic tac toe"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/tictactoe\/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\/tictactoe\/tictactoe.rar\">Javascript<\/a> <a href=\"[insert_php]echo get_site_url();[\/insert_php]\/content\/tutos\/tictactoe\/tictactoefla.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-171 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\/tictactoe1.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\/tictactoe1-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe1-300x170.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe1.jpg 442w\" 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\/tictactoe2.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\/tictactoe2-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe2-300x169.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe2.jpg 510w\" 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\/tictactoe3.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\/tictactoe3-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe3-300x169.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe3-1024x578.jpg 1024w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe3.jpg 1234w\" 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\/tictactoe4.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\/tictactoe4-300x169.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe4-300x169.jpg 300w, https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe4.jpg 696w\" 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 Tic-tac-toe est un jeu de r\u00e9flexion se pratiquant \u00e0 deux joueurs au tour par tour et dont le but est de cr\u00e9er le premier un alignement. Il se joue sur une grille carr\u00e9e de 3\u00d73 cases contrairement au Morpion avec lequel il est souvent confondu et qui se joue sur des grille de 5\u00d75 cases. Deux joueurs s&rsquo;affrontent et doivent remplir chacun \u00e0 leur tour une case de la grille avec le symbole qui leur est attribu\u00e9. Le gagnant est celui qui arrive \u00e0 aligner trois symboles identiques, horizontalement, verticalement ou en diagonale.<\/p>\n<p>En raison du nombre de combinaisons limit\u00e9, l&rsquo;analyse compl\u00e8te du jeu est facile \u00e0 r\u00e9aliser, et c&rsquo;est ce qui va nous int\u00e9resser ici. Tout comme le PONG, le code du jeu est tr\u00e8s simple, mais il fait appel \u00e0 une \u00e9bauche d&rsquo;intelligence artificielle pour jouer contre un ordinateur. C&rsquo;est le point important que nous allons d\u00e9velopper aujourd&rsquo;hui.<\/p>\n<p>Je n&rsquo;ai pas pens\u00e9 \u00e0 le dire lors des pr\u00e9c\u00e9dents exercices, mais le but du jeu est qu&rsquo;\u00e0 partir de l&rsquo;\u00e9tude pr\u00e9liminaire vous essayiez vous m\u00eame de r\u00e9soudre le probl\u00e8me avant de lire l&rsquo;exercice. J&rsquo;ai en effet utilis\u00e9 ma propre m\u00e9thode, mais votre approche de la chose est tout aussi importante que la lecture de l&rsquo;exercice, comparer votre r\u00e9sultat et le mien vous donnera bien plus d&rsquo;informations que de lire simplement la solution\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\/Tic-tac-toe\" target=\"_blank\">Wikipedia<\/a> <a href=\"http:\/\/forums.mediabox.fr\/wiki\/tutoriaux\/javascript\/divers\/exercice_tictactoe\" 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;\r\nvar ctx;\r\n \r\n\/\/ variables\r\nvar W = 480;\r\nvar H = 480;\r\nvar J = 1;\r\nvar T = 160;\r\nvar C = 3;\r\nvar P = 0;\r\n \r\n\/\/ tableaux\r\nvar stock = &#x5B;];\r\nvar valid = &#x5B;];\r\nvar libre = &#x5B;];\r\n \r\n\/\/ charger les images du jeu\r\nvar grille = new Image();\r\nvar tileO = new Image();\r\nvar tileX = new Image();\r\n \r\ngrille.src = &quot;assets\/grille.jpg&quot;;\r\ntileO.src = &quot;assets\/TileO.jpg&quot;;\r\ntileX.src = &quot;assets\/TileX.jpg&quot;;\r\n \r\n \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\tinit();\r\n}\r\n \r\n\/\/ initialisation du jeu\r\nfunction init() {\r\n\tJ = 1;\r\n\tP = 0;\r\n\tstock = &#x5B;0,0,0,0,0,0,0,0,0];\r\n\tvalid = &#x5B;&#x5B;0,1,2],&#x5B;3,4,5],&#x5B;6,7,8],&#x5B;0,3,6],&#x5B;1,4,7],&#x5B;2,5,8],&#x5B;0,4,8],&#x5B;2,4,6]];\r\n\tlibre = &#x5B;0,1,2,3,4,5,6,7,8];\r\n\trender();\r\n\tcanvas.addEventListener(&quot;click&quot;, remplir, false);\r\n}\r\n \r\n\/\/ quel joueur joue\r\nfunction remplir(e){\r\n\tif(J==1) {\r\n\t\tvar index = parseInt(e.clientX\/T)+parseInt(e.clientY\/T)*C;\r\n\t\tif(stock&#x5B;index]==0) {\r\n\t\t\tstock&#x5B;index] = 1;\r\n\t\t\tlibre.splice(libre.indexOf(index),1);\r\n\t\t\trender();\r\n\t\t\tcheckGagne();\r\n\t\t\tsetTimeout(tourOrdi, 500);\r\n\t\t\treturn;\r\n\t\t}\r\n\t}\r\n\tif(J==2) {\r\n\t\tstock&#x5B;P] = 2;\r\n\t\tlibre.splice(libre.indexOf(P),1);\r\n\t\trender();\r\n\t\tcheckGagne();\r\n\t}\r\n}\r\n \r\n\/\/ l'ordi choisi une case\r\nfunction tourOrdi(e){\r\n\tvar tab = stock.concat();\r\n\tvar i;\r\n\tfor (i in libre) if (verifieCase(tab,2,libre&#x5B;i])) return;\r\n\tfor (i in libre) if (verifieCase(tab,1,libre&#x5B;i])) return;\r\n\tremplirOrdi(libre&#x5B;parseInt(Math.random()*libre.length)]);\r\n}\r\n \r\n\/\/ l'ordi v\u00e9rifie si la case est gagnante\r\nfunction verifieCase(tab, id, b){\r\n\ttab&#x5B;b] = id;\r\n\tfor (var c=0; c&lt;valid.length; c++){\r\n\t\tvar w = true;\r\n\t\tfor (var i=0; i&lt;valid&#x5B;c].length; i++) w = w &amp;&amp; tab&#x5B;valid&#x5B;c]&#x5B;i]] == id;\r\n\t\tif (w){\r\n\t\t\tremplirOrdi(b);\r\n\t\t\treturn true;\r\n\t\t}\r\n\t}\r\n\ttab&#x5B;b] = 0;\r\n\treturn false;\r\n}\r\n \r\n\/\/ l'ordi joue son coup\r\nfunction remplirOrdi(p){\r\n\tP = p;\r\n\tremplir(null);\r\n}\r\n \r\n\/\/ v\u00e9rifie si un joueur gagne\r\nfunction checkGagne(){\r\n\tfor(var c=0; c&lt; valid.length; c++){\r\n\t\tvar w = true;\r\n\t\tfor (var i=0; i&lt;valid&#x5B;c].length; i++) w = w &amp;&amp; stock&#x5B;valid&#x5B;c]&#x5B;i]] == J;\r\n\t\tif (w){\r\n\t\t\tif(J==1) alert(&quot;Vous gagnez, cliquez pour rejouer.&quot;);\r\n\t\t\tif(J==2) alert(&quot;L'ordinateur gagne, cliquez pour rejouer.&quot;);\r\n\t\t\tinit();\r\n\t\t\treturn;\r\n\t\t}\r\n\t}\r\n\tif (libre.length==0) {\r\n\t\talert(&quot;Egalit\u00e9, cliquez pour rejouer.&quot;);\r\n\t\tinit();\r\n\t\treturn;\r\n\t}\r\n\tJ==1 ? J=2 : J=1;\r\n}\r\n \r\n\/\/ Dessine le jeu\r\nfunction render() {\t\r\n\tctx.drawImage(grille,0,0);\r\n\tfor(var i=0; i&lt;stock.length; i++){\r\n\t\tif(stock&#x5B;i]==2) ctx.drawImage(tileX, i%C*T, parseInt(i\/C)*T);\r\n\t\tif(stock&#x5B;i]==1) ctx.drawImage(tileO, i%C*T, parseInt(i\/C)*T);\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=\"https:\/\/fr.wikipedia.org\/wiki\/Intelligence_artificielle\" target=\"_blank\">Intelligence artificielle<\/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\">\nRien de bien terrible dans cet exercice, il met plus en avant la logique et les calculs que l&rsquo;aspect graphique et c&rsquo;est pour \u00e7a que pour le moment il n&rsquo;est pas justifi\u00e9 d&rsquo;utiliser une librairie ou un framework pour nous aider dans cette t\u00e2che, mais les choses vont bient\u00f4t changer avec les prochains exercices qui vont commencer \u00e0 se compliquer un peu.\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> Intelligence artificielle<br \/>\n<i class=\"fa fa-suitcase\"><\/i> Bases du langage Javascript<\/p>\n","protected":false},"author":1,"featured_media":160,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":[],"categories":[4],"tags":[12,26,27,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\/tic-tac-toe\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tic tac toe - Cmarzin\" \/>\n<meta property=\"og:description\" content=\"03h00  D\u00e9butant  Moteur  Javascript  Intelligence artificielle  Bases du langage Javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/tic-tac-toe\/\" \/>\n<meta property=\"og:site_name\" content=\"Cmarzin\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-13T02:53:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-07T16:54:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe.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\/tic-tac-toe\/#primaryimage\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe.jpg\",\"contentUrl\":\"https:\/\/www.cmarzin.fr\/site\/wp-content\/uploads\/tictactoe.jpg\",\"width\":300,\"height\":169},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/tic-tac-toe\/#webpage\",\"url\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/tic-tac-toe\/\",\"name\":\"Tic tac toe - Cmarzin\",\"isPartOf\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/tic-tac-toe\/#primaryimage\"},\"datePublished\":\"2015-11-13T02:53:59+00:00\",\"dateModified\":\"2016-01-07T16:54:53+00:00\",\"author\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/#\/schema\/person\/7c0008d57d9793c6cac9bea19c9dc1ba\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/tic-tac-toe\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/tic-tac-toe\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cmarzin.fr\/site\/2015\/11\/13\/tic-tac-toe\/#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\/tic-tac-toe\/#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\/171"}],"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=171"}],"version-history":[{"count":6,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":808,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/posts\/171\/revisions\/808"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media\/160"}],"wp:attachment":[{"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarzin.fr\/site\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}