From 6fb5b4af2255b628ae6f516462b9d840bb8ab2ce Mon Sep 17 00:00:00 2001
From: root <pticoop@yandex.com>
Date: Tue, 11 Nov 2025 15:16:22 +0300
Subject: [PATCH] Added pingpong.html and boilerplate

---
 HTML_boilerplate.html | 16 +++++++
 pingpong.html         | 97 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 HTML_boilerplate.html
 create mode 100644 pingpong.html
diff --git a/HTML_boilerplate.html b/HTML_boilerplate.html
new file mode 100644
index 0000000..7d9fd5c
--- /dev/null
+++ b/HTML_boilerplate.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>HTML5 Boilerplate</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <h1>Page Title</h1>
+  <script src="scripts.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/pingpong.html b/pingpong.html
new file mode 100644
index 0000000..4c3774c
--- /dev/null
+++ 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>
\ No newline at end of file
