Added presentation and pingpong.html

2025-11-11 15:13:58 +03:00
parent a8db37f3af
commit 705f6a8a2d
3 changed files with 1132 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/HTML.html
+++ b/HTML.html
--- a/pingpong.html
+++ b/pingpong.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Simple Paddle Game</title>
+  <style>
+    body {
+      margin: 0;
+      background: #222;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      overflow: hidden;
+    }
+    #game {
+      position: relative;
+      width: 400px;
+      height: 300px;
+      border: 2px solid white;
+      background: #000;
+    }
+    #paddle {
+      position: absolute;
+      bottom: 10px;
+      left: 175px;
+      width: 50px;
+      height: 10px;
+      background: white;
+    }
+    #ball {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background: red;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+<body>
+
+<div id="game">
+  <div id="paddle"></div>
+  <div id="ball"></div>
+</div>
+
+<script>
+  const game = document.getElementById('game');
+  const paddle = document.getElementById('paddle');
+  const ball = document.getElementById('ball');
+
+  let paddleX = 175;
+  let ballX = 200, ballY = 100;
+  let ballSpeedX = 5, ballSpeedY = 5;
+
+  // Move paddle with mouse
+  game.addEventListener('mousemove', (e) => {
+    const rect = game.getBoundingClientRect();
+    paddleX = e.clientX - rect.left - 25;
+    // Keep paddle inside game area
+    if (paddleX < 0) paddleX = 0;
+    if (paddleX > 350) paddleX = 350;
+    paddle.style.left = paddleX + 'px';
+  });
+
+  // Game loop
+  setInterval(() => {
+    // Move ball
+    ballX += ballSpeedX;
+    ballY += ballSpeedY;
+
+    // Bounce off left/right walls
+    if (ballX <= 0 || ballX >= 390) ballSpeedX = -ballSpeedX;
+    // Bounce off top
+    if (ballY <= 0) ballSpeedY = -ballSpeedY;
+    // Bounce off paddle
+    if (
+      ballY >= 280 &&
+      ballX >= paddleX &&
+      ballX <= paddleX + 50
+    ) {
+      ballSpeedY = -ballSpeedY;
+    }
+    // Reset if ball falls
+    if (ballY > 300) {
+      ballX = 200;
+      ballY = 100;
+      ballSpeedY = 2;
+    }
+
+    ball.style.left = ballX + 'px';
+    ball.style.top = ballY + 'px';
+  }, 20);
+</script>
+
+</body>
+</html>