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

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

12.01.2022, 18:21. Показов 962. Ответов 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
Сообщений: 732
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
Ответ Создать тему
Новые блоги и статьи
Настройки VS Code
Loafer 13.04.2026
{ "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru