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

[Anonymous]

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

Код: Выделить всё

//sound effect
$(document).ready(function() {
var flipSound = document.getElementById("flipSound");

$(".card").click(function() {
var card = $(this);

// Check if the card is not already flipping to avoid multiple flips
if (!card.hasClass('flipping')) {
card.addClass('flipping');

// Check if the front side is facing the viewer
if (!card.hasClass("flipped")) {
flipSound.currentTime = 0; // Reset the audio to the start
flipSound.play();
startAnimation();
console.log("started")
card.addClass("flipped");
} else {

stopAnimation();
console.log("stopped")
card.removeClass("flipped");
}

setTimeout(function() {
card.removeClass('flipping');
}, 1000); // Adjust the timeout to match your animation duration
}
});

// Prevent sound on back side click
$(".card__back").click(function(e) {

e.stopPropagation();

});
});




// Body hoover effect
document.getElementById("gameCardLink").addEventListener("mouseover", function() {
document.body.classList.add("hoverEffect");
});

document.getElementById("gameCardLink").addEventListener("mouseout", function() {
document.body.classList.remove("hoverEffect");
});



// portal effect
var p5Instance;
function startAnimation() {

const sketch = (p) => {

const createParticleSystem = (location) => {
const origin = location.copy();
const particles = [];
const addParticle = velocity => {
const rand = p.random(0, 1);
if (rand  {
particles.forEach(particle => {
particle.applyForce(force);
});
};
const run = () => {
particles.forEach((particle, index) => {
particle.move();
particle.draw();

if (particle.isDead()) {
particles.splice(index, 1);
}
});
};
return {
origin,
addParticle,
run,
applyForce
};
};

const createSparkParticle = (locationP, velocity) => {
const particle = createParticle(locationP, velocity);
let fade = 255;
const draw = () => {
p.colorMode(p.HSB);
p.stroke(16, 62, 100, fade);
const arrow = velocity.copy().normalize().mult(p.random(2, 4));
const direction = p5.Vector.add(particle.location, arrow);
p.line(particle.location.x, particle.location.y, direction.x, direction.y);
};
const move = () => {
particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4)));
particle.velocity.add(particle.acc);
particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4)));
particle.acc.mult(0);
fade -= 5;
};
return {
...particle,
draw,
move
}
}

const createParticle = (locationP, velocity) => {
const acc = p.createVector(0, 0);
const location = locationP.copy();
let fade = 255;
const fadeMinus = p.randomGaussian(15, 2);
let ligther = 100;
let situate = 62;
const draw = () =>  {
p.colorMode(p.HSB)
p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade);
const arrow = velocity.copy().mult(2);
const direction = p5.Vector.add(location, arrow);
p.line(location.x, location.y, direction.x, direction.y);
};
const move = () => {
velocity.add(acc);
location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1)));
acc.mult(0);
fade -= fadeMinus;
ligther -= 8;
situate += 8;
};
const applyForce = force => {
acc.add(force);
};
const isDead = () => {
if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) {
return true;
} else {
return false;
}
};
return {
draw,
move,
applyForce,
isDead,
velocity,
location,
acc
};
};

const createMover = () => {
const location = p.createVector(p.width / 2, p.height / 2);
const velocity = p.createVector(0, 0);
const acc = p.createVector(0, 0);
const mass = 10;
let angle = 0;
let angleVelocity = 0;
let angleAcc = 0;
let len = 100;
const particleSystems = [
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location),
createParticleSystem(location)
];
const getGotoVector = angle => {
const radius = p.map(angleVelocity, 0, 0.3, 0, 55);
const goToVector = p.createVector(
location.x + radius * p.cos(angle),
location.y + radius * p.sin(angle)
);
return goToVector;
};
const draw = () => {
const goToVector = getGotoVector(angle);
particleSystems.forEach(particleSystem => {
particleSystem.run();
});
};
const renderParticleSystem = () => {
particleSystems.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.normalize();
prepencular.mult(angleVelocity * 70);
particleSystem.origin.set(goToVector);
particleSystem.addParticle(prepencular);
const gravity = p.createVector(0, 0.3);
particleSystem.applyForce(gravity);
});
};
const move = () => {

angleAcc = 0.005;
angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32);
angle += angleVelocity;
angleAcc = 0;
renderParticleSystem();
};
return {
draw,
move
};
};

let mover;

p.setup = function() {
p.createCanvas(240, 320);
p.clear();
mover = createMover();
}

p.draw = function() {
p.clear();
mover.move();
mover.draw();
}
};

p5Instance = new p5(sketch);
}

// stop animation

function stopAnimation() {
if (p5Instance) {
p5Instance.remove();
p5Instance = null;
}
}

Здравствуйте, друзья!
У меня есть 6 карточек, которые могут переворачиваться. Когда одна из карт разворачивается, я хочу, чтобы анимация портала появлялась в самой дальней рамке цветных кругов на обратной стороне карт. Как я могу добиться этого в своем коде?
Что делать с каждой из 6 карточек

• основной файл (включая анимацию портала):

https://drive.google.com/file/d /1famaPF_Rz-CIjbiBCOLIFZH-LWKjlpv_/view?usp=sharing

• демо-ссылка приложения на портал (работает некорректно):

https://tm-game-cards-portal.netlify.app/

< ul>
ссылка на демо-версию приложения без портала:

https://tm-game-cards -v02.netlify.app/

• основной файл (не включая анимацию портала):
  https://drive .google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view

Подробнее здесь: https://stackoverflow.com/questions/770 ... ame-of-the