Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
71 / 59 / 14
Регистрация: 20.12.2013
Сообщений: 723

Непонятное поведение объектов

12.01.2022, 18:21. Показов 944. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте.
Из инета пытаюсь дополнить задачку. Сталкиваются шары. Глюков полно. Но вот сейчас совершенно стремный глюк в строке 93 кода JS. Если ее закомментировать, то шары летают в заданном количестве. Если оставить, то после шлепания OK по alert (не первого, но одного из первых) вдруг пропадает сразу пачка шаров. По замыслу здесь должен пропасть только один, на который ссылается this. Но почему сразу куча исчезает?

Сделал даже класс BallE без наследования - то же.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
// setup canvas
 
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
 
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
 
// function to generate random number
//----------------------------------------------------------------
function random(min, max) {
  const num = Math.floor(Math.random() * (max - min + 1)) + min;
  return num;
}
//----------------------------------------------------------------
function Ball(x, y, velX, velY, color, size) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.color = color;
  this.size = size;
this.flag = true;
this.ind = 1000;
}
//----------------------------------------------------------------
function BallE(x, y, color, size) {
  Ball.call(this, x, y, 0, 0, color, size);
 
 
};
BallE.prototype = Object.create(Ball.prototype);
Object.defineProperty(BallE.prototype, 'constructor', {
    value: BallE,
    enumerable: false, // so that it does not appear in 'for in' loop
    writable: true });
//----------------------------------------------------------------
Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
}
//----------------------------------------------------------------
BallE.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.arc(this.x, this.y, this.size * 0.5, 0, 2 * Math.PI);
  ctx.fill();
}
//----------------------------------------------------------------
Ball.prototype.update = function() {
  if ((this.x + this.size) >= width) {
    this.velX = -(this.velX);
  }
 
  if ((this.x - this.size) <= 0) {
    this.velX = -(this.velX);
  }
 
  if ((this.y + this.size) >= height) {
    this.velY = -(this.velY);
  }
 
  if ((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }
 
  this.x += this.velX;
  this.y += this.velY;
}
//----------------------------------------------------------------
Ball.prototype.collisionDetect = function() {
  for (let j = 0; j < balls.length; j++) {
    if (this === balls[j]) continue;
 
      let dx = this.x - balls[j].x;
      let dy = this.y - balls[j].y;
      let distance = Math.sqrt(dx * dx + dy * dy);
 
if ((this.ind !== 1000) && (this.ind === balls[j].ind) && (distance > (this.size + balls[j].size) ) )
{this.ind = balls[j].ind = 1000;};
    if (distance > this.size + balls[j].size || (this.flag === false) || (balls[j].flag === false) || ((this.ind !== 1000) && (this.ind === balls[j].ind))) continue;
 
if((balls[j].constructor.name === 'BallE') && (distance < (this.size + balls[j].size))) 
{
 alert(`${distance}   ${this.size}   ${balls[j].size}`);
    this.velX = this.velY = 0;
    this.x = this.y = -100000;
 break;
};
 
this.ind = balls[j].ind = j;
this.flag = balls[j].flag = false;
 
        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
        dx /= distance;
        dy /= distance;
    let dxp = -dy;
    let dyp = dx;
    if(Math.sign(dx * dyp - dxp * dy) < 0){ dxp = -dxp; dyp = -dyp; };
 
    const a = this.velX + balls[j].velX;
    const b = this.velY + balls[j].velY;
    let c;
 
    let vdt = this.velX * dxp + this.velY * dyp;  //Компонента скорости НЕ изменяется по модулю
    let vdb = balls[j].velX * dxp + balls[j].velY * dyp;  //Компонента скорости НЕ изменяется по модулю
    let vt = this.velX * dx + this.velY * dy;  //Компонента скорости изменяется
    let vb = balls[j].velX * dx + balls[j].velY * dy;  //Компонента скорости изменяется
    c = vb - vt;
 
this.velX = this.velY = 0;
balls[j].velX = balls[j].velY = 0;
 
this.velX += vdt * dxp;
this.velY += vdt * dyp;
 
balls[j].velX += vdb * dxp;
balls[j].velY += vdb * dyp;
 
this.velX += 0.5 * (a + c) * dx;
this.velY += 0.5 * (a + c) * dy;
 
balls[j].velX += 0.5 * (a - c) * dx;
balls[j].velY += 0.5 * (a - c) * dy;
 
 
 
 
 
/*
    const distT = Math.sqrt(this.velX * this.velX + this.velY * this.velY);
    const cosT = this.velX/distT;
    const sinT = this.velY/distT;
    const distB = Math.sqrt(balls[j].velX * balls[j].velX + balls[j].velY * balls[j].velY);
    const cosB = balls[j].velX/distB;
    const sinB = balls[j].velY/distB;
 
    let vT, vB;
    const dT = (cosT*sinB-sinT*cosB);
    vT = (a*sinB-b*cosB)/dT;
    const dB = (sinT*cosB-cosT*sinB);
    vB = (a*sinT-b*cosT)/dB;
//alert('${this.velY}ererte${vB}');
alert(vxT);
alert(this.velX);
alert(vyT);
alert(this.velY);
alert(vxB);
alert(balls[j].velX);
alert(vyB);
alert(balls[j].velY);
    this.velX = vT*cosT;
    this.velY = vT*sinT;
    balls[j].velX = vB*cosB;
    balls[j].velY = vB*sinB;
*/
      }
}
//----------------------------------------------------------------
let balls = [];
  let size = random(10,20);
  let bE = new BallE(
    random(0 + size,width - size),
    random(0 + size,height - size),
    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
    size
  );
 
 
while (balls.length < 25) {
  let size = random(10,20);
  let ball = new Ball(
    // ball position always drawn at least one ball width
    // away from the edge of the canvas, to avoid drawing errors
    random(0 + size,width - size),
    random(0 + size,height - size),
    random(-7,7),
    random(-7,7),
    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
    size
  );
 
  balls.push(ball);
}
balls.push(bE);
//----------------------------------------------------------------
function loop() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
  ctx.fillRect(0, 0, width, height);
 
  for (let i = 0; i < balls.length; i++) {
    balls[i].draw();
    balls[i].update();
    balls[i].collisionDetect();
  };
for (let i = 0; i < balls.length; i++) { balls[i].flag = true;};
 
    //bE.draw();
    //bE.update();
 
  requestAnimationFrame(loop);
}
//----------------------------------------------------------------
 
 
loop();
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bouncing balls</title>
    <link rel="stylesheet" href="style.css">
  </head>
 
  <body>
    <h1>bouncing balls</h1>
    <canvas></canvas>
 
    <script src="main.js"></script>
  </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
html, body {
  margin: 0;
}
 
html {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  height: 100%;
}
 
body {
  overflow: hidden;
  height: inherit;
}
 
h1 {
  font-size: 2rem;
  letter-spacing: -1px;
  position: absolute;
  margin: 0;
  top: -4px;
  right: 5px;
 
  color: transparent;
  text-shadow: 0 0 4px white;
}
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
12.01.2022, 18:21
Ответы с готовыми решениями:

Непонятное поведение return
Добрый вечер, господа! Есть некий массив в котором присутствуют строки и числа a =. Задача заключается в переборе массива с помощью...

Непонятное поведение скрипта
Код скачал с интернета. На сайте источник скрипт работает нормально - вставил его в свою страницу - не работает. Код на моей странице: ...

Непонятное поведение AJAX-запроса
Здравствуйте, хочу данные из формы отправить на сервер: &lt;form action=&quot;&quot;&gt; &lt;label for=&quot;address&quot;&gt;&lt;input...

3
 Аватар для Tavashi
1172 / 762 / 194
Регистрация: 21.05.2016
Сообщений: 1,858
12.01.2022, 20:42
Думаю, что дело в collisionDetect(). Проверьте.
0
71 / 59 / 14
Регистрация: 20.12.2013
Сообщений: 723
12.01.2022, 21:19  [ТС]
Цитата Сообщение от Tavashi Посмотреть сообщение
Думаю, что дело в collisionDetect(). Проверьте.
Ну мне тоже так кажется.
Более того, скорее всего с this. Но пока муть какая-то этот this в JS для меня.
0
 Аватар для Tavashi
1172 / 762 / 194
Регистрация: 21.05.2016
Сообщений: 1,858
12.01.2022, 22:02
Лучший ответ Сообщение было отмечено AndrSlav как решение

Решение

В 101, 102 строчках замените на:
JavaScript
1
2
dx /= distance ? distance : 1;
dy /= distance ? distance : 1;
2
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
12.01.2022, 22:02
Помогаю со студенческими работами здесь

Непонятное поведение модального окна
Предполагается, что при щелчке по элементу #VerifyKBM сначала будет выведено модальное окно, а затем уже будет обращение по AJAX к...

Непонятное поведение кода, использующего AJAX
Доброго времени суток! Решил написать элементарный пример использования технологии ajax, но мне выдало очень странный результат. Вот сами...

Непонятное поведение объектов двух моих классов
Кусок из кода. Непонятность заключена в 20 строке, она срабатывает только 1 раз и соответственно 1 раз добавляет объект в список, но в...

Непонятное поведение поведение TIM6 на STM32f4discovery
Вводные данные: SYSCLK=168Мгц; AHB Pressotir=1; APB1 Pressotir=4; TIM6_Pessotir=3; Т.о. частота тактирования на таймере=42Мгц ...

Непонятное поведение ОС
Здрасте! Купил новый комп, а он загружается через раз (чаще через несколько раз), выключается долго, и один раз не вышел из спячки. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru