'Matching Cards -Cards don't show correctly

I want to create a matching card game in JavaScript. Firstly,i just want to generate 12 random cards into the body.

When I press Start Game,the container is filled with 12 random images. Doing it multiple times,sometimes I spread those images into the container like this (second picture). Sometimes it works just fine( first picture)

enter image description here

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Matching Cards Game</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Gotu&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1 id="gameTitle">The Card Matching Game</h1>
    <div id="container">
      <img class="card" src="">
      <img class="card" src="">
      <img class="card" src="">
      <img class="card" src="">

      <img class="card" src="">
      <img class="card" src="">
      <img class="card" src="">
      <img class="card" src="">

      <img class="card" src="">
      <img class="card" src="">
      <img class="card" src="">
      <img class="card" src="">

    </div>
    <button id="start">Start Game</button>
    <script type="text/javascript" src="code.js"></script>
  </body>
</html>

CSS

body {
  background-color: #13060d;
  margin: 0;
  font-family: 'Gotu', sans-serif;
}

#container {
  margin-top: 15%;
  max-width: 1000px;
  margin: 20px auto;
}

img {
  width: 17.5%;
  background: purple;
  float: left;
  margin: 0.5% 3% 0.5%;
  border-radius: 10%;
}

h1 {
  color: white;
  margin-bottom: 0;
}

#start {
  border-style: none;
  font-size: 2rem;
}

JavaScript

nrCards = 12;
var card = document.querySelectorAll(".card");
var cards = generateRandomCard(nrCards);
var startBtn = document.querySelector("#start");

function generateRandomCard(num) {
  var arr = [];
  for (var i = 0; i < num; i++) {
    arr.push(randomCard());
  }
}

function randomCard() {
  var result = '';
  var letters = "CDHS";

  var number = Math.floor((Math.random() * 9) + 2);
  var letter = letters[Math.floor(Math.random() * 4)];
  result += "PNG/" + number + letter + ".png";
  return result;
}

startBtn.addEventListener("click", function() {
  for (var i = 0; i < nrCards; i++) {
    card[i].src = randomCard();
    //card[i].src ="PNG/8S.png";
    console.log(card[i]);

  }
  console.log("----------------------");
})

I would appreciate some help.. Thank you!

javascripthtmlcss


Solution 1:[1]

I would suggest that you use grid layout for such implementation:

nrCards = 12;
var card = document.querySelectorAll(".card");
var cards = generateRandomCard(nrCards);
var startBtn = document.querySelector("#start");

function generateRandomCard(num) {
    var arr = [];
    for (var i = 0; i < num; i++) {
        arr.push(randomCard());
    }
}

function randomCard() {
    var result = '';
    var letters = "CDHS";

    var number = Math.floor((Math.random() * 9) + 2);
    var letter = letters[Math.floor(Math.random() * 4)];
    result += "PNG/" + number + letter + ".png";
    return result;

}

startBtn.addEventListener("click", function () {

    for (var i = 0; i < nrCards; i++) {
        card[i].src = randomCard();
        //card[i].src ="PNG/8S.png";
        //console.log(card[i]);

    }
    //console.log("----------------------");
})
body{
    background-color:#13060d;
    margin:0;
    font-family: 'Gotu', sans-serif;
}
#container{
    margin-top: 15%;
    max-width: 1000px;
    margin:20px 50px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}

img{
    width:auto;
    background:purple;
    border-radius: 10%;

}
h1{
    color:white;
    margin-bottom:0;
}
#start{
    border-style: none;
    font-size:2rem;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Matching Cards Game</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Gotu&display=swap" rel="stylesheet">

    </head>

    <body>
       <h1 id="gameTitle">The Card Matching Game</h1>
        <div id="container">
            <img class="card" src="">
            <img class="card" src="">
            <img class="card" src="">
            <img class="card" src="">

            <img class="card" src="">
            <img class="card" src="">
            <img class="card" src="">
            <img class="card" src="">

            <img class="card" src="">
            <img class="card" src="">
            <img class="card" src=""> 
            <img class="card" src="">

        </div>
        <button id="start">Start Game</button>
        <script type="text/javascript" src="code.js"></script>
    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions