如果匹配则删除连续单击的div

I need to create a function that checks for matches and deletes the divs after match is found. When I click on two tiles, I will disable clicking until it processes whether it is a match or not and then if a match if found, the tiles will be deleted, but if it is not then flip cards back over

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style/index.css">
    <script src='js/jquery.js'></script>
    <script src="js/app.js" async defer></script>
  </head>

  <body>
    <header><h1 id='title'>Halloween Match:</h1></header>
    <div class='card_box'>
        <div class='cards g1'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t0'>

          </div>
        </div>
        <div class='cards g1'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t1'>

          </div>
        </div>
        <div class='cards g1'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t2'>

          </div>
        </div>
        <div class='cards g1'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t3'>

          </div>
        </div>
        <div class='cards g2'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t4'>

          </div>
        </div>
        <div class='cards g2'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t5'>

          </div>
        </div>
        <div class='cards g2'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t6'>

          </div>
        </div>
        <div class='cards g2'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t7'>

          </div>
        </div>
        <div class='cards g3'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t8'>

          </div>
        </div>
        <div class='cards g3'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t9'>

          </div>
        </div>
        <div class='cards g3'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t10'>

          </div>
        </div>
        <div class='cards g3'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t11'>

          </div>
        </div>
        <div class='cards g4'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t12'>

          </div>
        </div>
        <div class='cards g4'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t13'>

          </div>
        </div>
        <div class='cards g4'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t14'>

          </div>
        </div>
        <div class='cards g4'>
          <div class='card-face front'>

          </div>
          <div class='card-face back' id='t15'>

          </div>
        </div>
      </div>

  </body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

* {

    background-color: #FF6A00;
    margin: auto;
    padding: 5px;
    font-family: Creepster;
}

# title{

  position: absolute;
  left: 42vw;
  font-size: 40px;
  color: gainsboro;
  text-shadow: 1px 1px black, -1px -1px black;
}

.card_box {
    width: 100px;
    height: 100px;
    display: inline-block;
    perspective: 1000px;
  }

  .cards {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 500ms;
    margin-top: 5px;
    margin-left: 32vw;
  }

  .flipped {
    transform: rotateY(-180deg) translateX(100%);
  }

  .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    backface-visibility: hidden;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
    font-size: 25px;
  }
  .card-face:hover{
    cursor: pointer;
    box-shadow: 2px 2px 20px 5px white,-2px -2px 20px 5px white;
  }
  .front {
    background: url('../imgs/back.png');
    background-size: 100% 100%;
    color: black;
  }

  .back {
    background: black;
    color: tan;
    background-size: 100% 100%;
    transform: rotateY(180deg);
  }
  .g1{
    left: 0px;
    top: 0px;
  }
  .g2{
    left: 150px;
    top: -400px;
  }
  .g3{  
    left: 300px;
    top: -861px;
  }
  .g4{
    left: 450px;
    top: -1379px;
  }

JAVASCRIPT/JQUERY

document.onload = document.addEventListener('contextmenu', event => event.preventDefault());

const SCOUNT = 100000
const cards = document.querySelectorAll('.cards')
const matches = []
const IMGS = {
    back: "./imgs/back.png",
    bat: "./imgs/bat.png",
    blank: "./imgs/blank.png",
    ghost: "./imgs/ghost.png",
    jol: "./imgs/jol.png",
    jack: "./imgs/js.png",
    vamp: "./imgs/vamp.png",
    witch: "./imgs/witch.png",
    wolf: "./imgs/ww.png",
    zomb: "./imgs/zomb.png",
}
const PICS = [
    IMGS.bat,
    IMGS.ghost,
    IMGS.jol,
    IMGS.jack,
    IMGS.vamp,
    IMGS.witch,
    IMGS.wolf,
    IMGS.zomb,
    IMGS.bat,
    IMGS.ghost,
    IMGS.jol,
    IMGS.jack,
    IMGS.vamp,
    IMGS.witch,
    IMGS.wolf,
    IMGS.zomb
]

const TILES = [
    $('#t0'),
    $('#t1'),
    $('#t2'),
    $('#t3'),
    $('#t4'),
    $('#t5'),
    $('#t6'),
    $('#t7'),
    $('#t8'),
    $('#t9'),
    $('#t10'),
    $('#t11'),
    $('#t12'),
    $('#t13'),
    $('#t14'),
    $('#t15')
]
const MATCH = []

let count = 0;
let match = false;
function shuffle(){
    for (let shuf = 0; shuf < SCOUNT; shuf++){
        let x = Math.floor(Math.random()*PICS.length)
        let y = Math.floor(Math.random()*PICS.length)
        let z = PICS[x]
        PICS[x] = PICS[y]
        PICS[y] = z; 
    }

}

cards.forEach((card) => {
    card.classList.toggle('flipped')
    setTimeout(()=>{
        card.classList.toggle('flipped')
    },500)
  card.onclick = () =>{
        card.classList.toggle('flipped')
      } 
})

function implementBacks(){
    for(let i = 0; i < 16; i++){
        TILES[i].css('background',`url(${PICS[i]})`)
        TILES[i].css('background-size','100% 100%')
    }

}
shuffle()
implementBacks()
toggleClick(false)

function toggleClick(isEnabled){
    if (isEnabled){
        document.querySelector('div').style.pointerEvents = 'all'
    }
    else if(!isEnabled){
        document.querySelector('div').style.pointerEvents = 'none'
    }
}

要回答您的问题，您需要执行以下几个步骤：
1.在卡的click事件中添加一个检查，检查在单击之后是否有两张打开的卡isTwoCardFlipped，如果是，则需要调用matchCards函数来检查它们是否相同

cards.forEach((card) => {
   card.classList.toggle('flipped')
   setTimeout(()=>{
       card.classList.toggle('flipped')
   },500)
   card.onclick = () =>{
       card.classList.toggle('flipped')
       const isTwoCardFlipped = document.querySelectorAll('.flipped').length == 2;
       if(isTwoCardFlipped)
          matchCards();
       } 
   })
})

1.添加getBackgroundUrl函数，该函数接收元素的参数并返回其背景图像的链接

function getBackgroundUrl(elem) {
    const style = elem.currentStyle || window.getComputedStyle(elem, false);
    return style.backgroundImage.slice(4, -1).replace(/"/g, "");
 }

matchCards-通过为翻转的两个元素调用getBackgroundUrl来检查两张卡是否相同的函数（具有flipped类），* 如果它们是相同的 * 则删除它们的父（每个卡的最高父是类.cards g1，则它使用.closest()定位与该类最接近的父类并将其删除。* 如果它们不相同 * 则该函数从卡片中移除flipped类并将其翻转回来。

function matchCards() {
    const cardsFilpped = document.querySelectorAll('.flipped');
    if(getBackgroundUrl(cardsFilpped[0]) === getBackgroundUrl(cardsFilpped[1])) {
       cardsFilpped.forEach(elem => elem.closest('.cards g1').remove());
    }
    else {
       cardsFilpped.forEach(elem => elem.classList.toggle('flipped'));
    }
 }

如果匹配则删除连续单击的div

1条答案

相关问题

热门标签

最新问答