From a43d5c5ae2e5d784fea06f691fae27a2de1f79b1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 16 Jul 2026 09:05:55 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=91=D0=B0=D0=B7=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D1=8F=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D0=B0=20=D0=B4=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BC=D1=8F=D1=87=D0=B0?=
 =?UTF-8?q?=20=D0=B8=20=D1=81=D1=82=D0=BE=D0=BB=D0=BA=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=81=D0=BE=20=D1=81=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config.js |  4 ++++
 src/main.js   | 39 +++++++++++++++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/config.js b/src/config.js
index 7be99b5..49deba3 100644
--- a/src/config.js
+++ b/src/config.js
@@ -3,3 +3,7 @@ export const CONTAINER_HEIGHT = 600;
 
 export const PADDLE_WIDTH = 50;
 export const PADDLE_HEIGHT = 10;
+
+export const BALL_RADIUS = 10;
+export const BALL_SPEED = 3;
+export const BALL_INITIAL_ANGLE = 180;
diff --git a/src/main.js b/src/main.js
index bd22d91..85012d1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,14 @@
 import './style.css';
 import { Application, Assets, Container, Graphics, Sprite } from 'pixi.js';
-import { CONTAINER_HEIGHT, CONTAINER_WIDTH, PADDLE_HEIGHT, PADDLE_WIDTH } from './config';
+import {
+  BALL_INITIAL_ANGLE,
+  BALL_RADIUS,
+  BALL_SPEED,
+  CONTAINER_HEIGHT,
+  CONTAINER_WIDTH,
+  PADDLE_HEIGHT,
+  PADDLE_WIDTH,
+} from './config';
 
 (async () => {
   // Create a new application
@@ -24,7 +32,6 @@ import { CONTAINER_HEIGHT, CONTAINER_WIDTH, PADDLE_HEIGHT, PADDLE_WIDTH } from '
   app.stage.addChild(container);
 
   const paddle = new Graphics().rect(0, CONTAINER_HEIGHT - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT).fill('#fff000');
-
   container.addChild(paddle);
 
   container.on('pointermove', (event) => {
@@ -34,4 +41,32 @@ import { CONTAINER_HEIGHT, CONTAINER_WIDTH, PADDLE_HEIGHT, PADDLE_WIDTH } from '
       paddle.x = localPosition.x;
     }
   });
+
+  const ball = new Graphics().circle(0, 0, BALL_RADIUS).fill('#ffffff');
+  container.addChild(ball);
+
+  const leftBoundary = BALL_RADIUS;
+  const rightBoundary = CONTAINER_WIDTH - BALL_RADIUS;
+  const topBoundary = BALL_RADIUS;
+  const bottomBoundary = CONTAINER_HEIGHT - BALL_RADIUS;
+
+  let horizontalSpeed = BALL_SPEED * Math.cos(BALL_INITIAL_ANGLE);
+  let verticalSpeed = -1 * BALL_SPEED * Math.sin(BALL_INITIAL_ANGLE);
+
+  app.ticker.add((time) => {
+    // Не даем выйти за границы стен слева / справав и меняем направление
+    if (ball.x <= leftBoundary || ball.x >= rightBoundary) {
+      ball.x = ball.x <= leftBoundary ? leftBoundary : rightBoundary;
+      horizontalSpeed *= -1;
+    }
+
+    // Не даем выйти за границы стен сверху / снизу и меняем направление
+    if (ball.y <= topBoundary || ball.y >= bottomBoundary) {
+      ball.y = ball.y <= topBoundary ? topBoundary : bottomBoundary;
+      verticalSpeed *= -1;
+    }
+
+    ball.x += horizontalSpeed * time.deltaTime;
+    ball.y += verticalSpeed * time.deltaTime;
+  });
 })();