https:\/\/fonts.google.com\/<\/a> et l’appliquer \u00e0 vos r\u00e8gles. On choisira \u00e9galement une taille de police et une couleur,
– choisir une autre police, une autre couleur et une autre taille pour l’\u00e9l\u00e9ment h1,
– choisir une couleur de fond pour le plateau et une autre pour votre page ou si vous le pr\u00e9f\u00e9rez une image de fond.
<\/p>\n\n\n\n2. Interactivit\u00e9 : JS<\/h3>\n\n\n\n
Ecrire un script js qui permettra aux joueurs de jouer en cliquant sur les images.
On indiquera Joueur 1 ou Joueur 2 dans l’\u00e9l\u00e9ment h1 selon le tour des joueurs.<\/p>\n\n\n\n
3. NIVEAU ++ JS<\/h3>\n\n\n\n
Le script JS permettra de d\u00e9terminer lorsqu’un joueur a gagn\u00e9.<\/p>\n\n\n\n
Proposition de correction 1 : le js des ann\u00e9es 2000<\/h2>\n\n\n\n
le html :<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"fr\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n <link rel=\"stylesheet\" href=\"style.css\">\n <title>Tic Tac Toe<\/title>\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=Patua+One&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body>\n<div id=\"plateau\">\n<div id=\"regle\">\n<p>Pour gagner, il suffit d'aligner 3 symboles identiques<\/p>\n<\/div>\n<img id=\"1\" src=\"images\/vide.png\" onclick=\"changer()\">\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<h1>Cliquer pour commencer<\/h1>\n<\/div>\n <\/body>\n\t<script src=\"script.js\"><\/script>\n\t<\/html><\/code><\/pre>\n\n\n\nles css<\/p>\n\n\n\n
#plateau {\n width: 33%;\n margin-left: 33%;\n margin-top:50px;\n\tcolor: #B58A81;\n\tfont-family: \"Patua One\", serif;\n font-weight: 400;\n font-style: normal;\n font-size: 30px;\n}\nbody {\n\tbackground-color: #265E80;\n\t\n}\nimg {\n width: 30%;\n}<\/code><\/pre>\n\n\n\nle js<\/p>\n\n\n\n
function changer(){\n\tvar mon_image=document.getElementById(\"1\");\n\tmon_image.setAttribute(\"src\",\"images\/croix.png\");\n\t\n\t\n}<\/code><\/pre>\n\n\n\nEvolution :<\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html lang=\"fr\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n <title>Tic Tac Toe<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Patua+One&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n<div id=\"plateau\">\r\n<div id=\"regle\">\r\n<p>Pour gagner, il suffit d'aligner 3 symboles identiques<\/p>\r\n<\/div>\r\n<img id=\"1\" src=\"images\/vide.png\" onclick=\"changer(1)\">\r\n<img id=\"2\" src=\"images\/vide.png\" onclick=\"changer(2)\">\r\n<img id=\"3\" src=\"images\/vide.png\" onclick=\"changer(3)\">\r\n<img id=\"4\" src=\"images\/vide.png\" onclick=\"changer(4)\">\r\n<img id=\"5\" src=\"images\/vide.png\" onclick=\"changer(5)\">\r\n<img id=\"6\" src=\"images\/vide.png\" onclick=\"changer(6)\">\r\n<img id=\"7\" src=\"images\/vide.png\" onclick=\"changer(7)\">\r\n<img id=\"8\" src=\"images\/vide.png\" onclick=\"changer(8)\">\r\n<img id=\"9\" src=\"images\/vide.png\" onclick=\"changer(9)\">\r\n<h1>Cliquer pour commencer<\/h1>\r\n<\/div>\r\n <\/body>\r\n\t<script src=\"script.js\"><\/script>\r\n\t<\/html><\/code><\/pre>\n\n\n\nle js<\/p>\n\n\n\n
joueur=1;\r\nfunction changer(numero){\r\n\tvar mon_image=document.getElementById(numero);\r\n\t\r\n\tif (mon_image.getAttribute(\"src\")==\"images\/vide.png\")\r\n\t{\r\n\t\tif (joueur==1){\r\n\tmon_image.setAttribute(\"src\",\"images\/croix.png\");\r\n\t\tjoueur=2;}\r\n\t\telse{\r\n\tmon_image.setAttribute(\"src\",\"images\/rond.png\");\r\n\t\tjoueur=1;}\r\n\t}\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"On consid\u00e8re le html suivant : le css suivant : et les images suivantes :…<\/p>\n
Read the postNSI : JS,HTML et CSS, TP2 le tic tac Toe<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":1861,"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\/1857"}],"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=1857"}],"version-history":[{"count":25,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1857\/revisions"}],"predecessor-version":[{"id":2990,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1857\/revisions\/2990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/1861"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=1857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=1857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=1857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![vide<\/a>](\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2022\/01\/vide.png\"){kind=link}
![rond<\/a>](\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2022\/01\/rond.png\"){kind=link}
![croix<\/a>](\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2022\/01\/croix.png\"){kind=link}