Javascript como comparar se conjunto de dados de um array contém no outro array javascript

bigbossbr · 27 de março de 2021

Olá pessoal,

Como faço para comparar se conjunto de dados de um array contém no outro array javascript?

Array 1

//Combinações possíveis para acertar a carta
const equals = [
    ['imgCard_0', 'imgCard_6'],
    ['imgCard_1', 'imgCard_7'],
    ['imgCard_2', 'imgCard_8'],
    ['imgCard_3', 'imgCard_9'],
    ['imgCard_4', 'imgCard_10'],
    ['imgCard_5', 'imgCard_11'],
]

Array 2 de nome rotateCards criado dinamicamente conforme o usuário clica na carta

["imgCard_0", "imgCard_9"]

Preciso verificar se as duas cartas clicadas por ele, estão nas possíveis combinações do array 1

tentei fazer com indexOf, mais sempre retorna -1, ou seja, não encontrado.

tentei também assim const equal = !rotateCards.some((val, idx) => val !== equals[idx]), e também sem sucesso até o momento

Abaixo imagem do console.log, nesta tela é possível ver que a combinação foi satisfeita, porém a verificação acima deu false

bigbossbr · 27 de março de 2021

1 hora atrás, bigbossbr disse:
Olá pessoal,

Como faço para comparar se conjunto de dados de um array contém no outro array javascript?

Array 1
//Combinações possíveis para acertar a carta
const equals = [
    ['imgCard_0', 'imgCard_6'],
    ['imgCard_1', 'imgCard_7'],
    ['imgCard_2', 'imgCard_8'],
    ['imgCard_3', 'imgCard_9'],
    ['imgCard_4', 'imgCard_10'],
    ['imgCard_5', 'imgCard_11'],
]
Array 2 de nome rotateCards criado dinamicamente conforme o usuário clica na carta
["imgCard_0", "imgCard_9"]
Preciso verificar se as duas cartas clicadas por ele, estão nas possíveis combinações do array 1

tentei fazer com indexOf, mais sempre retorna -1, ou seja, não encontrado.

tentei também assim const equal = !rotateCards.some((val, idx) => val !== equals[idx]), e também sem sucesso até o momento

Abaixo imagem do console.log, nesta tela é possível ver que a combinação foi satisfeita, porém a verificação acima deu false

Também tentei desta forma sem sucesso

for (i = 0; i < equals.length; i++) {
        if (clickCard.indexOf(equals[i]) >= 0) {
            console.log(equals[i]);
        }
    }

Marcelo Calazans · 28 de março de 2021

@bigbossbr Olá, colega.

Deixa eu ver se consigo dar uma ideia.

Veja se é mais ou menos isso que você está querendo fazer?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<script>
let mat1 = [1, 2, 3];
let mat2 = [2, 3];
let mat3 = [4, 5];

let achou1 = mat1.some( vai => mat2.includes(vai) );
alert(achou1);

let achou2 = mat1.some( oi => mat3.includes(oi) );
alert(achou2);

</script>

</body>
</html>

Abraços colega.

Rui Guilherme · 28 de março de 2021

// você vai receber duas strings, certo?
const calcularResultado = (carta1, carta2) => {
  const combinacoes = [
    ['imgCard_0', 'imgCard_6'],
    ['imgCard_1', 'imgCard_7'],
    ['imgCard_2', 'imgCard_8'],
    ['imgCard_3', 'imgCard_9'],
    ['imgCard_4', 'imgCard_10'],
    ['imgCard_5', 'imgCard_11'],
  ]
  
  let resultado = false
  combinacoes.map((prop) => {
    if ((carta1 === prop[0] || carta1 === prop[1]) && (carta2 === prop[0] || carta2 === prop[1])) {
      resultado = true
    }
  })
  return resultado
}

calcularResultado('imgCard_0', 'imgCard_6') 
// true -> primeira combinação

calcularResultado('imgCard_6', 'imgCard_0') 
// true -> primeira combinação invertida

calcularResultado('imgCard_9', 'imgCard_11') 
// false

calcularResultado('imgCard_11', 'imgCard_9') 
// false

Não sei se essa é a melhor solução para esse problema, mas funcionou aqui

Outra coisa que você pode fazer é atribuir id's iguais... Exemplo:
- A B
1 x x

