Тема 26 Події клавіатури 2/2

Переміщаємо м’яч за допомогою клавіатури

Налаштовування полотна

Тепер, знаючи як налаштувати полотно на натискання клавіш на клавіатурі, ми можемо написати програму, яка контролюватиме рух нашого м’яча за допомогою клавіатури. Натискаючи клавіші-стрілки, ми зможемо задавати напрямок шару, а натискаючи пробіл - зупиняти м’яч. Також під кінець, додамо м’ячу швидкість та розмір, який звісно зможемо змінити.

Спершу нам необхідно налаштувати полотно та контекст об'єкта:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

У першому рядку коду ми використовуємо document.getElementbyld, щоб обрати елемент canvas. У другому рядку ми викликаємо getContext до полотна, щоб отримати контекст об'єкта. Далі у кодових рядках var width та var height ми зберігаємо ширину та висоту елемента canvas у змінних width та height. Таким чином, коли нам знадобляться розміри полотна, ми зможемо використати ці змінні замість того, щоб вводити числа вручну. Тож, якщо забажаємо змінити розмір полотна, ми зможемо просто відредагувати HTML-файл, i JavaScript-код все ще повинен буде працювати.

Задаємо функцію circle

Потім ми задаємо для м'яча ту ж функцію circle, яку ми використовували раніше. Додайте цю функцію в наш код:

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. Ми використовуватимемо його, щоб створити рухомий об'єкт м'яча. Цю техніку ми застосуємо щоб переміщувати м'яч, застосовуючи властивості xSpeed та ySpeed, щоб контролювати горизонтальну та вертикальну швидкості м'яча. Додайте цей код після функції circle:

var Ball = function() {
            this.x = width / 2;
            this.y = height / 2;
            this.xSpeed = 5;
            this.ySpeed = 0;
           this.radius = 10; // Радіус м'яча
        }

