Jquery - javascript, portal animation cannot disappear when cards are turned back

muratta231
September 19, 2023
194 views
0 votes
2 Answers

</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>

Hello friends, I want the portal animation to start when the cards turn back (which it does) I want the portal animation to disappear when the cards turn to the front, but no stopped message came on the console and the animation did not stop. How can I solve this problem? I am waiting for your helps…

aplication’s demo link:
https://tm-game-cards-v02.netlify.app/

main file:
https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view

Answers

One way to achieve this is by creating a flag variable to keep track of whether the cards are flipped or not. When the cards are flipped back, you start the animation, and when they are flipped to the front, you stop the animation.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Flip Animation</title>
<!-- Include any necessary libraries here, such as jQuery and p5.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"> 
</script>
<!-- Include your CSS styles here -->
<style>
    /* Your CSS styles for cards and animations here */
</style>
</head>
<body>
<audio id="flipSound" src="flip_sound.mp3"></audio>

<!-- Your HTML for the card here -->
<div class="card">Card Content</div>

<script>
    // Add a global variable to track the card flip state
    let cardFlipped = false;
    let p5Instance;

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

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

            if (!card.hasClass('flipping')) {
                card.addClass('flipping');

                if (!card.hasClass("flipped")) {
                    // Start animation and set the cardFlipped variable to 
    true
                    startAnimation();
                    cardFlipped = true;
                } else {
                    // Stop animation and set the cardFlipped variable to 
    false
                    stopAnimation();
                    cardFlipped = false;
                }

                setTimeout(function() {
                    card.removeClass('flipping');
                }, 1000);
            }
        });

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

    // portal effect
    function startAnimation() {
        const sketch = (p) => {
            // Your p5.js animation code here
            // ...
        };

        p5Instance = new p5(sketch);
    }

    // stop animation
    function stopAnimation() {
        if (p5Instance) {
            p5Instance.remove();
            p5Instance = null;
        }
    }
</script>
</body>
</html>

Now, you have a cardFlipped variable that keeps track of the card’s flip state. When the card is flipped back (cardFlipped is true), it starts the animation, and when the card is flipped to the front (cardFlipped is false), it stops the animation.

- MustafaMete
- September 12, 2023 at 11:45 am
- 0 votes
0
```
 `// ...
} else {
    stopAnimation();
    console.log("durduruldu");
    card.removeClass("flipped");
}
// ...


card.on("animationend", function() {
    stopAnimation();
    console.log("durduruldu");
});`
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – javascript, portal animation cannot disappear when cards are turned back

Answers