{"id":3049,"date":"2026-02-08T18:17:09","date_gmt":"2026-02-08T17:17:09","guid":{"rendered":"https:\/\/labodemaths.fr\/WordPress3\/?p=3049"},"modified":"2026-02-12T16:47:05","modified_gmt":"2026-02-12T15:47:05","slug":"nsi-tp-js-reversi","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/nsi-tp-js-reversi\/","title":{"rendered":"NSI, TP JS reversi"},"content":{"rendered":"\n

L’utilisateur change la couleur des 2 cases adjacentes lorsqu’il clique sur l’une d’entre elles. Le but du jeu est de les avoir toutes en noir si c’est possible.<\/p>\n\n\n\n

Bar\u00e8me : 5 points par \u00e9tapes suivantes :
– mise en place du html, css, js,
– mise en place d’une interaction : la case change de couleur lorsqu’on clique sur elle,
– la case ne change pas mais ce sont les cases adjacentes qui changent de couleur,
– un compteur de tentatives affiche le nombre de fois o\u00f9 l’utilisateur a cliqu\u00e9.<\/p>\n\n\n\n

le html :<\/p>\n\n\n\n

<!DOCTYPE html>\n\n<html lang=\"fr\"><head>  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n  <link rel=\"stylesheet\" href=\"style.css\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&display=swap\" rel=\"stylesheet\">\n  <title>TP<\/title>\n<\/head>\n<body>\n    <div id=\"plateau\">\n    <p>Cliquer sur une case<\/p>\n    <p>A vous d'essayer d'avoir toutes les cases noires.<\/p>\n    <img src=\"images\/blanc.png\">\n    <img src=\"images\/blanc.png\">\n    <img src=\"images\/blanc.png\">\n    <img src=\"images\/blanc.png\">\n    <img src=\"images\/blanc.png\">\n    <p><span id=\"tentatives\"><\/span><\/p>\n    <\/div>\n<\/body>\n<script src=\"script.js\"><\/script>\n<\/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}\nh1 {\n\tcolor: #FF5733;\n\tfont-size: 30px;\n\twidth: 50%;\n    margin-left: 25%;\n\tfont-family: \"Bowlby One\", sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  text-align: center;\n}\np {\n\tcolor: #FF5733;\n\tfont-size: 20px;\n\ttext-align: center;\n\twidth: 80%;\n    margin-left: 10%;\n\tfont-family: \"Bowlby One\", sans-serif;\n  font-weight: 400;\n  font-style: normal;\n}\nimg {\n    width: 17%;\n    \n}<\/code><\/pre>\n\n\n\n
les images :<\/p>\n\n\n\n
blanc<\/a>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n
noir<\/a>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
L’utilisateur change la couleur des 2 cases adjacentes lorsqu’il clique sur l’une d’entre elles. Le…<\/p>\n
Read the postNSI, TP JS reversi<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":0,"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\/3049"}],"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=3049"}],"version-history":[{"count":2,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/3049\/revisions"}],"predecessor-version":[{"id":3061,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/3049\/revisions\/3061"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=3049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=3049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=3049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}