Ми виставляємо х- та у-значення (позицію м'яча) на width / 2 та height / 2 так, щоб м'яч з’явився по центру полотна. Також ми виставляємо this.xSpeed на 5 та this.ySpeed на 0. Це означає, що анімація м'яча розпочнеться з руху вправо (себто з кожним кроком анімації його позиція х зростатиме на 5 пікселів, а позиція у залишатиметься незмінною).

Створюємо метод move

У цьому підрозділі ми задамо метод move. Ми додамо цей метод до Ball.prototype, щоб м'яч, базуючись на своїй поточній xSpeed- та ySpeed- локаціях, розпочинав рух до нового місця розташування. Додайте цей метод після конструктора Ball:

Ball.prototype.move = function() {
            this.x += this.xSpeed;
            this.y += this.ySpeed;
            // Перевіряємо зіткнення з краєм полотна
            if (this.x - this.radius < 0 || this.x + this.radius > width) {
                this.xSpeed = -this.xSpeed; // Змінюємо напрямок по осі X
            }
            if (this.y - this.radius < 0 || this.y + this.radius > height) {
                this.ySpeed = -this.ySpeed; // Змінюємо напрямок по осі Y
            }
        };

this.x += this.xSpeed; та this.y += this.ySpeed; відповідає за зміну позиції кульки на полотні (canvas) шляхом додавання швидкості (xSpeed і ySpeed) до її поточної позиції за осями X і Y відповідно. Це забезпечує рух кульки на кожному кроці анімації. Перша умова перевіряє, чи не вийшла кулька за межі полотна зліва або справа. Якщо координата кульки з урахуванням її радіуса менша за 0 (ліва межа) або більша за ширину полотна (права межа), швидкість по осі X змінюється на протилежну, що створює ефект відбивання від стінки. Друга умова аналогічно до попередньої перевірки, перевіряє зіткнення з верхньою та нижньою межами полотна. Якщо кулька досягла верхньої або нижньої межі, швидкість по осі Y також змінюється на протилежну, що викликає її відбивання вгору або вниз.

Створюємо метод draw

Ми застосовуємо метод draw, щоб намалювати м’яч. Додаємо ось це код, до нашого наявного:

Ball.prototype.draw = function(){
            circle(this.x, this.y, this.radius, true);
        };

Цей метод викликає функцію circle, яка використовує значення координат м’яча та радіус (раніше у коді прописали radius=10).

Створюємо метод SetDirection

Тепер нам треба зрозуміти, як задати напрямок руху м'яча. Ми зробимо це за допомогою методу, що зветься setDirection. Цей метод викликатиметься нашим обробником подій у події keydown. Обробник подій із події keydown вказуватиме методу setDirection, який ключ було натиснуто, передаючи йому рядок ("left", "up", "right", "down" або "stop"). Виходячи з того, який саме рядок буде передано, setDirection змінюватиме xSpeed- та ySpeed- властивості м'яча, щоб він рухався у напрямку що збігається із натиснутим ключем. Наприклад, якщо передається рядок "down", ми виставляємо this.xSpeed на 0, a this.ySpeed на 5. Додайте такий код після методу draw:

Ball.prototype.setDirection = function(direction){
            if(direction === "up"){
                this.xSpeed = 0;
                this.ySpeed = -5;
            } else if(direction === "down"){
                this.xSpeed = 0;
                this.ySpeed = 5;
            } else if(direction === "left"){
                this.xSpeed = -5;
                this.ySpeed = 0;
            } else if(direction === "right"){
                this.xSpeed = 5;
                this.ySpeed = 0;
 } else if(direction === "stop"){
                this.xSpeed = 0;
                this.ySpeed = 0;
            }
        };

Абсолютно все тіло цього методу, від початку до кінця це одне довге if…else твердження. Новий напрямок передаємо до методу як аргумент direction. Якщо direction тотожний "up" ми виставляємо xSpeed властивість м'яча на 0, а його властивість ySpeed на -5. Усі інші напрямки керуються таким же способом.

Реагуємо на клавіатуру

Наступну частину коду створює об'єкт ball за допомогою конструктора Ball i реагує на keydown-події, щоб задати напрямок руху м’яча. Додайте цей код після методу setDirection:

var ball = new Ball();
        // Мапа клавіатурних подій
        var keyActions = {
            32: "stop",  // зупинка
            37: "left",  // вліво
            38: "up",    // вверх
            39: "right", // вправо
            40: "down"    // вниз
        };
 $("body").keydown(function(event){
            var action = keyActions[event.keyCode];
            ball.setDirection(action); // Інші клавіші для зміни напрямку
        });

Подія keydown — це коли ви натискаєте клавішу на клавіатурі, і браузер реагує на цю подію. У нашому коді ми використовуємо цю подію для того, щоб змінити напрямок руху м'яча на полотні.
$("body").keydown(function(event) — це означає, що ми слухаємо події натискання клавіш на всьому тілі сторінки (на всій сторінці).
event.keyCode — це код клавіші, яку було натиснуто.
var action = keyActions[event.keyCode] — тут ми визначаємо, яка дія повинна відбутися залежно від того, яку клавішу натиснуто (в нашому випадку це напрямки "вгору", "вниз", "вліво" або "вправо").
ball.setDirection(action) — тут м'яч змінює свій напрямок залежно від натиснутої клавіші.

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

Тепер залишилось діло за малим, анімувати наш м’яч за допомогою SetInterval.

setInterval(function(){
            ctx.clearRect(0, 0, width, height); // Очищаємо канвас перед кожним малюванням
            ball.draw();
            ball.move(); // Переміщаємо м'яч
            ctx.strokeRect(0, 0, width, height); // Малюємо рамку канвасу
        }, 30);

Глянемо весь наш код разом:

s8-2.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Події клавіатури 2_2__1</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

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

var Ball = function() {
    this.x = width / 2;
    this.y = height / 2;
    this.xSpeed = 5;
    this.ySpeed = 0;
    this.radius = 10; // Радіус м'яча
}

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

    // Перевіряємо зіткнення з краєм полотна
    if (this.x - this.radius < 0 || this.x + this.radius > width) {
        this.xSpeed = -this.xSpeed; // Змінюємо напрямок по осі X
    }

    if (this.y - this.radius < 0 || this.y + this.radius > height) {
        this.ySpeed = -this.ySpeed; // Змінюємо напрямок по осі Y
    }
};

Ball.prototype.draw = function(){
    circle(this.x, this.y, this.radius, true);
};

Ball.prototype.setDirection = function(direction){
    if(direction === "up"){
        this.xSpeed = 0;
        this.ySpeed = -5;
    } else if(direction === "down"){
        this.xSpeed = 0;
        this.ySpeed = 5;
    } else if(direction === "left"){
        this.xSpeed = -5;
        this.ySpeed = 0;
    } else if(direction === "right"){
        this.xSpeed = 5;
        this.ySpeed = 0;
    } else if(direction === "stop"){
        this.xSpeed = 0;
        this.ySpeed = 0;
    }
};

var ball = new Ball();

// Мапа клавіатурних подій
var keyActions = {
    32: "stop",  // зупинка
    37: "left",  // вліво
    38: "up",    // вверх
    39: "right", // вправо
    40: "down"    // вниз
};



$("body").keydown(function(event){
    var action = keyActions[event.keyCode];
    ball.setDirection(action); // Інші клавіші для зміни напрямку
});

setInterval(function(){
    ctx.clearRect(0, 0, width, height); // Очищаємо канвас перед кожним малюванням

    ball.draw();
    ball.move(); // Переміщаємо м'яч

    ctx.strokeRect(0, 0, width, height); // Малюємо рамку канвасу
}, 30);
</script>
</body>
</html>

Тепер, давайте порівняємо наступний код із нашим:

s8-3.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Події клавіатури 2_2__2</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>

// Отримуємо елемент canvas та його контекст для малювання
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;  // Ширина канваса
var height = canvas.height; // Висота канваса

// Функція для малювання кола
var circle = function (x, y, radius, fillCircle, color){
ctx.beginPath(); // Починаємо новий шлях
ctx.arc(x, y, radius, 0, Math.PI*2, false); // Малюємо коло
ctx.fillStyle = color; // Встановлюємо колір заповнення або обводки
if (fillCircle){
ctx.fill(); // Заповнюємо коло
} else {
ctx.stroke(); // Лишаємо тільки обводку
}
};

// Конструктор для об'єкта "М'яч"
var Ball = function() {
this.x = width / 2;  // Початкова позиція по осі X (по центру)
this.y = height / 2; // Початкова позиція по осі Y (по центру)
this.xSpeed = 5;  // Початкова швидкість по осі X
this.ySpeed = 0;  // Початкова швидкість по осі Y
this.radius = 10; // Початковий радіус м'яча
this.color = "black"; // Початковий колір м'яча
this.speed = 5;   // Початкова швидкість м'яча
}

// Метод для руху м'яча
Ball.prototype.move = function() {
this.x += this.xSpeed;  // Оновлюємо координату X
this.y += this.ySpeed;  // Оновлюємо координату Y

// Перевірка зіткнень з межами канваса (відбиття м'яча)
if (this.x - this.radius < 0 || this.x + this.radius > width) {
this.xSpeed = -this.xSpeed; // Якщо м'яч досягнув лівої чи правої межі — змінюємо напрямок по осі X
}

if (this.y - this.radius < 0 || this.y + this.radius > height) {
this.ySpeed = -this.ySpeed; // Якщо м'яч досягнув верхньої чи нижньої межі — змінюємо напрямок по осі Y
}
};

// Метод для малювання м'яча
Ball.prototype.draw = function(){
circle(this.x, this.y, this.radius, true, this.color); // Малюємо заповнений м'яч
};

// Метод для зміни напрямку м'яча
Ball.prototype.setDirection = function(direction){
if(direction === "up"){
this.xSpeed = 0;  // Остановлюємо рух по осі X
this.ySpeed = -this.speed;  // Рухаємось вгору
} else if(direction === "down"){
this.xSpeed = 0;  // Остановлюємо рух по осі X
this.ySpeed = this.speed;  // Рухаємось вниз
} else if(direction === "left"){
this.xSpeed = -this.speed;  // Рухаємось вліво
this.ySpeed = 0;  // Остановлюємо рух по осі Y
} else if(direction === "right"){
this.xSpeed = this.speed;  // Рухаємось вправо
this.ySpeed = 0;  // Остановлюємо рух по осі Y
} else if(direction === "stop"){
this.xSpeed = 0;  // Остановлюємо рух по осі X
this.ySpeed = 0;  // Остановлюємо рух по осі Y
}
};

// Метод для зміни розміру м'яча
Ball.prototype.changeSize = function(change) {
this.radius += change;  // Змінюємо радіус
if (this.radius < 5) this.radius = 5;  // Мінімальний радіус
};

// Метод для зміни швидкості м'яча
Ball.prototype.changeSpeed = function(change) {
this.speed += change;  // Змінюємо швидкість
if (this.speed < 1) this.speed = 1;  // Мінімальна швидкість

// Оновлюємо швидкість руху м'яча залежно від його напрямку
if (this.xSpeed !== 0) {
this.xSpeed = this.xSpeed > 0 ? this.speed : -this.speed;
}
if (this.ySpeed !== 0) {
this.ySpeed = this.ySpeed > 0 ? this.speed : -this.speed;
}
};

// Створюємо новий м'яч
var ball = new Ball();

// Мапа клавіатурних подій
var keyActions = {
32: "stop",  // пробіл — зупинка
37: "left",  // стрілка вліво
38: "up",    // стрілка вгору
39: "right", // стрілка вправо
40: "down",  // стрілка вниз
90: "slowDown", // клавіша Z — зменшити швидкість
88: "speedUp",  // клавіша X — збільшити швидкість
67: "decreaseSize", // клавіша C — зменшити розмір
86: "increaseSize" // клавіша V — збільшити розмір
};

// Обробник подій для клавіатурних натискань
$("body").keydown(function(event){
var action = keyActions[event.keyCode]; // Отримуємо дію, відповідну натиснутій клавіші
if (action === "slowDown") {
ball.changeSpeed(-1); // Зменшуємо швидкість м'яча
} else if (action === "speedUp") {
ball.changeSpeed(1); // Збільшуємо швидкість м'яча
} else if (action === "decreaseSize") {
ball.changeSize(-1); // Зменшуємо розмір м'яча
} else if (action === "increaseSize") {
ball.changeSize(1); // Збільшуємо розмір м'яча
} else {
ball.setDirection(action); // Змінюємо напрямок м'яча в залежності від натиснутої клавіші
}
});

// Головний цикл, що виконується кожні 30 мілісекунд
setInterval(function(){
ctx.clearRect(0, 0, width, height); // Очищаємо канвас перед кожним оновленням

ball.draw();  // Малюємо м'яч
ball.move();  // Переміщаємо м'яч

ctx.strokeRect(0, 0, width, height); // Малюємо рамку канваса
}, 30);

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

1) Зміна кольору м'яча:
Додано можливість м'ячу мати колір. Тепер м'яч не лише чорний — в майбутньому його можна змінити на інші кольори за бажанням. Це стало можливим завдяки додаванню параметра color у функції малювання м'яча. У коді м'яч починає з чорного кольору, але тепер його можна змінювати.

2) Регулювання швидкості м'яча:
Додано нову властивість speed, яка відповідає за швидкість руху м'яча. Нові клавіші на клавіатурі:

Z (зменшити швидкість).
X (збільшити швидкість).

Тепер м'яч може рухатися повільніше або швидше, залежно від того, яку клавішу натиснеш.

3) Зміна розміру м'яча:
Додана можливість змінювати розмір м'яча. Властивість radius тепер регулюється. Нові клавіші на клавіатурі:

C (зменшити розмір).
V (збільшити розмір).

М'яч може бути більшим або меншим, але мінімальний розмір — 5 пікселів, щоб він не зник.

build info

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