0 / 0 / 1
Регистрация: 18.06.2018
Сообщений: 10

Отталкивание одного объекта другим

09.07.2018, 15:32. Показов 2170. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день. Помогите пожалуйста.

Есть один объект (круг) который движется сверху вниз. При достижении края другого объекта он должен подвинуть его в сторону и встать на его место.

Нужно хотя бы понять як он отталкивает другой круг. Например, если бы просто толкал вперед и становился на его место. На этом анимация заканчивается.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
09.07.2018, 15:32
Ответы с готовыми решениями:

Замена одного события другим
Прошу прощения за нелепый заголовок темы: просто не знаю, как сформулировать. Итак, есть поле ввода input, содержимое которого по...

Перепись одного блока текста другим
В блоке с id="words" выберите текст hello world и добавьте его в блок с id="insert" в <span> вместо строки "abracadabra" вот...

Замена одного класса другим по нажатию на кнопку
Всем привет. Я новичок в JS, нужна помощь знающих. Собственно задача такая - нужно чтобы при нажатии на одну из кнопок, добавлялся ее...

1
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
09.07.2018, 18:36
vladtarn, лень расписывать всё заново, так как подобный ответ уже давал в этой теме => ТЫК
Просто изменю немного код под Вашу задачу - https://codepen.io/qwerty_wasd/pen/yqBpaG
HTML5
1
2
3
4
5
<div class="wrap-field">
  <div class="circle-one"></div>
  <div class="circle-two"></div>
</div>
<button class="bt-anim-start"> ЖМИ</button>
CSS
1
2
3
4
.wrap-field{position:relative;height:600px;border:2px solid #000}
.circle-one,.circle-two{position:absolute;left:20px;height:100px;width:100px;background:red;border-radius:50%;border:1px solid #000}
.circle-one{top:0}
.circle-two{top:400px}
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
if (!window.requestAnimationFrame){
  window.requestAnimationFrame = (function(){
    return window.webkitRequestAnimationFrame||
      window.mozRequestAnimationFrame||
      window.oRequestAnimationFrame||
      window.msRequestAnimationFrame||
      function(callback,element){window.setTimeout(callback, 1000 / 60)}
  })()}
let circle1=document.querySelector('.circle-one'),
    circle2=document.querySelector('.circle-two'),
    objCircle1={  
      x:circle1.offsetLeft,
      y:circle1.offsetTop,
      width:circle1.offsetWidth,
      height:circle1.offsetHeight
    },
    objCircle2={
      x:circle2.offsetLeft,
      y:circle2.offsetTop,
      width:circle2.offsetWidth,
      height:circle2.offsetHeight
    },
    collision=(obj1,obj2)=>((obj1.x + obj1.width >= obj2.x)&&(obj1.x <= obj2.x + obj2.width))&&((obj1.y + obj1.height >= obj2.y) && (obj1.y <= obj2.y + obj2.height));
function animate(){
  document.querySelector('.bt-anim-start').removeEventListener('click',animate);
  let flag=collision(objCircle1,objCircle2);
  if (flag!=true&&(objCircle1.y<objCircle2.y)) {
    objCircle1.y++;
    circle1.style.top=`${objCircle1.y}px`;
  } else {
    objCircle2.x+=(objCircle1.y<objCircle2.y)?2:0;
    circle2.style.left=(objCircle1.y<objCircle2.y)?`${objCircle2.x}px`:cancelAnimationFrame(fAnimCircle);
  }
  let fAnimCircle=requestAnimationFrame(animate);
}
document.querySelector('.bt-anim-start').addEventListener('click',animate);
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
09.07.2018, 18:36
Помогаю со студенческими работами здесь

Заменить пиксель одного цвета другим цветом
Есть задумка, есть изображение на белом фоне какая то фигура красного цвета, надо определенное количество пикселей (переменное число)...

Замена одного текста другим: в какой-то момент текст перестает меняться
$('.carousel-block').click(function(){ $('#phone').text(''); var id = $(this).attr(&quot;id&quot;); var phone = $(&quot;#phone&quot;).text(); ...

Как сделать так, что при совпадении одного объекта с другим происходило удаление одного из них
Подскажите, как сделать так, что при совпадении одного объекта с другим происходило удаление одного из них. Вкратце. Есть несколько...

Как добавить перекрытие одного объекта другим при вращении?
Доброго времени суток, столкнулся с такой проблемой, есть 1 объект (квадрат), к нему программно, я добавляю загруженный Bitmap. Все бы...

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


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

Новые блоги и статьи
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка SDL3 из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru