JS/Анимация портала Доктора Стрэнджа не может быть расположена на внешней рамке круга за картами, если только карты пере ⇐ Jquery

[Гость]

Часть, содержащая ротацию карт и код портала:

//звуковой эффект $(документ).ready(функция() { var FlipSound = document.getElementById("flipSound"); $(".card").click(function() { вар карта = $(это); // Проверяем, не переворачивается ли карта, чтобы избежать нескольких переворотов if (!card.hasClass('переворачивание')) { card.addClass('переворачивание'); // Проверяем, обращена ли лицевая сторона к зрителю if (!card.hasClass("перевернутый")) { флипSound.currentTime = 0; // Сбрасываем звук в начало флипSound.play(); СтартАнимация(); console.log("начато") card.addClass("перевернутый"); } еще { стопАнимация(); console.log("остановлено") card.removeClass("перевернутый"); } setTimeout(функция() { card.removeClass('переворачивание'); }, 1000); // Настройте тайм-аут в соответствии с продолжительностью вашей анимации } }); // Предотвратить звук при щелчке сзади $(".card__back").click(function(e) { е.stopPropagation(); }); }); // Эффект пылесоса тела document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); // эффект портала вар p5Instance; функция startAnimation() { const эскиз = (p) => { const createParticleSystem = (местоположение) => { константное происхождение = location.copy(); константные частицы = []; const addParticle = скорость => { const rand = p.random(0, 1); если (ранд { частицы.forEach(частица => { частица.applyForce(сила); }); }; константный запуск = () => { частиц.forEach((частица, индекс) => { частица.переместить(); частица.рисовать(); если (particle.isDead()) { частицы.splice(индекс, 1); } }); }; возвращаться { источник, добавить частицу, бегать, ApplyForce }; }; const createSparkParticle = (locationP, скорость) => { константная частица = createParticle (locationP, скорость); пусть исчезают = 255; константная ничья = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, затухание); const стрелка = скорость.copy().normalize().mult(p.random(2, 4)); const направление = p5.Vector.add(particle.location, стрелка); p.line(particle.location.x, частица.location.y, направление.x, направление.y); }; const move = () => { частица.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); частица.скорость.добавить(частица.acc); частица.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); частица.acc.mult(0); затухание -= 5; }; возвращаться { ... частица, рисовать, двигаться } } const createParticle = (locationP, скорость) => { const acc = p.createVector(0, 0); константное местоположение = locationP.copy(); пусть исчезают = 255; const FadeMinus = p.randomGaussian(15, 2); пусть светлее = 100; пусть ситуация = 62; константная ничья = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(lightther, 60, 100), исчезать); константная стрелка = скорость.copy().mult(2); const направление = p5.Vector.add(местоположение, стрелка); p.line(location.x, location.y, направление.x, направление.y); }; const move = () => { скорость.add(акк); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); акк.мульт(0); постепенное исчезновение - = постепенное исчезновениеМинус; светлее -= 8; положение += 8; }; const applyForce = сила => { Acc.add (сила); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { вернуть истину; } еще { вернуть ложь; } }; возвращаться { рисовать, двигаться, применитьсилу, мертв, скорость, расположение, соотв. }; }; const createMover = () => { const location = p.createVector(p.width/2, p.height/2); const скорость = p.createVector(0, 0); const acc = p.createVector(0, 0); константная масса = 10; пусть угол = 0; пусть angularVelocity = 0; пусть уголАкк = 0; пусть лен = 100; константная частицаSystems = [ createParticleSystem (местоположение), createParticleSystem (местоположение), createParticleSystem (местоположение), createParticleSystem (местоположение), createParticleSystem (местоположение), createParticleSystem (местоположение), createParticleSystem (местоположение), createParticleSystem (местоположение), createParticleSystem (местоположение) ]; const getGotoVector = угол => { const radius = p.map(angleVelocity, 0, 0,3, 0, 55); const goToVector = p.createVector( location.x + радиус * p.cos(угол), location.y + радиус * p.sin(угол) ); вернуть goToVector; }; константная ничья = () => { const goToVector = getGotoVector (угол); частицаSystems.forEach(particleSystem => { частицаSystem.run(); }); }; const renderParticleSystem = () => { частицаSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x — location.x) ); препенкулярный.нормализовать(); prepencular.mult(angleVelocity * 70); частицаSystem.origin.set(goToVector); частицаSystem.addParticle(препенкулярная); const Gravity = p.createVector(0, 0,3); частицаSystem.applyForce(гравитация); }); }; const move = () => { уголАкк = 0,005; angularVelocity = p.constrain(angleVelocity + angularAcc, 0, 0,32); угол += уголСкорость; уголАкк = 0; рендерингСистемы Частиц(); }; возвращаться { рисовать, двигаться }; }; пусть движитель; p.setup = функция() { p.createCanvas(240, 320); п.очистить(); двигатель = createMover(); } p.draw = функция() { п.очистить(); двигатель.переместить(); двигатель.рисовать(); } }; p5Instance = новый p5(эскиз); } // останавливаем анимацию функция стопАнимация() { если (p5Instance) { p5Instance.remove(); p5Instance = ноль; } } Здравствуйте, друзья! У меня есть 6 карт, которые могут перевернуться. Когда одна из карт разворачивается, я хочу, чтобы анимация портала появлялась в самой дальней рамке цветных кругов на обратной стороне карт. Как я могу добиться этого в своем коде?
Что делать с каждой из 6 карточек



[*]основной файл (включая анимацию портала):
https://drive.google.com/file/d/1famaPF ... sp=sharing
[*]Демо-ссылка приложения на портал (работает некорректно):
https://tm-game-cards-portal.netlify.app/
[*]Демо-ссылка на приложение без портала:
https://tm-game-cards-v02.netlify.app/
[*]основной файл (не включая анимацию портала): https://drive.google.com/file/d/1fKABYy ... LZZpa/view