{"id":1872,"date":"2026-01-18T02:48:00","date_gmt":"2026-01-18T01:48:00","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=1872"},"modified":"2026-01-26T10:48:14","modified_gmt":"2026-01-26T09:48:14","slug":"nsi-jshtml-et-css-mini-projet-jeu-de-memory","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/nsi-jshtml-et-css-mini-projet-jeu-de-memory\/","title":{"rendered":"NSI, entrainement js:jeu de memory"},"content":{"rendered":"\n<ul><li>Le mini-projet sera \u00e0 faire en bin\u00f4me ou en mon\u00f4me.<\/li><li>Il pr\u00e9sentera une page html proposant 4 rang\u00e9es de 5 cartes retourn\u00e9es.<br>On pourra cliquer sur les images pour faire appara\u00eetre la figure qu&rsquo;elles cachent.<\/li><li>Si deux cartes identiques sont retourn\u00e9es successivement, elles restent retourn\u00e9es.<\/li><li>Le jeu est fini lorsque toutes les cartes sont retourn\u00e9es.<br>Bar\u00e8me :<br>&#8211; une page html et une page css pr\u00e9sentant le jeu : 5 points,<br>&#8211; un fichier js permettant de g\u00e9rer les interactions et le jeu :<br>&#8211; 5 points : si lorsque l&rsquo;on clique sur une image, on fait appara\u00eetre la figure cach\u00e9e,<br>&#8211; 5 points : si l&rsquo;on clique successivement sur 2 images identiques, les figures restent retourn\u00e9es. Un compteur affiche le nombre de tours ( un tour consiste \u00e0 retourner 2 cartes ),<br>&#8211; 5 points : les cartes seront plac\u00e9es de mani\u00e8re al\u00e9atoire \u00e0 chaque d\u00e9but de partie.<\/li><\/ul>\n\n\n\n<p>Aide :<\/p>\n\n\n\n<p>Pour laisser un certain temps les cartes affich\u00e9es avant de les retourner, on pourra utiliser la fonction js :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><meta charset=\"utf-8\">setTimeout(nom_fonction, 2000)\n<meta charset=\"utf-8\">\/\/ 2000 d\u00e9signe le temps en ms avant d'appeler la fonction nom_fonction() sous la forme d'une fonction anonyme<\/code><\/pre>\n\n\n\n<div class=\"wp-block-file\"><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2025\/01\/images.7z\">images<\/a><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2025\/01\/images.7z\" class=\"wp-block-file__button\" download>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n<div class=\"wp-block-file\"><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2025\/01\/images_bis.zip\">images_bis<\/a><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2025\/01\/images_bis.zip\" class=\"wp-block-file__button\" download>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ on declare la disposition initiale du memory\r\nvar cartes=&#91;1,2,0,1,3,3,4,8,9,2,7,4,5,6,6,5,8,9,0,7];\r\n\/\/ on installe une variable pour savoir si on a cliqu\u00e9\r\n\/\/ sur la premi\u00e8re carte ou la seconde\r\nvar carte=1;\r\n\/\/ on installe une variable empechant de tricher\r\nvar bloque=false;\r\n\/\/ un compteur de tour\r\nvar tour=0;\r\n\/\/ on recup\u00e8re des \u00e9l\u00e8ments par leurs id\r\nvar texte=document.getElementById(\"texte\");\r\nvar mon_plateau=document.getElementById(\"plateau\");\r\n\/\/ on cr\u00e9e les images en leur attribuant une source\r\n\/\/ et une id\r\nfor ( var i=0;i&lt;20;i++){\r\n\t\/\/ on cr\u00e9e un elt image\r\n\tvar mon_image=document.createElement(\"img\");\r\n\t\/\/ on attribue source et id\r\nmon_image.src=\"images\/dos.jpg\";\r\nmon_image.id=i;\r\n\/\/ on ajoute un ecouteur d'evenements\r\nmon_image.addEventListener(\"mousedown\",changer_image,false)\r\n\/\/ on ajoute l'elt image au plateau\r\n\tmon_plateau.appendChild(mon_image);\r\n}\r\n\r\n\r\nfunction changer_image(evt){\r\n\t\/\/ on verifie si on peut cliquer sur la carte\r\n\tif ((this.getAttribute(\"src\")==\"images\/dos.jpg\")&amp;&amp;(bloque==false)){\r\n\t\t\/\/ si on clique sur une premiere carte\r\n\t\tif (carte==1){\r\n\t\t\t\/\/ on change la source de l'image\r\n\t\t\tthis.src=\"images\/\"+cartes&#91;this.id]+\".jpg\";\r\n\t\t\t\/\/ on memorise l'id de la carte\r\n\t\t\tid_image1=this.id;\r\n\t\t\t\/\/ on passe \u00e0 la carte 2\r\n\t\t\tcarte=2;\r\n\t\t}\r\n\t\t\/\/ si on a cliqu\u00e9 sur une seconde image\r\n\t\telse {\r\n\t\t\t\/\/ on modifie le nombre de tours\r\n\t\t\ttour=tour+1;\r\n\t\t\t\/\/ on modifie le texte dans le html\r\n\t\t\ttexte.innerText=\"Tour : \"+tour;\r\n\t\t\t\/\/ on retourne la carte en modifiant la source\r\n\t\t\tthis.src=\"images\/\"+cartes&#91;this.id]+\".jpg\";\r\n\t\t\t\/\/ on recupere l'image 1 et sa source\r\n\t\t\timg1=document.getElementById(id_image1);\r\n\t\t\tsrc_image1=img1.getAttribute(\"src\");\r\n\t\t\t\/\/ si les deux images sont diff\u00e9rentes\r\n\t\t\t\/\/ on emp\u00eache de cliquer et on attend 2000 ms avant\r\n\t\t\t\/\/ de les retourner\r\n\t\t\tif (src_image1!=this.getAttribute(\"src\")){\r\n\t\t\t\tid_image2=this.id;\r\n\t\t\t\tbloque=true;\r\n\t\t\t\tsetTimeout(on_retourne_image, 2000)\r\n\t\t\t}\r\n\t\t\t\/\/ on revient \u00e0 la premi\u00e8re carte\r\n\t\t\tcarte=1;\r\n\t\t}\r\n\t}\r\n}\r\n\/\/ on retourne les deux images\r\nfunction on_retourne_image() {\r\n\timg1=document.getElementById(id_image1);\r\n\timg2=document.getElementById(id_image2);\r\n\timg1.src=\"images\/dos.jpg\";\r\n\timg2.src=\"images\/dos.jpg\";\r\n\tbloque=false;\r\n\t\r\n\t\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Le mini-projet sera \u00e0 faire en bin\u00f4me ou en mon\u00f4me. Il pr\u00e9sentera une page html&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/labodemaths.fr\/WordPress3\/nsi-jshtml-et-css-mini-projet-jeu-de-memory\/\">Read the post<span class=\"screen-reader-text\">NSI, entrainement js:jeu de memory<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":1873,"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\/1872"}],"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=1872"}],"version-history":[{"count":16,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1872\/revisions"}],"predecessor-version":[{"id":3012,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1872\/revisions\/3012"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/1873"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=1872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=1872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=1872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}