Тема 22 Анімація елементів на полотні 2/2

М’яч, що відбивається з двох сторін

Надання швидкості та напрямку м’яча

Тепер створимо м’ячик, що стрибатиме по всьому полотні. Вдаряючись об одну зі стінок полотна він відбиватиметься від неї, як це сталося б з каучуковим м'ячем.

Спершу створимо JavaScript-об’єкт за допомогою конструктора Ball - це і буде наш м’яч. Цей об’єкт зберігатиме дані про швидкість м'яча та напрямок його руху, використовуючи дві властивості: xSpeed та ySpeed. Горизонтальна швидкість м'яча контролюватиметься через xSpeed,а вертикальна - за допомогою ySpeed.

var Ball = function(){
    this.x = 100;
    this.y = 100;
    this.xSpeed = -2;
    this.ySpeed = 3;
};

Наш конструктор — річ прямолінійна: він просто задає вихідну позицію м'яча (this.x та this.y) та його горизонтальну (this.xSpeed) i вертикальну (this.ySpeed) швидкості. Початкову позицію ми задаємо на точці (100, 100), яка є центром нашого полотна розміром 200 на 200 пікселів this.xSpeed виставляється на -2 Таким чином на кожному кроці анімації ми змушуватимемо м'яч рухатися на 2 пікселі вліво. this.ySpeed виставляється на З. Отже, м'яч рухатиметься по діагоналі вниз (З пікселі) і вліво (2 пікселі) поміж кадрами анімації.

Функція для малювання м’яча

Далі додаємо метод draw, аби, щоб намалювати м'яч. Ми додамо цей метод до прототипу конструктора Ball так, щоб будь-який об'єкт, створений конструктором Ball, міг ним скористатися:

var circle = function (x, y, radius, fillCircle) {
            ctx.beginPath(); 
            ctx.arc(x, y, radius, 0, Math.PI * 2, false); 
            if (fillCircle) {
                ctx.fill();
            } else {
                ctx.stroke(); 
            };
        
Ball.prototype.draw = function (){
            circle(this.x, this.y, 3, true);
        };

Спершу ми вкладемо до коду функцію circle, ту ж, яку ми використовували раніше у попередній темі. Далі ми додаємо метод draw до властивості prototype конструктора Ball - Ball.prototype. Цей метод просто викликає circle(this.x, this.y, 3, true), щоб намалювати коло. Центр кола розташується на позиції (this.x, this.y) — локація м'яча. Він матиме радіус З пікселі. Ми передаємо true як фінальний аргумент, аби сказати функції circle заповнити коло кольором.

Переміщення м’яча

Щоб переміщати м'яч нам потрібно лише оновити його х- та у-властивості, базуючи нові властивості на його поточній швидкості. У цьому нам допоможе метод move:

Ball.prototype.move = function () {
    this.x += this.xSpeed; 
    this.y += this.ySpeed; 
} ;

Ми, використовуємо this.x += this.xSpeed щоб додати горизонтальну швидкість м'яча до this.x. Далі операція this.y += this.ySpeed додає вертикальну швидкість до this.y. Наприклад, на початку анімації м'яч знаходитиметься на точці (100, 100) із this.xSpeed, виставленим на -2 i this.ySpeed - на 3. Викликаючи метод move, ми віднімаємо 2 від значення х та додаємо З до значення у.

Перевірка на виліт за межі полотна

Тепер створимо функцію яка називається checkCollision. Ця функція перевіряє, чи торкається м'яч краю екрану. Якщо м'яч досягнув одного з країв, його швидкість змінюється, щоб він відскакував назад.

Ball.prototype.checkCollision = function(){
    if(this.x < 0 || this.x > canvas.width){
        this.xSpeed = -this.xSpeed;
    } 
    if(this.y < 0 || this.y > canvas.height){
        this.ySpeed = -this.ySpeed;
    }
};

if(this.x < 0 || this.x > canvas.width):

this.x — це поточна горизонтальна позиція м'яча.
< 0 перевіряє, чи м'яч вийшов за лівий край екрану.
this.x > canvas.width перевіряє, чи м'яч вийшов за правий край екрану.

Якщо хоча б одна з цих умов виконується (м'яч торкнувся верхнього або нижнього краю), ми змінюємо його швидкість по вертикалі. Це означає, що якщо м'яч вдарився об верхній або нижній край, його швидкість зміниться на протилежну і він почне рухатись у зворотний бік.

Отже, коли м'яч рухається по екрану і досягає одного з країв (лівої, правої, верхньої чи нижньої частини), ця функція перевіряє, чи не вийшов він за межі екрану. Якщо м'яч вдаряється об край, його швидкість змінюється на протилежну, і він відскакує назад в середину екрану. Це дозволяє м'ячу відскакувати від країв, а не виходити за межі екрану.

Давайте пригадаємо що таке setInterval. setInterval – це функція в JavaScript, яка дозволяє виконувати якийсь код через певні проміжки часу постійно.
Що робить функція setInterval:
Вона дозволяє нам виконувати певний код знову і знову через однаковий час. Наприклад, можна зробити так, щоб кожні 2 секунди щось відбувалося на сторінці (наприклад, змінювався колір фону).

Основна структура:

setInterval(function() {
   // Що ми хочемо робити кожен раз
}, час_в_мілісекундах);

Перший аргумент — це функція, яка буде виконуватися.
Другий аргумент — це час у мілісекундах. Наприклад, 1000 мілісекунд = 1 секунда.

Якщо ми хочемо кожні 3 секунди змінювати колір тексту на сайті, тоді код наш буде виглядати ось так:

setInterval(function() {
   document.body.style.color = "red"; // змінюємо колір тексту на червоний
}, 3000); // кожні 3 секунди (3000 мілісекунд)

Це означає, що кожні 3 секунди текст на сторінці ставатиме червоним.

Анімуємо м’яч

Тепер можемо написати код, який запустить нашу анімацію і глянути що у нас вийшло:

var ball = new Ball();
setInterval(function(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ball.draw();
    ball.move();
    ball.checkCollision();
    ctx.strokeRect(0, 0, canvas.width, canvas.height);
}, 30);

Отже, весь наш код має такий вигляд:

s5-2.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22 Анімація елементів на полотні 2_2</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
    </style>
</head>
<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
        const canvas = document.getElementById("canvas"); 
        const ctx = canvas.getContext("2d"); 

        var Ball = function(){
            this.x = 100;
            this.y = 100;
            this.xSpeed = -2;
            this.ySpeed = 3;
        };

        var circle = function (x, y, radius, fillCircle) {
            ctx.beginPath(); 
            ctx.arc(x, y, radius, 0, Math.PI * 2, false); 
            if (fillCircle) {
                ctx.fill();
            } else {
                ctx.stroke(); 
            }
        };
       
        Ball.prototype.draw = function (){
            circle(this.x, this.y, 3, true);
        };
        
        Ball.prototype.move = function () {
            this.x += this.xSpeed; 
            this.y += this.ySpeed; 
        };

        Ball.prototype.checkCollision = function(){
            if(this.x < 0 || this.x > canvas.width){
                this.xSpeed = -this.xSpeed;
            } 
            if(this.y < 0 || this.y > canvas.height){
                this.ySpeed = -this.ySpeed;
            }
        };

        var ball = new Ball();

        setInterval(function(){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ball.draw();
            ball.move();
            ball.checkCollision();
            ctx.strokeRect(0, 0, canvas.width, canvas.height);
        }, 30);

    </script>
</body>
</html>

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC