1

Boa tarde, estou com uma duvida. Eu pretendo que quando cliquemos num botão apareça uma imagem aleatoria de um baralho de 80 cartas. de seguida se clicarmos outra vez nesse mesmo botão, aparece outra carta ao lado da primeira e assim sucessivamente. Tenho estado a procura e não consigo...

<img id="image" width="220" style="box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px; border-radius: 0.5em" src="h"></img>

aqui será onde, supostamente irão aparecer as cartas, e o JS que tenho é:

    images = [{source: "https://i.ibb.co/xC9r03B/0.jpg"},
{source: "https://i.ibb.co/hD5gs5R/1.jpg"},
...
...]

var usedImages = [];

function random(){
   var numberOfImages = images.length;
    var num = getRandomInt(0, numberOfImages);   
    console.log(num);

    if (usedImages.indexOf(num) === -1) {
        document.getElementById("image").src = images[num].source;
        document.getElementById("text").innerHTML = images[num].text;
        usedImages.push(num);
    }
    else {
        if (usedImages.length === numberOfImages) {
            usedImages = [];
        }
        pickImage();
    }
};

function getRandomInt(min, max) {
  min = Math.ceil(0);
  max = Math.floor(images.length - 1);
  return Math.floor(Math.random() * (max - min)) + min; 
}

alguem me pode dar uma ajuda sff? obrigado.

1 Resposta 1

0

Você pode fazer um container para armazenar as imagens lado a lado

<button>Nova imagem</button>

<div class="container"></div>

usando o css e adicionando display flex ou display grid no container você consegue deixar todas as imagens lado a lado

CSS

img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
   display: grid;
  /* Vai criar 3 colunas de mesmo tamanho, ocupando todo tamanho da tela */
  /* grid-template-columns: repeat(3, 1fr); */

  /* Caso queira informa um tamanho para a coluna*/
  grid-template-columns: repeat(3, 250px);
}

button {
  cursor: pointer;
}

E o codigo Javascript para criar novas imagens e adicionar no container

JS:

<script>
    // Quando clicar no botão vai chamar a função de nova imagem
    document.querySelector('button')
      .addEventListener('click', newImage)

    const images = [
      { source: "https://i.ibb.co/xC9r03B/0.jpg" },
      { source: "https://i.ibb.co/hD5gs5R/1.jpg" },
    ]

    function newImage() {
      // Vai gerar um número aleatorio (random) que vai arredondar (floor)
      // E vai fazer uma desestruturação no resultado que vier no array
      const { source } = images[Math.floor(Math.random() * images.length)]

      // criar um novo elemento de imagem
      const img = document.createElement('img')
      // Adicionar uma classe na imagem
      img.classList = 'image'
      img.src = source

      // Selecionar a div de container
      const container = document.querySelector('div.container')
      // Adicionar no container o elemento de imagem
      container.appendChild(img)
    }
  </script>

Caso queria que não repita a imagem você pode adicionar na função newImage

// vai verificar se essa imagem já esta no container, caso estiver vai cancelar a função
      if(imgExists(source)) return

E Adicionar a função de verificação

  function imgExists(source) {
      const imagens = document.querySelectorAll('img.image')

      for(let image of imagens) {
        if(image.src == source) return true 
      }
    }
5
  • Muito obrigado João, diga só uma coisa, esta dando certo, mas se eu quiser somente que apareça 3 cartas lado a lado, como faço??
    – didi
    Commented 7/05/2020 às 13:03
  • Você pode usar um display grid no container lá no css e colocar um grid-template-column: repeat(3, 1fr). Vou editar o post e comentar para você! Commented 7/05/2020 às 13:07
  • Muito obrigado! fico à espera João!
    – didi
    Commented 7/05/2020 às 13:12
  • Já editei, veja se era isso que queria. Caso tenha uma duvida só chamar =D Commented 7/05/2020 às 13:13
  • mano mega obrigado, mandei-lhe email a explicar melhor! abraço
    – didi
    Commented 7/05/2020 às 13:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .