Javascript 无法检测卡片重叠状态的问题

发布于03月20日

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <link rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 
  <title>Game Cards App</title>
  <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png">
  

  
<style>


#main-content {
  display: none;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%);
  animation: shine 4s linear infinite;
  color: white;
  font-family: "Lato";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  text-align: center;
  overflow-x: hidden;
}

.card {
  float: left;
  position: relative;
  width: calc(33.33% - 30px + 9.999px);
  height: 340px;
  margin: 0 30px 30px 0;
  perspective: 1000;
 
}
.card:first-child .card__front {
  background:#5271C2;
}

.card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.card:first-child .card__num {
  text-shadow: 1px 1px rgba(52, 78, 147, 0.8)
}
.card:nth-child(2) .card__front {
  background:#35a541;
}
.card:nth-child(2) .card__num {
  text-shadow: 1px 1px rgba(34, 107, 42, 0.8);
}
.card:nth-child(3) {
  margin-right: 0;
}
.card:nth-child(3) .card__front {
  background: #bdb235;
}
.card:nth-child(3) .card__num {
  text-shadow: 1px 1px rgba(129, 122, 36, 0.8);
}
.card:nth-child(4) .card__front {
  background: #db6623;
}
.card:nth-child(4) .card__num {
  text-shadow: 1px 1px rgba(153, 71, 24, 0.8);
}
.card:nth-child(5) .card__front {
  background: #3e5eb3;
}
.card:nth-child(5) .card__num {
  text-shadow: 1px 1px rgba(42, 64, 122, 0.8);
}
.card:nth-child(6) .card__front {
  background: #aa9e5c;
}
.card:nth-child(6) .card__num {
  text-shadow: 1px 1px rgba(122, 113, 64, 0.8);
}
.card:last-child {
  margin-right: 0;
}
.card__flipper {
  cursor: pointer;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  border: 3.5px solid rgba(255, 215, 0, 0.6); 
  background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); 
}
.card__front, .card__back {
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 340px;
}
.card__front {
  transform: rotateY(0);
  z-index: 2;
  overflow: hidden;
}
.card__back {
  transform: rotateY(180deg) scale(1.1);
  background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934);
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

 
  
}
.card__back span {
  font-weight: bold; 
  color: white; 
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card__name {
  font-size: 32px;
  line-height: 0.9;
  font-weight: 700;
}
.card__name span {
  font-size: 14px;
}
.card__num {
  font-size: 100px;
  margin: 0 8px 0 0;
  font-weight: 700;
}
@media (max-width: 700px) {
  .card__num {
    font-size: 70px;
  }
}
@media (max-width: 700px) {
  .card {
    width: 100%;
    height: 290px;
    margin-right: 0;
    float: none;
  }
  .card .card__front,
  .card .card__back {
    height: 290px;
    overflow: hidden;
  }
}

/* Demo */
main {
  text-align: center;
}
main h1, main p {
  margin: 0 0 12px 0;
}
main h1 {
  margin-top: 12px;
  font-weight: 300;
}

.fa-github {
  color: white; 
  font-size: 50px;
  margin-top: 8px;
}

.tm-container {
  display: flex;
  justify-content: center;
  align-items: center; 

}

.tm-letter {
 
  display:inline-block;
  font-size:30px;
  margin: 0 5px;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(0);
  animation: letter-animation 6s ease-in-out infinite;
}

@keyframes letter-animation {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  10%, 40%, 60%, 90% {
    opacity: 1;
    transform: translateY(-10px);
  }
  20%, 80% {
    opacity: 1;
    transform: translateY(0);
  }
}

#m-letter {
  animation-delay: 1.5s;
}

a {
    position: relative;
    display: inline-block;
    padding: 0px;
}

a::before {
    content: '';
    position: absolute;
    top: 50%; /* Orta konumu */
    left: 50%; /* Orta konumu */
    transform: translate(-50%, -50%); /* Merkezden düzgün bir şekilde ayarlamak için */
    width: 50px;
    height: 45px;
   
    
    border-radius: 50%;
    box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); 
    
    
    filter: blur(4px) brightness(1.5); 
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
  
    z-index: -1;
}

a:hover::before {
    opacity: 1;
  
}


body.hoverEffect {
      background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a);
}

#gameCard { 
    width: 300px;
    height: 450px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 
    0 0 50px 10px #FFD700,  /* Altın sarısı glow */
    0 0 100px 20px #0000FF, /* Mavi glow */
    0 0 150px 30px #000033; /* Koyu mavi shadow */
    background: rgba(0,0,0,0.7);  /* Slightly transparent black to make the ambilight effect visible behind the card */
    color:#FFD700;   /* Altın sarısı text */
    text-align: center;
    border: 3px solid #FFD700; /* Altın sarısı border */
}

#gameCardLink span {
  font-size: 18px;
  margin-right: 5px; 
  font-weight: bold; 
}

#gameCardLink span:last-child {
  font-size: 0.79em; 
  vertical-align: super; 
  opacity: 0.9;
  font-weight: bold; 
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}


#loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:url('data:image/jpeg;base64,/'); 
  background-repeat: no-repeat;
  background-size: cover ;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
 }



.loader {

  border-top: 9px solid #00a2ed;
  border-radius: 80%;
  width: 12vw; 
  height: 12vw;
  animation: spin 2s linear infinite; 
  position: absolute; 
  left: 44%; 
  top: 46%; 
  transform: translate(-50%, -50%) rotate(0deg); 
  }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




</style>
   
</head>





<body>

<div id="loading-animation">
  <div class="loader"></div>
</div>

<div id="main-content">

  <div class="tm-container">
    <div class="tm-letter" id="t-letter">T</div>
    <div class="tm-letter" id="m-letter">M</div>
  </div>


<audio id="flipSound" preload="auto">
  <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav">
</audio>



<main>
   <div id="gameCardLink">
      <span>G</span>
      <span>a</span>
      <span>m</span>
      <span>e</span>
      <span> </span> 
      <span> </span>
      <span>C</span>
      <span> </span>
      <span>a</span>
      <span> </span>
      <span>r</span>
      <span> </span>
      <span>d</span>
      <span> </span>
      <span>s</span>
      <span>®</span> 
   </div>
  <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p>
</main>


<ul>
  <li class="card" >
    <div class="card__flipper">
      <div class="card__front">
        <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman">
        <p class="card__name"><span>Marvel</span><br>Spiderman</p>
        <p class="card__num">1</p>
      </div>
  
      
      <iframe class="frame" 
      width="225"
      height="340"
      src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
      ></iframe>

      
      <div class="card__back">
        <svg height="180" width="180">
        <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35"  />
        <!-- Dış dairenin kenarı (yeşil) -->
         <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
        <span>1.89 Bil. $</span>
      </div>
    </div>
  </li>
 
 
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
         <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman">
         <p class="card__name"><span>DC</span><br>Batman</p>
        <p class="card__num">2</p>
      </div>
      
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>

      
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/>
          <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
        <span>771 Mil. $</span>
      </div>
    </div>
  </li>
  
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3">
        <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p>
        <p class="card__num">3</p>
        </div>
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>
        
     
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/>
         <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
        <span>845.4 Mil. $</span>
      </div>
    </div>
  </li>
   
  
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
       <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam">
        <p class="card__name"><span>DC</span><br>Shazam2</p>
        <p class="card__num">4</p>
        </div>
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>
        
        
     
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/>
         <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
        <span>462.5 Mil. $</span>
      </div>
    </div>
  </li>

  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash">
        <p class="card__name"><span>DC</span><br>Flash</p>
        <p class="card__num">5</p>
        </div>
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>
        
        
     
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/>
          <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
        <span>560.2 Mil. $</span>
      </div>
    </div>
  </li>
 
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2">
        <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p>
        <p class="card__num">6</p>
         </div>
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>
        
      
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/>
          <!-- Dış dairenin kenarı (yeşil) -->
          <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" />
        </svg>
        <span>955.8 Mil. $</span>
      </div>
    </div>
  </li>
</ul>

</div>

</body>


<script>
var Flipper = (function() {
  var card = $('.card');
  var flipper = card.find('.card__flipper');
  var win = $(window);
  
  var flip = function() {
    var thisCard = $(this);
    var thisFlipper = thisCard.find('.card__flipper');
    var offset = thisCard.offset();
    var xc = win.width() / 2;
    var yc = win.height() / 2;
    var docScroll = $(document).scrollTop();
    var cardW = thisCard.outerWidth() / 2;
    var cardH = thisCard.height() / 2;

    var transX = xc - offset.left - cardW;
    var transY = docScroll + yc - offset.top - cardH;
//     if (offset.top > card.height()) transY = docScroll - offset.top + cardH;
    if (win.width() <= 700) transY = 0;
    
    if (card.hasClass('active')) unflip();
        
    thisCard.css({'z-index': '3'}).addClass('active');
    
    thisFlipper.css({
      'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
      '-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
      '-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)'
    }).addClass('active');
    
    
    return false;
  };
  
  var unflip = function(e) {
    card.css({'z-index': '1'}).removeClass('active');
    flipper.css({
      'transform': 'none',
      '-webkit-transform': 'none',
      '-ms-transform': 'none'
    }).removeClass('active');
  };
  
  var bindActions = function() {
    card.on('click', flip);
    win.on('click', unflip);
  }
  
  var init = function() {
    bindActions();
  };
  
  return {
    init: init
  };
  
}());
Flipper.init();
  
