{"id":3023,"date":"2026-02-02T07:46:40","date_gmt":"2026-02-02T06:46:40","guid":{"rendered":"https:\/\/labodemaths.fr\/WordPress3\/?p=3023"},"modified":"2026-02-02T07:50:58","modified_gmt":"2026-02-02T06:50:58","slug":"nsi-js-pong","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/nsi-js-pong\/","title":{"rendered":"NSI, JS : POng"},"content":{"rendered":"\n<p>les images :<\/p>\n\n\n\n<div class=\"wp-block-file\"><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2026\/02\/raquette-1.png\">raquette-1<\/a><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2026\/02\/raquette-1.png\" 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\/2026\/02\/balle-1.png\">balle-1<\/a><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2026\/02\/balle-1.png\" class=\"wp-block-file__button\" download>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n<p>Le html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\">\n    &lt;head>\n        &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n  &lt;link rel=\"stylesheet\" href=\"style.css\">\n  &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&amp;display=swap\" rel=\"stylesheet\">\n  &lt;title>Pong&lt;\/title>\n  &lt;\/head>\n&lt;body>\n&lt;div id=\"plateau\">\n    &lt;div id=\"score\">&lt;\/div>\n    \n&lt;img id=\"raquette1\" src=\"images\/raquette.png\">\n&lt;img id=\"raquette2\" src=\"images\/raquette.png\">\n&lt;img id=\"balle\" src=\"images\/balle.png\">\n&lt;\/div>\n    &lt;\/body>\n\t&lt;script src=\"script.js\">&lt;\/script>\n\t&lt;\/html><\/code><\/pre>\n\n\n\n<p>le css<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#plateau {\n    position: absolute;\n    width: 600px;\n    height: 300px;\n    top:50px;\n    left: 200px;\n    margin-top:50px;\n    background-color: aquamarine;\n}\n\n#raquette1 {\n\tposition: absolute;\n\ttop: 100px;\n\tleft: 20px;\n}\n#raquette2 {\n\tposition: absolute;\n\ttop: 200px;\n\tleft: 580px;\n}\n#score{\n    text-align: center;\n\twidth: 33%;\n    margin-left: 33%;\n    font-size: 30px;\n\t\n}\n\n#balle {\n\tposition: absolute;\n\ttop: 150px;\n\tleft: 500px;\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}\n\n\n\t\n}\nimg {\n    \n}<\/code><\/pre>\n\n\n\n<p>le js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var plateau = document.getElementById(\"plateau\");\nvar joueur1=document.getElementById(\"raquette1\");\nvar joueur2=document.getElementById(\"raquette2\");\nvar y1=100;\njoueur1.style.top=y1+\"px\";\nvar x1=20;\nvar y2=200;\njoueur2.style.top=y2+\"px\";\nvar x2=580;\nvar balle=document.getElementById(\"balle\");\nvar xb=300;\nvar yb=150;\nballe.style.top=yb+\"px\";\nballe.style.left=xb+\"px\";\nvar dx=-5;\nvar dy=5;\nvar score1=0;\nvar score2=0;\nsetInterval(bouge_balle, 50)\ndocument.addEventListener(\"keydown\",touche,false);\nfunction bouge_balle(){\n    document.getElementById(\"score\").textContent=score1+\"  :  \"+score2;\n\txb=xb+dx;\n\tyb=yb+dy;\n\tif ((yb>280)||(yb&lt;0)){\n\t\tdy=-dy\n\t}\n\tif ((xb>590)){\n        score2=score2+1;\n\t\txb=300;\n        yb=150;\n        dx=-5;\n        dy=5;\n        \n\t}\n    if ((xb&lt;0)){\n        score1=score1+1;\n\t\txb=300;\n        yb=150;\n        dx=5;\n        dy=-5;\n        \n\t}\n    if ((Math.abs(xb-x1)&lt;3)&amp;&amp;(Math.abs(yb-y1)&lt;50)){\n        dx=-dx\n    }\n     if ((Math.abs(xb-x2)&lt;5)&amp;&amp;(Math.abs(yb-y2)&lt;50)){\n        dx=-dx\n    }\n\tballe.style.left=xb+\"px\";\n\tballe.style.top=yb+\"px\";\n}\n\nfunction touche(evt){\n\t\n\tvar touche=event.key;\n\tif (touche==\"z\"){\n\t\ty1=y1-5;\n\t\tjoueur1.style.top=y1+\"px\";\n\t}\n\tif (touche==\"s\"){\n\t\ty1=y1+5;\n\t\tjoueur1.style.top=y1+\"px\";\n\t}\n\tif (touche==\"o\"){\n\t\ty2=y2-5;\n\t\tjoueur2.style.top=y2+\"px\";\n\t}\n\tif (touche==\"l\"){\n\t\ty2=y2+5;\n\t\tjoueur2.style.top=y2+\"px\";\n\t}\n\t}\n\t\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>les images : Le html le css le js<\/p>\n","protected":false},"author":2,"featured_media":3030,"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\/3023"}],"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=3023"}],"version-history":[{"count":1,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/3023\/revisions"}],"predecessor-version":[{"id":3028,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/3023\/revisions\/3028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/3030"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=3023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=3023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=3023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}