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; + }); })();