From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../ru/learn/javascript/objects/basics/index.html | 52 +++++++++++----------- .../javascript/objects/inheritance/index.html | 22 ++++----- .../objects/object-oriented_js/index.html | 32 ++++++------- .../objects/object_building_practice/index.html | 24 +++++----- 4 files changed, 65 insertions(+), 65 deletions(-) (limited to 'files/ru/learn/javascript/objects') diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html index 0c8b3f6a5e..453f1ca169 100644 --- a/files/ru/learn/javascript/objects/basics/index.html +++ b/files/ru/learn/javascript/objects/basics/index.html @@ -34,15 +34,15 @@ original_slug: Learn/JavaScript/Объекты/Основы

Как и во многих случаях в JavaScript, создание объекта часто начинается с определения и инициализации переменной. Попробуйте ввести следующий код JavaScript в ваш файл, а затем сохраните файл и обновите страницу браузера:

-
const person = {};
+
const person = {};

Если вы введёте person в текстовое JS консоль и нажмёте клавишу Enter, должен получиться следующий результат:

-
Object { }
+
Object { }

Поздравляем, вы только что создали ваш первый объект. Но это пустой объект, поэтому мы не можем с ним ничего сделать. Давайте обновим наш объект, чтобы он выглядел так:

-
const person = {
+
const person = {
   name: ['Bob', 'Smith'],
   age: 32,
   gender: 'male',
@@ -58,7 +58,7 @@ original_slug: Learn/JavaScript/Объекты/Основы
 
 
После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:

 
-
person.name
+
person.name
 person.name[0]
 person.age
 person.interests[1]
@@ -73,7 +73,7 @@ person.greeting()

 
 
Итак что здесь происходит? Объект состоит из нескольких элементов, каждый из которых имеет своё название (пример name и age выше), и значение (пример ['Bob', 'Smith'] и 32). Каждая пара название/значение должны быть разделены запятой, а название и значение в каждом случае разделяются двоеточием. Синтаксис всегда следует этому образцу:

 
-
const objectName = {
+
const objectName = {
   member1Name: member1Value,
   member2Name: member2Value,
   member3Name: member3Value
@@ -89,7 +89,7 @@ person.greeting()

 
 
Выше вы получили доступ к свойствам и методам используя точечную запись (dot notation). Имя объекта (person) действует как пространство имён (namespace) — оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (encapsulated) внутри объекта. Далее вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:

 
-
person.age
+
person.age
 person.interests[1]
 person.bio()

 
@@ -97,28 +97,28 @@ person.bio()

 
 
Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого

 
-
name: ['Bob', 'Smith'],

+
name: ['Bob', 'Smith'],

 
 
на такое

 
-
name : {
+
name : {
   first: 'Bob',
   last: 'Smith'
 },

 
 
Здесь мы фактически создаём внутреннее пространство имён (sub-namespace). Это звучит сложно, но на самом деле это не так — для доступа к этим элементам вам нужно сделать один дополнительный шаг с ещё одной точкой. Попробуйте в консоли браузера следующее: 

 
-
person.name.first
+
person.name.first
 person.name.last

 
 
Важно: На этом этапе вам также нужно будет пересмотреть код метода и изменить все экземпляры с

 
-
name[0]
+
name[0]
 name[1]

 
 
на

 
-
name.first
+
name.first
 name.last

 
 
Иначе ваши методы больше не будут работать.

@@ -127,12 +127,12 @@ name.last

 
 
Существует другой способ получить свойства объекта — использовать скобочную запись (bracket notation). Вместо написания этого кода:

 
-
person.age
+
person.age
 person.name.first

 
 
Вы можете использовать следующий

 
-
person['age']
+
person['age']
 person['name']['first']

 
 
Это выглядит очень похоже на то, как вы получаете элементы массива, и в принципе это так и есть — вместо использования числовых индексов для выбора элемента, вы ассоциируете имя свойства для каждого значения. Ничего удивительного, что эти объекты иногда называют ассоциативными массивами — они сопоставляют строки со значениями так же, как массивы сопоставляют числовые индексы со значениями.

@@ -141,42 +141,42 @@ person['name']['first']

 
 
До сих пор мы рассматривали только возврат (или получение) элементов объекта — вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который вы хотите установить (используя точечную или скобочную запись), например:

 
-
person.age = 45;
+
person.age = 45;
 person['name']['last'] = 'Cratchit';

 
 
Попробуйте ввести эти строки, а затем снова верните элементы, чтобы увидеть, как они изменились

 
-
person.age
+
person.age
 person['name']['last']

 
 
Вы можете не просто обновлять и устанавливать значения свойств и методов объекта, а так же устанавливать совершенно новые элементы. Попробуйте их в консоли JS:

 
-
person['eyes'] = 'hazel';
+
person['eyes'] = 'hazel';
 person.farewell = function() { alert("Bye everybody!"); }

 
 
Теперь вы можете проверить ваши новые элементы:

 
-
person['eyes']
+
person['eyes']
 person.farewell()

 
 
Одним из полезных аспектов скобочной записи является то, что с её помощью можно динамически задавать не только значения элементов, но и их имена. Предположим, что мы хотим, чтобы пользователи могли хранить пользовательские типы данных, введя имя и значение элемента в два следующих поля? Мы могли бы получить эти значения следующим образом:

 
-
let myDataName = nameInput.value;
+
let myDataName = nameInput.value;
 let myDataValue = nameValue.value;

 
 
Затем мы можем добавить имя и значение этого нового элемента в объект person таким образом:

 
-
person[myDataName] = myDataValue;

+
person[myDataName] = myDataValue;

 
 
Чтобы проверить это, попробуйте добавить следующие строки в свой код, после закрывающей скобки объекта person :

 
-
let myDataName = 'height';
+
let myDataName = 'height';
 let myDataValue = '1.75m';
 person[myDataName] = myDataValue;

 
 
Теперь попробуйте сохранить и обновить, затем введите следующее в консоль браузера:

 
-
person.height

+
person.height

 
 
Добавление свойства объекта с использованием вышеописанного метода невозможно с использованием точечной записи, которая может принимать только литеральное имя элемента, а не значение переменной указывающее на имя.

 
@@ -184,7 +184,7 @@ person[myDataName] = myDataValue;

 
 
Возможно, вы заметили что-то странное в наших методах. Посмотрите на этот пример:

 
-
greeting: function() {
+
greeting: function() {
   alert('Hi! I\'m ' + this.name.first + '.');
 }

 
@@ -192,7 +192,7 @@ person[myDataName] = myDataValue;

 
 
Давайте проиллюстрируем, что мы имеем в виду, с упрощённой парой объектов person :

 
-
const person1 = {
+
const person1 = {
   name: 'Chris',
   greeting: function() {
     alert('Hi! I\'m ' + this.name + '.');
@@ -214,13 +214,13 @@ const person2 = {
 
 
Поэтому, когда вы использовали строковые методы, такие как:

 
-
myString.split(',');

+
myString.split(',');

 
 
Вы использовали метод доступный в экземпляре класса String. Каждый раз создавая строку в вашем коде, эта строка автоматически создаётся как экземпляр String, и поэтому имеет несколько общих методов/свойств, доступных на нем.

 
 
Когда вы обращались к объектной модели документа (DOM), используя следующие строки:

 
-
const myDiv = document.createElement('div');
+
const myDiv = document.createElement('div');
 const myVideo = document.querySelector('video');

 
 
Вы использовали методы доступные в экземпляре класса Document. Для каждой загруженной веб-страницы создаётся экземпляр Document, называемый document, который представляет всю структуру страницы, её содержимое и другие функции, такие как URL-адрес. Опять же, это означает, что он имеет несколько общих методов/свойств, доступных на нем.

@@ -229,7 +229,7 @@ const myVideo = document.querySelector('video');

 
 
Обратите внимание, что встроенные объекты/API не всегда создают экземпляры объектов автоматически. Как пример, Notifications API — который позволяет новым браузерам запускать системные уведомления, требует, чтобы вы создавали новый экземпляр объекта с помощью конструктора для каждого уведомления, которое вы хотите запустить. Попробуйте ввести следующее в консоль JavaScript:

 
-
const myNotification = new Notification('Hello!');

+
const myNotification = new Notification('Hello!');

 
 
Опять же, мы рассмотрим конструкторы в следующей статье.

 
diff --git a/files/ru/learn/javascript/objects/inheritance/index.html b/files/ru/learn/javascript/objects/inheritance/index.html
index 97e9a98fbd..f1514a92c6 100644
--- a/files/ru/learn/javascript/objects/inheritance/index.html
+++ b/files/ru/learn/javascript/objects/inheritance/index.html
@@ -57,7 +57,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance
 
 
Прежде всего сделайте себе локальную копию нашего файла oojs-class-inheritance-start.html (он также работает в режиме реального времени). В файле вы найдёте тот же пример конструктора Person(), который мы использовали на протяжении всего модуля, с небольшим отличием - мы определили внутри конструктора только лишь свойства:

 
-
function Person(first, last, age, gender, interests) {
+
function Person(first, last, age, gender, interests) {
   this.name = {
     first,
     last
@@ -69,7 +69,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance
 
 
Все методы определены в прототипе конструктора. Например:

 
-
Person.prototype.greeting = function() {
+
Person.prototype.greeting = function() {
   alert('Hi! I\'m ' + this.name.first + '.');
 };

 
@@ -88,7 +88,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance
 
 
Первое, что нам нужно сделать, это создать конструктор Teacher() - добавьте ниже следующий код:

 
-
function Teacher(first, last, age, gender, interests, subject) {
+
function Teacher(first, last, age, gender, interests, subject) {
   Person.call(this, first, last, age, gender, interests);
 
   this.subject = subject;
@@ -102,7 +102,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance
 
 
В качестве примечания мы могли бы просто сделать это:

 
-
function Teacher(first, last, age, gender, interests, subject) {
+
function Teacher(first, last, age, gender, interests, subject) {
   this.name = {
     first,
     last
@@ -119,14 +119,14 @@ original_slug: Learn/JavaScript/Объекты/Inheritance
 
 
Обратите внимание, что если конструктор, от которого вы наследуете, не принимает значения своего свойства из параметров, вам не нужно указывать их в качестве дополнительных аргументов в call(). Так, например, если у вас было что-то действительно простое:

 
-
function Brick() {
+
function Brick() {
   this.width = 10;
   this.height = 20;
 }

 
 
Вы можете наследовать свойства width и height, выполнив это (как и другие шаги, описанные ниже, конечно):

 
-
function BlueGlassBrick() {
+
function BlueGlassBrick() {
   Brick.call(this);
 
   this.opacity = 0.5;
@@ -141,11 +141,11 @@ original_slug: Learn/JavaScript/Объекты/Inheritance
 
 
    
  
  1. Добавьте следующую строку ниже своего предыдущего добавления:
-  
    Teacher.prototype = Object.create(Person.prototype);
    
+  
    Teacher.prototype = Object.create(Person.prototype);
    
   Здесь наш друг create() снова приходит на помощь. В этом случае мы используем его для создания нового объекта и делаем его значением Teacher.prototype. Новый объект имеет свой прототип Person.prototype и, следовательно, наследует, если и когда это необходимо, все доступные методы Person.prototype.
    2. 
  
  2. Нам нужно сделать ещё одну вещь, прежде чем двигаться дальше. После добавления последней строки, Teacher.prototype.constructor стало равным Person(), потому что мы просто устанавливаем Teacher.prototype для ссылки на объект, который наследует его свойства от Person.prototype! Попробуйте сохранить код, загрузите страницу в браузере и введите Teacher.prototype.constructor в консоль для проверки.
    3. 
  
  3. Это может стать проблемой, поэтому нам нужно сделать это правильно. Вы можете сделать это, вернувшись к исходному коду и добавив следующие строки внизу:
-  
    Object.defineProperty(Teacher.prototype, 'constructor', {
+  
    Object.defineProperty(Teacher.prototype, 'constructor', {
     value: Teacher,
     enumerable: false, // false, чтобы данное свойство не появлялось в цикле for in
     writable: true });
    
@@ -159,7 +159,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance
 
 
    Самый простой способ сделать это - определить его на прототипе Teacher() - добавить в нижнюю часть кода следующее:
    
 
-
    Teacher.prototype.greeting = function() {
+
    Teacher.prototype.greeting = function() {
   var prefix;
 
   if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
@@ -179,11 +179,11 @@ original_slug: Learn/JavaScript/Объекты/Inheritance
 
 
    Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из Teacher(), поставив ниже вашего JavaScript-кода (или что-то похожее по вашему выбору):
    
 
-
    var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
    
+
    var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
    
 
 
    Теперь сохраните, обновите, и попробуйте получить доступ к свойствам и методам вашего нового объекта teacher1, например:
    
 
-
    teacher1.name.first;
+
    teacher1.name.first;
 teacher1.interests[0];
 teacher1.bio();
 teacher1.subject;
diff --git a/files/ru/learn/javascript/objects/object-oriented_js/index.html b/files/ru/learn/javascript/objects/object-oriented_js/index.html
index 7fe8592651..409aa367f2 100644
--- a/files/ru/learn/javascript/objects/object-oriented_js/index.html
+++ b/files/ru/learn/javascript/objects/object-oriented_js/index.html
@@ -87,7 +87,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS
 
      
  
    1. Давайте рассмотрим как можно определить человека с нормальной функцией. Добавьте эту функцию в элемент script:
 
-  
      function createNewPerson(name) {
+  
      function createNewPerson(name) {
   const obj = {};
   obj.name = name;
   obj.greeting = function() {
@@ -97,12 +97,12 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS
 }
      
  
      2. 
  
    2. Теперь вы можете создать нового человека, вызвав эту функцию - попробуйте следующие строки в консоли JavaScript браузера:
-  
      const salva = createNewPerson('Salva');
+  
      const salva = createNewPerson('Salva');
 salva.name;
 salva.greeting();
      
   Это работает достаточно хорошо, но код излишне многословен; если мы знаем, что хотим создать объект, зачем нам явно создавать новый пустой объект и возвращать его? К счастью, JavaScript предоставляет нам удобный способ в виде функций-конструкторов - давайте сделаем это сейчас!
      3. 
  
    3. Замените предыдущую функцию следующей:
-  
      function Person(name) {
+  
      function Person(name) {
   this.name = name;
   this.greeting = function() {
     alert('Hi! I\'m ' + this.name + '.');
@@ -121,11 +121,11 @@ salva.greeting();
      
 
 
        
  
      1. Добавьте следующие строки под предыдущим добавлением кода:
-  
        let person1 = new Person('Bob');
+  
        let person1 = new Person('Bob');
 let person2 = new Person('Sarah');
        
  
        2. 
  
      2. Сохраните код и перезагрузите его в браузере и попробуйте ввести следующие строки в консоль JS:
-  
        person1.name
+  
        person1.name
 person1.greeting()
 person2.name
 person2.greeting()
        
@@ -136,12 +136,12 @@ person2.greeting()
        
 
 
        Давайте снова посмотрим на вызовы конструктора:
        
 
-
        let person1 = new Person('Bob');
+
        let person1 = new Person('Bob');
 let person2 = new Person('Sarah');
        
 
 
        В каждом случае ключевое слово new используется, чтобы сообщить браузеру, что мы хотим создать экземпляр нового объекта, за которым следует имя функции с её необходимыми параметрами, содержащимися в круглых скобках, и результат сохраняется в переменной - очень похоже на то, как вызывается стандартная функция. Каждый экземпляр создаётся в соответствии с этим определением:
        
 
-
        function Person(name) {
+
        function Person(name) {
   this.name = name;
   this.greeting = function() {
     alert('Hi! I\'m ' + this.name + '.');
@@ -150,7 +150,7 @@ let person2 = new Person('Sarah');
        
 
 
        После создания новых объектов переменные person1 и person2 содержат следующие объекты:
        
 
-
        {
+
        {
   name: 'Bob',
   greeting: function() {
     alert('Hi! I\'m ' + this.name + '.');
@@ -172,7 +172,7 @@ let person2 = new Person('Sarah');
        
 
 
          
  
        1. Замените весь предыдущий код новой функцией конструктора - это, в принципе, тот же самое что и в наглядном примере, но несколько сложнее:
-  
          function Person(first, last, age, gender, interests) {
+  
          function Person(first, last, age, gender, interests) {
   this.name = {
     first : first,
     last: last
@@ -189,13 +189,13 @@ let person2 = new Person('Sarah');
          
 };
          
  
          2. 
  
        2. Теперь добавьте следующую строку ниже, чтобы создать экземпляр объекта из него:
-  
          let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
          
+  
          let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
          
  
          3. 
 
        
 
 
        Как вы могли заметить, вы можете получить доступ к свойствам и методам, как это было ранее, - попробуйте использовать их в консоли JS:
        
 
-
        person1['age']
+
        person1['age']
 person1.interests[1]
 person1.bio()
 // etc.
        
@@ -224,17 +224,17 @@ person1.bio()
 
 
          
  
        1. Попробуйте ввести это в консоль JavaScript вашего браузера:
-  
          let person1 = new Object();
          
+  
          let person1 = new Object();
          
  
          2. 
  
        2. Это сохраняет ссылку на пустой объект в переменную person1. Затем вы можете добавить свойства и методы к этому объекту с использованием точечной или скобочной нотации по желанию; попробуйте эти примеры в консоли:
-  
          person1.name = 'Chris';
+  
          person1.name = 'Chris';
 person1['age'] = 38;
 person1.greeting = function() {
   alert('Hi! I\'m ' + this.name + '.');
 };
          
  
          3. 
  
        3. Вы также можете передать литерал объекта конструктору Object() в качестве параметра, чтобы заполнить его свойствами / методами. Попробуйте это в консоли JS:
-  
          let person1 = new Object({
+  
          let person1 = new Object({
   name: 'Chris',
   age: 38,
   greeting: function() {
@@ -252,10 +252,10 @@ person1.greeting = function() {
 
 
            
  
          1. Закончив упражнение из предыдущего раздела, загруженное в браузер, попробуйте это в консоли JavaScript:
-  
            let person2 = Object.create(person1);
            
+  
            let person2 = Object.create(person1);
            
  
            2. 
  
          2. Теперь попробуйте:
-  
            person2.name
+  
            person2.name
 person2.greeting()
            
  
            3. 
 
          
diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.html b/files/ru/learn/javascript/objects/object_building_practice/index.html
index 155d130c77..283ee36001 100644
--- a/files/ru/learn/javascript/objects/object_building_practice/index.html
+++ b/files/ru/learn/javascript/objects/object_building_practice/index.html
@@ -49,7 +49,7 @@ original_slug: Learn/JavaScript/Объекты/Object_building_practice
 
 
          Первая часть скрипта выглядит так:
          
 
-
          var canvas = document.querySelector('canvas');
+
          var canvas = document.querySelector('canvas');
 
 var ctx = canvas.getContext('2d');
 
@@ -64,7 +64,7 @@ var height = canvas.height = window.innerHeight;
          
 
 
          Последний бит исходного скрипта выглядит следующим образом:
          
 
-
          function random(min, max) {
+
          function random(min, max) {
   var num = Math.floor(Math.random() * (max - min + 1)) + min;
   return num;
 }
          
@@ -75,7 +75,7 @@ var height = canvas.height = window.innerHeight;
          
 
 
          В нашей программе будет много шаров, подпрыгивающих вокруг экрана. Поскольку эти шары будут вести себя одинаково, имеет смысл представлять их в виде объекта. Начнём с добавления следующего конструктора в конец нашего кода.
          
 
-
          function Ball(x, y, velX, velY, color, size) {
+
          function Ball(x, y, velX, velY, color, size) {
   this.x = x;
   this.y = y;
   this.velX = velX;
@@ -99,7 +99,7 @@ var height = canvas.height = window.innerHeight;
          
 
 
          Сначала добавьте следующий метод draw() к Ball()'s prototype:
          
 
-
          Ball.prototype.draw = function() {
+
          Ball.prototype.draw = function() {
   ctx.beginPath();
   ctx.fillStyle = this.color;
   ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
@@ -127,10 +127,10 @@ var height = canvas.height = window.innerHeight;
          
  
        4. Сохраните код и загрузите HTML-файл в браузер.
          5. 
  
        5. Откройте консоль JavaScript браузера, а затем обновите страницу, чтобы размер холста изменился в соответствии с новой шириной и высотой окна просмотра браузера после открытия консоли.
          6. 
  
        6. Чтобы создать новый экземпляр шара, введите следующее:
-  
          var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
          
+  
          var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
          
  
          7. 
  
        7. Попробуйте вызвать его свойства и методы:
-  
          testBall.x
+  
          testBall.x
 testBall.size
 testBall.color
 testBall.draw()
          
@@ -142,7 +142,7 @@ testBall.draw()
          
 
 
          Мы можем нарисовать мяч в нужном положении, но чтобы начать движение мяча, нам нужна функция обновления. Добавьте следующий код внизу вашего файла JavaScript, чтобы добавить метод update() к Ball()'s prototype:
          
 
-
          Ball.prototype.update = function() {
+
          Ball.prototype.update = function() {
   if ((this.x + this.size) >= width) {
     this.velX = -(this.velX);
   }
@@ -186,12 +186,12 @@ testBall.draw()
          
 
 
            
  
          1. Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода:
-  
            var balls = [];
            
+  
            var balls = [];
            
 
   
            Все программы, которые оживляют вещи, обычно включают цикл анимации, который служит для обновления информации в программе, а затем визуализации результирующего представления для каждого кадра анимации; это основа для большинства игр и других подобных программ.
            
  
            2. 
  
          2. Добавьте ниже эту часть кода:
-  
            function loop() {
+  
            function loop() {
   ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
   ctx.fillRect(0, 0, width, height);
 
@@ -225,7 +225,7 @@ testBall.draw()
            
   
  
            3. 
  
          3. И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию.
-  
            loop();
            
+  
            loop();
            
  
            4. 
 
          
 
@@ -238,7 +238,7 @@ testBall.draw()
          
 
            
  
          1. Прежде всего, добавьте следующее определение метода ниже, где вы определили метод update() (т.е. блок Ball.prototype.update).
 
-  
            Ball.prototype.collisionDetect = function() {
+  
            Ball.prototype.collisionDetect = function() {
   for (var j = 0; j < balls.length; j++) {
     if (!(this === balls[j])) {
       var dx = this.x - balls[j].x;
@@ -262,7 +262,7 @@ testBall.draw()
            
   
  
            2. 
  
          2. Вы также должны вызвать этот метод в каждом кадре анимации. Добавьте следующий код после строки balls[i].update();
-  
            balls[i].collisionDetect();
            
+  
            balls[i].collisionDetect();
            
  
            3. 
  
          3. Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!
            4. 
 
          
-- 
cgit v1.2.3-54-g00ecf