2 x x

1A + 2B = true e 1B + 2A = true , o resto é falso... Você vai precisar fazer ID's iguais nas cartas 1A/2B e 1B/2A... E adicionar um evento para quando alguém clicar na carta salva a ID, no segundo click é só você checar se as ID's das cartas selecionadas são iguais, se não forem iguais você reseta tudo.

bigbossbr · 28 de março de 2021

@Rui Guilherme Opa Rui, obrigado pela ajuda, fiz algumas adaptações e finalizei o código, caso queira ver em funcionamento esta na url https://jktraderpro.com/memory-match/

Segue o código para quem quiser estuar ou até melhorar. Só ajustar as imagens e sons nas pastas

HMTL

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Memory Match</title>
</head>

<body>
    <audio id="audio" src=""></audio>
    <div class="container">
        <img src="./images/match.webp" id="imgMatchTtile">
        <div class="cards">
            <div class="card" id="0"></div>
            <div class="card" id="1"></div>
            <div class="card" id="2"></div>
            <div class="card" id="3"></div>
            <div class="card" id="4"></div>
            <div class="card" id="5"></div>
            <div class="card" id="6"></div>
            <div class="card" id="7"></div>
            <div class="card" id="8"></div>
            <div class="card" id="9"></div>
            <div class="card" id="10"></div>
            <div class="card" id="11"></div>
        </div>
        <img src="./images/match.webp" id="imgMatch">
    </div>
    
    <div id="modalEndGame">
        <img id="endGame" src="./images/end-game.jpeg" alt="">
        <button id="btnEndGame">JOGAR NOVAMENTE</button>
    </div>
    <script src="./js/script.js"></script>
</body>

</html>

Javascript

//Constantes
const cards = document.querySelector('.cards')
const card = document.querySelectorAll('.card')
const flipCard = document.querySelectorAll('flipCard')
const btnEndGame = document.querySelector('#btnEndGame')

//Para controlar a modal endGame
var modalEndGame = document.querySelector('#modalEndGame')
modalEndGame.style.display = 'none';
var imgMatch = document.querySelector('#imgMatch')

//Arrays com os sons
const songs = [
    './songs/match.wav',
    './songs/flip-card.wav',
    './songs/end-game.wav'
]

const paySong = (key) => {
    var som = document.getElementById("audio");
    som.src = songs[key];
    som.play();
}

//verificar os acerto
var hits = 0;

//Combinações possíveis para acertos
const calculateResult = (cardOne, cardTwo) => {
    const equals = [
        ['imgCard_0', 'imgCard_6'],
        ['imgCard_1', 'imgCard_7'],
        ['imgCard_2', 'imgCard_8'],
        ['imgCard_3', 'imgCard_9'],
        ['imgCard_4', 'imgCard_10'],
        ['imgCard_5', 'imgCard_11'],
    ]

    let result = false
    equals.map((prop) => {
        if ((cardOne === prop[0] || cardOne === prop[1]) && (cardTwo === prop[0] || cardTwo === prop[1])) {
            result = true
        }
    })
    return result
}

//Gerar background e as cartas
const startGame = () => {

    hits = 0;
    rotateCards = [];
    arr = sort(arr);

    for (let i = 0; i < arr.length; i++) {

        card[i].innerHTML = `<div class="flipCard" id="flipCard_${arr[i]}"><img class="imgCard" id="imgCard_${arr[i]}" src="./images/avengers.png"></div>`;
        card[i].style.backgroundImage = "url(images/" + arr[i] + ".jpg)";
        card[i].style.backgroundSize = "cover";
        card[i].style.backgroundPosition = "center";
        card[i].style.backgroundRepeat = "no-repeat";
    }
    modalEndGame.style.display = 'none';
    btnEndGame.addEventListener('click', startGame, false)
}

//Array que verifica as cartas que forma viradas
var rotateCards = [];
var clickCard = [];

//Montando o array das cartas
var arr = []

for (var i = 0; i < card.length; i++) {
    arr.push(card[i].id)
}

//Sortear as cartas com base no array montado anteriormente
const sort = (oldArray) => {

    var newArray = [];

    while (newArray.length != arr.length) {
        var sortCard = Math.floor(Math.random() * oldArray.length)

        if (newArray.indexOf(oldArray[sortCard]) < 0) {
            newArray.push(oldArray[sortCard]);
        }
    }
    return newArray;
}

