first commit

2026-05-16 11:10:19 +02:00
commit 509c9b3737
172 changed files with 14496 additions and 0 deletions
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Pong Game</title>
+  <style>
+    body {
+      background: #111;
+      color: #fff;
+      font-family: sans-serif;
+      text-align: center;
+    }
+    canvas {
+      display: block;
+      margin: 20px auto;
+      background: #222;
+      border: 2px solid #fff;
+    }
+    h1 {
+      margin-top: 10px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Pong 🏓</h1>
+  <canvas id="game" width="600" height="400"></canvas>
+  <p>Joueur à gauche, utilisez W/S pour jouer.</p>
+  <script>
+    const canvas = document.getElementById("game");
+    const ctx = canvas.getContext("2d");
+
+    const paddleWidth = 10, paddleHeight = 80, ballSize = 10;
+    let player = { x: 0, y: canvas.height/2 - paddleHeight/2, dy: 0, score: 0 };
+    let ai = { x: canvas.width - paddleWidth, y: canvas.height/2 - paddleHeight/2, dy: 2, score: 0 };
+    let ball = { x: canvas.width/2, y: canvas.height/2, dx: 4, dy: 4 };
+
+    function drawRect(x, y, w, h, color) {
+      ctx.fillStyle = color;
+      ctx.fillRect(x, y, w, h);
+    }
+
+    function drawCircle(x, y, r, color) {
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.arc(x, y, r, 0, Math.PI*2);
+      ctx.fill();
+    }
+
+    function draw() {
+      drawRect(0, 0, canvas.width, canvas.height, "#222");
+      drawRect(player.x, player.y, paddleWidth, paddleHeight, "lime");
+      drawRect(ai.x, ai.y, paddleWidth, paddleHeight, "red");
+      drawCircle(ball.x, ball.y, ballSize, "white");
+      ctx.fillStyle = "white";
+      ctx.font = "20px sans-serif";
+      ctx.fillText(`${player.score} : ${ai.score}`, canvas.width/2 - 20, 30);
+    }
+
+    function update() {
+      ball.x += ball.dx;
+      ball.y += ball.dy;
+
+      // Ball collision with top/bottom
+      if (ball.y < 0 || ball.y > canvas.height) ball.dy *= -1;
+
+      // Ball collision with player paddle
+      if (ball.x < player.x + paddleWidth && ball.x > player.x &&
+          ball.y > player.y && ball.y < player.y + paddleHeight) {
+        ball.dx *= -1;
+        ball.x = player.x + paddleWidth; 
+      }
+
+      // Ball collision with AI paddle
+      if (ball.x > ai.x - ballSize && ball.x < ai.x + paddleWidth &&
+          ball.y > ai.y && ball.y < ai.y + paddleHeight) {
+        ball.dx *= -1;
+        ball.x = ai.x - ballSize; 
+      }
+
+      // Score
+      if (ball.x < 0) { ai.score++; resetBall(); }
+      if (ball.x > canvas.width) { player.score++; resetBall(); }
+
+      // Move AI
+      if (ball.y < ai.y + paddleHeight/2) ai.y -= ai.dy;
+      else ai.y += ai.dy;
+      if (ai.y < 0) ai.y = 0;
+      if (ai.y + paddleHeight > canvas.height) ai.y = canvas.height - paddleHeight;
+
+      // Move player
+      player.y += player.dy;
+      if (player.y < 0) player.y = 0;
+      if (player.y + paddleHeight > canvas.height) player.y = canvas.height - paddleHeight;
+    }
+
+    function resetBall() {
+      ball.x = canvas.width/2;
+      ball.y = canvas.height/2;
+      ball.dx *= -1;
+      ball.dy = 4 * (Math.random() > 0.5 ? 1 : -1);
+    }
+
+    function gameLoop() {
+      update();
+      draw();
+      requestAnimationFrame(gameLoop);
+    }
+
+    document.addEventListener("keydown", e => {
+      if (e.key === "w") player.dy = -4;
+      if (e.key === "s") player.dy = 4;
+    });
+    document.addEventListener("keyup", e => {
+      if (e.key === "w" || e.key === "s") player.dy = 0;
+    });
+
+    requestAnimationFrame(gameLoop);
+  </script>
+</body>
+</html>