Untitled


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Memory</title>
  <style>
  *{
    margin:0 auto;
  }
  #area{
    width: 500px;
  }
  img{
    width:120px;
  }
  h1{
    text-align: center;
    margin-bottom: 10px;
  }
  </style>
</head>
<body>
  <h1>Memory</h1>
  <div id="area">
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
    <img src="img/0.jpg"/>
  </div>
  <script>
  //img:nth-child(4n+1){clear:both;}
  var initImages = document.getElementsByTagName("img");
  var cardsImagesSource = ["img/1.jpg","img/1.jpg","img/2.jpg","img/2.jpg","img/3.jpg","img/3.jpg","img/4.jpg","img/4.jpg",
  "img/5.jpg","img/5.jpg","img/6.jpg","img/6.jpg","img/7.jpg","img/7.jpg","img/8.jpg","img/8.jpg"];
  var shownCount = 0;
  var choices = [];

  function showCard(x) {
    initImages[x].setAttribute("src",cardsImagesSource[x]);
  }

  function hideCard(x) {
    initImages[x].setAttribute("src","img/0.jpg");
  }

  function setAgainImages() {
    for(var i = 0; i < initImages.length; i++) {
      hideCard(i)
    }
  }  //startGame ones

  function shuffleArray(array) {
    if (0 !== array.length) {
      for (var i = array.length - 1; i >= 1; i--) {
        var randomIndex = Math.floor(Math.random() * (i + 1)) //0-ostatniego
        //console.log(randomIndex)
        var temp = array[randomIndex];
        array[randomIndex] = array[i];
        array[i] = temp;
        //console.log(array)
      }
      console.log(array)
    }
  }

  function startGame() {
    setAgainImages();
    shuffleArray(cardsImagesSource);
  }

  function isToShow(x) {
    if(x < 2) {
      return true;
    } else {
      return false;
    }
  }

  function setupEventListener(j) {
    initImages[j].addEventListener("click", function(){
    var index = j;
      if (isToShow(shownCount) == true) {
        showCard(j)
        choices.push(cardsImagesSource[j])
        shownCount += 1;
      }
      if (isToShow(shownCount) == false) {
        setTimeout(function(){
        checkChoice();
        choices = [];
        shownCount = 0;
        }, 2000);
      }
      console.log(choices)
    }, false);
  }  //pojawianie się kart

  function addEventListenerToShowCard() {
    for (var i = 0 ; i < initImages.length; i++) {
      setupEventListener(i);
    }
  }

  function checkChoice() {
      if (choices[0] !== choices[1]) {
        hideCard(); //that's the problemos
        hideCard();
        console.log(choices)
      }
  }

  if (1) {
    startGame();
    addEventListenerToShowCard();

  }
  </script>
  </body>
  </html>