//Rodar a carta quando for clicado
const rotateCard = (ev) => {

    const verifyClick = ev.target.classList;

    if (verifyClick.contains('flipCard') || verifyClick.contains('imgCard')) {

        const imgCard = ev.target.id;
        const elCard = ev.target
        const child = elCard.children.length > 0 ? elCard.children.item('id') : false;

        if (rotateCards.length < 2) {

            paySong(1)

            if (child != false) {
                if (child.classList.length > 1) {
                    return;
                }
            }

            if (verifyClick.contains("imgCard") || verifyClick.contains("hover")) {
                ev.target.classList.toggle('hover')

            } else if (verifyClick.contains("flipCard")) {
                child.classList.remove('hover')
            }

            rotateCards.push(elCard);
            clickCard.push(imgCard);

            if (clickCard.length == 2) {
                if (calculateResult(clickCard[0], clickCard[1])) {
                    rotateCards[0].parentNode.classList.add('match')
                    rotateCards[1].parentNode.classList.add('match')

                    paySong(0)
                    hitCardCombination();
                    hits++;

                    rotateCards = [];
                    clickCard = [];

                    if (hits === 6) {
                        endGame();
                        paySong(2)
                    }
                }
            }

        } else {

            paySong(1)
            rotateCards[0].classList.toggle('hover')
            rotateCards[1].classList.toggle('hover')

            rotateCards = [];
            clickCard = [];
        }
    }
}
const cardClick = document.addEventListener('click', rotateCard, false)

//Modal para final do jogo
const endGame = () => {
    modalEndGame.style.display = 'flex';
    btnEndGame.addEventListener('click', startGame, false)
}

//Função para mostrar que o usuário acertou um combinação
const hitCardCombination = () => {
    imgMatch.style.zIndex = 1;
    imgMatch.style.top = 45 + "%";
    imgMatch.style.opacity = 0;

    setTimeout(function () {
        imgMatch.style.zIndex = -1;
        imgMatch.style.top = 20 + "%";
        imgMatch.style.opacity = 1;
    }, 1500);
}

startGame();

CSS

body, html {
    margin: 0;
    padding: 0;
    background: #240128;
    text-align: center;
}

.container{  
    width: 970px;
    margin: 0 auto;
}
#imgMatchTtile{
    width: 556px;
    margin-left: auto;
    margin-right: auto;
}
h1{
    font-size: 35px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 900;
    text-align: center;
}
.cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: rgb(86 2 51);
    border: 1px solid #000;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: rgb(182 35 214) 0 0 5px 1px;
}
.card{
    display: flex;
    width: 150px;
    height: 250px;
    border-radius: 15px;
    background: #fff;
    margin: 5px;
    justify-content: center;
    align-items: center;
    background: #fff;
}
.card:hover{
    cursor: pointer;
    box-shadow: rgb(104 120 241 / 80%) 0 0 5px 1px;
}
.imgCard{
    backface-visibility: hidden;
    transition: all 1s;
}

.hover{
    transform: rotateY(-180deg);
}
.card .flipCard, img{
    display: flex;
    width: 150px;
    height: 250px;
    border-radius: 15px;
}

.flipCardHover{
    transform: rotateY(-180deg);
}

#modalEndGame{
    display: none;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
    justify-content: center;
    align-items: center;    
}
#btnEndGame{
    position: absolute;
    top: 70%;
    width: 350px;
    height: 70px;
    background-color: rgb(182 35 214);
    color: #240128;
    font-size: 25px;
    font-weight: 900;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    z-index: 2;
    border-radius: 50px;
}
#endGame{
    width: 65%;
    height: 65%;
    transition-property: top, opacity;
    transition-duration: 2.5s;
    z-index: 1;    
}
.hover, .match{
    border: 2px solid #81abf9;
    background-color: rgba(177, 177, 177, 0.8);
    box-shadow: rgb(104 120 241 / 80%) 0 0 5px 1px;
}

#imgMatch{
    position: absolute;
    top: 20%;
    left: 35%;
    width: 556px;
    transition-property: top, opacity;
    transition-duration: 2.5s;
    z-index: -1;
}