{"id":2360,"date":"2025-01-20T08:24:00","date_gmt":"2025-01-20T07:24:00","guid":{"rendered":"https:\/\/labodemaths.fr\/WordPress3\/?p=2360"},"modified":"2025-01-23T15:41:14","modified_gmt":"2025-01-23T14:41:14","slug":"nsijs-et-jeu-du-taquin","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/nsijs-et-jeu-du-taquin\/","title":{"rendered":"NSI,JS et jeu du Taquin"},"content":{"rendered":"\n

On consid\u00e8re le html suivant :<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n  <link rel=\"stylesheet\" href=\"style.css\">\n  <title>Taquin<\/title>\n\n<\/head>\n<body>\n<div id=\"plateau\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<img src=\"images\/vide.png\">\n<\/div>\n    <\/body>\n<script src=\"script.js\"><\/script>\n\t<\/html><\/code><\/pre>\n\n\n\n
Le Css<\/p>\n\n\n\n
#plateau {\n    width: 33%;\n    margin-left: 33%;\n    margin-top:50px;\n\tfont-size: 30px;\n\tcolor : rgb(62, 158, 191);\n}\n\n#regle {\n\tmargin-bottom: 50px;\n}\n\nimg {\n    width: 21%;\n    border-color: black;\n    border-width: 2px;\n    border-style: double;\n}\n\n<\/code><\/pre>\n\n\n\n
et le .js \u00e0 compl\u00e9ter :<\/p>\n\n\n\n
\/\/ on declare la disposition initiale du taquin\nvar taquin=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,\"V\"];\n\n\/\/ on recupere la liste des images\nvar toutes_mes_images=............................;\n\n\/\/ on attribue une id \u00e0 chaque image\n\/\/ correspondant \u00e0 son index\n\/\/ on parcourt la liste par index\nfor (var i=0;i<=.......;i++){\n    var mon_image=toutes_mes_images[i];\n\/\/ on utilise la m\u00e9tdode toString() pour transformer un int en str\n\tmon_image.id=i.toString();\n       \n    }\n\/\/ on attribue \u00e0 chaque image la source\n\/\/ correspondant \u00e0 la valeur correspondante\n\/\/ dans le tableau taquin\nfor (var i=0;i<=15;i++){\n    var mon_image=toutes_mes_images[i];\n\tif (taquin[i]==............){\n        mon_image.src=\"images\/vide.png\";\n    }\n    else {\n       var  n=i+1; \n        mon_image.src=\"images\/\"+taquin[i]+\".png\";\n       \n    }\n}\n\/\/ on place un ecouteur d'\u00e9v\u00e9nement mousedown sur chaque image\n\/\/ appelant la fonction on_bouge()\n\nfor (var i=0;i<=15;i++){\n    ...............................;\n   ................................;\n}\n\nfunction on_bouge(evt){\n    \/\/ on recupere l'id de l'image sur laquelle on a cliqu\u00e9 en la convertissant en int\n    let id_image=parseInt(......................);\n    \/\/ on recupere sa source\n    let source_image=......................);\n   \n    \/\/ on cherche si la case vide est au dessus\n    if (id_image>3){\n        let n_image_en_dessous=(id_image-4).toString();\n        \n        if (document.getElementById(n_image_en_dessous).getAttribute(\"src\")==\"images\/vide.png\"){\n            this.src=\"images\/vide.png\";\n            document.getElementById(n_image_en_dessous).src=source_image;\n                                    }\n    }\n    \/\/ On cherche si la case vide est en dessous\n    if (id_image<12){\n        let n_image_au_dessus=(id_image+4).toString();\n        \n        if (document.getElementById(n_image_au_dessus).getAttribute(\"src\")==\"images\/vide.png\"){\n            this.src=\"images\/vide.png\";\n            document.getElementById(n_image_au_dessus).src=source_image;\n                                    }\n    }\n    \/\/ on cherche si la case vide est \u00e0 gauche\n    if (id_image%4!=0){\n        let n_image_a_gauche=(id_image-1).toString();\n        \n        if (document.getElementById(n_image_a_gauche).getAttribute(\"src\")==\"images\/vide.png\"){\n            this.src=\"images\/vide.png\";\n            document.getElementById(n_image_a_gauche).src=source_image;\n                                    }\n    }\n    \/\/ on cherche si la case vide est \u00e0 droite\n    if ((id_image+1)%4!=0){\n        let n_image_a_droite=(id_image+1).toString();\n        \n        if (document.getElementById(n_image_a_droite).getAttribute(\"src\")==\"images\/vide.png\"){\n            this.src=\"images\/vide.png\";\n            document.getElementById(n_image_a_droite).src=source_image;\n                                    }\n    }\n                                    \n}\n<\/code><\/pre>\n\n\n\n
et les images :<\/p>\n\n\n\n
images<\/a>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n
La correction<\/strong><\/p><\/blockquote><\/figure>\n\n\n\n
\/\/ on declare la disposition initiale du taquin\r\nvar taquin=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,\"V\"];\r\n\r\n\/\/ on recupere la liste des images\r\nvar toutes_mes_images=document.getElementsByTagName(\"img\");\r\n\r\n\/\/ on attribue une id \u00e0 chaque image\r\n\/\/ correspondant \u00e0 son index\r\n\/\/ on parcourt la liste par index\r\nfor (var i=0;i<=15;i++){\r\n    var mon_image=toutes_mes_images[i];\r\n\/\/ on utilise la m\u00e9tdode toString() pour transformer un int en str\r\n\tmon_image.id=i.toString();\r\n       \r\n    }\r\n\/\/ on attribue \u00e0 chaque image la source\r\n\/\/ correspondant \u00e0 la valeur correspondante\r\n\/\/ dans le tableau taquin\r\nfor (var i=0;i<=15;i++){\r\n    var mon_image=toutes_mes_images[i];\r\n\tif (taquin[i]==\"V\"){\r\n        mon_image.src=\"images\/vide.png\";\r\n    }\r\n    else {\r\n       var  n=i+1; \r\n        mon_image.src=\"images\/\"+taquin[i]+\".png\";\r\n       \r\n    }\r\n}\r\n\/\/ on place un ecouteur d'\u00e9v\u00e9nement mousedown sur chaque image\r\n\/\/ appelant la fonction on_bouge()\r\n\r\nfor (var i=0;i<=15;i++){\r\n    var mon_image=toutes_mes_images[i];\r\n   mon_image.addEventListener(\"mousedown\",on_bouge,false);\r\n}\r\n\r\nfunction on_bouge(evt){\r\n    \/\/ on recupere l'id de l'image sur laquelle on a cliqu\u00e9 en la convertissant en int\r\n    let id_image=parseInt(this.id);\r\n    \/\/ on recupere sa source\r\n    let source_image=this.getAttribute(\"src\");\r\n   \r\n    \/\/ on cherche si la case vide est au dessus\r\n    if (id_image>3){\r\n        let n_image_en_dessous=(id_image-4).toString();\r\n        \r\n        if (document.getElementById(n_image_en_dessous).getAttribute(\"src\")==\"images\/vide.png\"){\r\n            this.src=\"images\/vide.png\";\r\n            document.getElementById(n_image_en_dessous).src=source_image;\r\n                                    }\r\n    }\r\n    \/\/ On cherche si la case vide est en dessous\r\n    if (id_image<12){\r\n        let n_image_au_dessus=(id_image+4).toString();\r\n        \r\n        if (document.getElementById(n_image_au_dessus).getAttribute(\"src\")==\"images\/vide.png\"){\r\n            this.src=\"images\/vide.png\";\r\n            document.getElementById(n_image_au_dessus).src=source_image;\r\n                                    }\r\n    }\r\n    \/\/ on cherche si la case vide est \u00e0 gauche\r\n    if (id_image%4!=0){\r\n        let n_image_a_gauche=(id_image-1).toString();\r\n        \r\n        if (document.getElementById(n_image_a_gauche).getAttribute(\"src\")==\"images\/vide.png\"){\r\n            this.src=\"images\/vide.png\";\r\n            document.getElementById(n_image_a_gauche).src=source_image;\r\n                                    }\r\n    }\r\n    \/\/ on cherche si la case vide est \u00e0 droite\r\n    if ((id_image+1)%4!=0){\r\n        let n_image_a_droite=(id_image+1).toString();\r\n        \r\n        if (document.getElementById(n_image_a_droite).getAttribute(\"src\")==\"images\/vide.png\"){\r\n            this.src=\"images\/vide.png\";\r\n            document.getElementById(n_image_a_droite).src=source_image;\r\n                                    }\r\n    }\r\n                                    \r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
On consid\u00e8re le html suivant : Le Css et le .js \u00e0 compl\u00e9ter : et…<\/p>\n
Read the postNSI,JS et jeu du Taquin<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":2363,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[57],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/2360"}],"collection":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/comments?post=2360"}],"version-history":[{"count":5,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/2360\/revisions"}],"predecessor-version":[{"id":2671,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/2360\/revisions\/2671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/2363"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=2360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=2360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=2360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}