Card face flipping

by Compay

HTML

<html>

  <head>

    <title>Memory Game!</title>
    <link type="text/css" rel="stylesheet" href="jogo.css">

  </head>

  <body>

    <div id="window-browser">

      <div id="white_box">


        <h3>Welcome to the social networks memory game!</h3>



        <div id="button_start">

          <button id="start" class="control"><p>START GAME!</p></button>
          <!-- Can be added a hint button, -->

        </div>

        <div id="game_images" class="game_cards">

          <div class="card" id="card1">
            <div class="front" id="card-1"></div>
            <div class="back">
              <!--<img src="img-1.png" alt="facebook" class="img-game" id="img-1">--></div>

          </div>

          <div class="card" id="card2">
            <div class="front" id="card-2"></div>
            <div class="back">
              <!--<img src="img-2.png" alt="google_plus" class="img-game" id="img-2">--></div>

          </div>

          <div class="card" id="card3">
            <div class="front" id="card-3"></div>
            <div class="back">
              <!--<img src="img-3.png" alt="instagram" class="img-game" id="img-3">--></div>

          </div>

          <div class="card" id="card4">
            <div class="front" id="card-4"></div>
            <div class="back">
              <!--<img src="img-4.png" alt="linkedin" class="img-game" id="img-4">--></div>

          </div>

          <div class="card" id="card5">
            <div class="front" id="card-5"></div>
            <div class="back">
              <!--<img src="img-5.png" alt="skype" class="img-game" id="img-5">--></div>

          </div>

          <div class="card" id="card6">
            <div class="front" id="card-6"></div>
            <div class="back">
              <!--<img src="img-6.png" alt="telegram" class="img-game" id="img-6">--></div>

          </div>

          <div class="card" id="card7">
            <div class="front" id="card-7"></div>
            <div class="back">
      ...

CSS

html {
  background-color: slateblue;
}

#white_box {
  width: 900px;
  height: 800px;
  xposition: relative;
  xtop: auto;
  xleft: 215px;
  background-color: blanchedalmond;
}

h3 {
  font-family: Arial;
  background-color: transparent;
  text-align: center;
  border: none;
  position: relative;
  top: 10px
}

.game_cards {
  width: 640px;
  height: 505px;
  position: relative;
  border-style: solid;
  top: 40px;
  left: 135px;
  align-self: center;
  align-items: center;
  background-color: transparent;
  perspective: 1000px;
}

.game_cards {
  perspective: 1000px;
}

/* flip the pane when hovered */

.game_cards .card.flipped {
  transform: rotateY(180deg);
}

.card,
.front,
.back {
  width: 128px;
  height: 128px;
}

/* flip speed goes here */

.card {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  float: left;
}

/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border: thin solid black;
  border-radius: 10px;
}

/* front pane, placed above back */

.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
  background-color: slateblue;
}

/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  background-color: aqua;
}

#start {
  height: 40px;
  width: 200px;
  align-content: center;
  position: relative;
  top: auto;
  left: 350px;
}

#button_start {
  background-color: transparent;
}

#credits {
  width: 500px;
  background-color: transparent;
  position: relative;
  top: 150px;
  left: 200px;
  text-align: center;
}

JavaScript

// 1º step: initialize the variables and prepare the cards

var first_img, second_img, positions = [],
  i, random_number, ant_number;

// NodeList doesn't have filter like Array has, but we could use one
// so we copy it's prototype
NodeList.prototype.filter = Array.prototype.filter;

//para embaralhar as cartas será utilizado o método random, serão gerados 20 numeros aleatorios de 1 a 20 e armazenados em um array, esse array representa a posição de cada carta.
//To prepare the cards I will utilize the random method, it will be generated 20 random numbers from 1 to 20, this numbers will be stored at an array that represents the position of each card.

//----------------------------------------------------------------------------------------------------------------------------------------------

function initGame() {

  for (i = 0; i <= 19; i++) {

    random_number = Math.floor(Math.random() * 20) + 1;
    positions[i] = random_number;
    verificNumber();

  }

  var imgArray = document.getElementsByClassName('img-game');

  for (i = 0; i <= 19; i++) {

    var j = i + 1;
    /* imgArray[i].src = 'img-' + positions[i] + '.png'; */
    //document.getElementById('img-' + (i+1)).style.src = "img-" + positions[i] + ".png"; Por que deste jeito não funciona??

  }

}


function verificNumber() {

  var j;
  console.log("before")
  if (i > 0) {
    console.log("after")
    for (j = i - 1; j >= 0; j--) {

      if (positions[i] == positions[j]) {

        positions[i] = Math.floor(Math.random() * 20) + 1;
        verificNumber();
      }
    }
  }
}

initGame();

//----------------------------------------------------------------------------------------------------------------------------------------------

//Depois que as cartas são posicionadas em posições aleatórias, é hora de desenvolver o código que controla os clicks sobre as cartas
//After positioning the cards on random positions it's time to develop the code that controls the clicks in the cards.

var...