bounty还有4天到期。回答此问题可获得+200声望奖励。murat taşçı正在寻找一个来自一个有信誉的来源的答案：在问题的描述中有一个链接，还有一个指向错误的代码工作版本的链接。旗帜和门户的正确显示问题还没有解决，还需要一个演示
包含卡片轮换和门户代码的部分：

</script>

<script>
//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();

  });
});

</script>

<script>
    // 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");
    });
</script>

<script>
// 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 <= .3) {
                    particles.push(createSparkParticle(origin, velocity.copy()));
                } else {
                    particles.push(createParticle(origin, velocity.copy()));
                }
            };
            const applyForce = force => {
                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;
    }
}

</script>

你好朋友，我有6张可以转身的牌。当其中一张牌转过身来时，我希望传送门动画出现在牌背面彩色圆圈的最外一帧。如何在代码中实现这一点？

* 6张卡各做什么 *

*主文件（含门户动画）：

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

*应用与门户的演示链接（无法正常工作）：

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

*应用的demo链接不带portal：

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

*主文件（不含门户动画）：https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view