</script>



<script>
<!-- HOOVER FOR TRAILER -->

let hoverTimeout;

$('.card').hover(function() {
    const currentCard = $(this); 

    hoverTimeout = setTimeout(() => {
        currentCard.find('.card__front').hide();
        currentCard.find('.iframe').show();
        var src = currentCard.find('.iframe').attr("src");
        currentCard.find('.iframe').attr("src", src);

     
        currentCard.find('.iframe').on('click', function() {
            $(this).requestFullscreen();
        });

    }, 5000); // 5000 milliseconds (5 seconds)
 
}, function() {
    clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds

    $(this).find('.card__front').show();
    $(this).find('.iframe').hide();
    var src = $(this).find('.iframe').attr("src");
    if (src) {
        $(this).find('.iframe').attr("src", src.replace('?autoplay=1', ''));
    }
});

</script>


<script>
var cardFlags = {};

$(document).ready(function() {
  var flipSound = document.getElementById("flipSound");
  
  $(".card__front").click(function() {
    console.log('Kart önüne tıklandı', event.target);
    flipSound.currentTime = 0;
    flipSound.play();
    console.log('dönüş sesi çalındı', event.target);
  });

  
  $(".card").click(function() {
    var card = $(this);
    var cardId = card.find(".card__num").text();
    console.log(cardId);
   
    
   
    if (!card.hasClass('flipping')) {
      card.addClass('flipping');

  
      if (!card.hasClass("flipped")) {
       
        console.log("is card flag true or false", cardId);

        if (!cardFlags[cardId]) {
          startAnimation(div); 
          console.log("started");
          cardFlags[cardId] = true; 
          card.addClass("flipped");
        }
        
        // Adding canvas to back-side 
        var div = document.querySelector('.flipped .card__flipper.active .card__back');
        var canvas = document.getElementsByClassName('p5Canvas')[0];
        if (div && canvas) {
          div.appendChild(canvas);
          canvas.style.position = 'absolute';
        }
      } else {
       
        console.log("stopped");
        card.removeClass("flipped");
        
      }

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

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

</script>


<script>
    // Body's 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(div) {
    // adding canvas to back-side 
    var canvas = document.getElementsByClassName('p5Canvas')[0];
    if (div && canvas) {
        div.appendChild(canvas);
        canvas.style.position = 'absolute';
    }

    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, 80);
                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(230, 320);
            p.clear(); 
            mover = createMover();
        }

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

    p5Instance = new p5(sketch);
}

</script>


<script>
// hiding and showing loading animation
  function hideLoadingAnimation() {
  console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor");
  var loadingAnimation = document.getElementById("loading-animation");
  var mainContent = document.getElementById("main-content");
  loadingAnimation.style.display = "none";
  mainContent.style.display = "block";
}
window.onload = function() {
  console.log("Sayfa tamamen yüklendi");
  hideLoadingAnimation();
};

</script>


</html>

朋友们你好，在图片上的问题，有一个紫色的卡片翻转在中间.上面和下面有两张牌与这张牌重叠.当卡片前后重叠时，我如何确保卡片的底部(正面是半个可见的)不玩悬停(mouse events will not work in this case)的拖车？ css？我试图用非常简单的方法来解决这个问题.

card-partially-visible {
  pointer-events: none;
}

这样的事情有意义吗？如果是这样，你应该如何确定它是否部分可见？有没有现成的功能可以自动检测？

Javascript 无法检测卡片重叠状态的问题

推荐答案

Javascript相关问答推荐

如何在NightWatch.js测试中允许浏览器权限？

有Angular 的material .未应用收件箱中的价值变化

Vega中的模运算符

如何分配类型脚本中具有不同/额外参数的函数类型

使用续集和下拉栏显示模型属性

Google Apps脚本中的discord邀请API响应的日期解析问题

Snowflake JavaScript存储过程返回成功，尽管预期失败

如何在Obsidian dataview中创建进度条

虚拟滚动实现使向下滚动可滚动到末尾

使用js构造一个html<；ath&>元素并不能使其正确呈现

OpenAI转录API错误请求

面对代码中的错误作为前端与后端的集成

传递方法VS泛型对象VS事件特定对象

MUI迷你图：如何将$符号添加到MUI迷你图中的工具提示数据

为什么我的SoupRequest"；被重置为初始值，以及如何修复它？

React数组查找不读取变量

输入数据覆盖JSON文件

Reaction路由v6.4+数据API：重试加载程序而不显示错误

使用重新 Select 和对象理解 Select 器备忘

此上下文在JavaScript中