记忆游戏,匹配div,翻转div

时间:2016-06-02 12:21:27

标签: javascript html css match flip

我的代码有问题。我试图做一个记忆游戏,但由于我是一个初学者,这对我来说感觉太先进了。

我认为我拥有大部分代码但需要帮助才能让它完全正常工作。我现在的问题是我的#34;匹配"功能不会运行和后退卡(我的情况下的标志)也不会发生。

希望一些新鲜的眼睛可以帮助我!

    (function() {
  'use strict';


  function checkformatches(lista) {
    if (lista.length > 1) {
      console.log("IDlist is bigger than 1");
      removeclick();
      console.log("Made the flags unclickable");
      var three = document.getElementById(lista[1]);
      var threechild = three.children;
      var four = document.getElementById(lista[0]);
      var fourchild = four.children;
      console.log("The children " + threechild[0].className + fourchild[0].className);
      if (threechild[0].className === fourchild[0].className) {
        console.log("The flags matches each other!");
        lista = [];
        lista1 = [];
      } else {
        console.log("The flags don't match each other!");
        waittwo();
        lista = [];
    }
      waitclick();
      console.log(lista);
      console.log("Made the flags clickable again");
    }


  // Wait 2 seconds
  function waittwo() {
    timeoutID = window.setTimeout(turndown, 2000, idlista);
  }

  // wait then clickable
  function waitclick() {
    timeoutID = window.setTimeout(clickable, 2000);
  }

  // clickable
  function turndown() {
    var one = document.getElementById(lista[1]);
    var two = document.getElementById(lista[0]);
    one.innerHTML = "";
    two.innerHTML = "";
    idlista = [];
  }

  function removeclick() {
    for (i = 0; i < flags.length; i++) {
      flags[i].style.pointerEvents = "none";
    }
  }

  function clickable() {
      for (i = 0; i < flags.length; i++) flags[i].style.pointerEvents = "auto";
      }

      //loop that add events on the boxes/rutor
      for (i=0; i < boxes.length; i++) {
      boxes[i].addEventListener('click', function() {
        temp = document.getElementById(this.id);
        console.log(temp);

        switch (this.id) {
            case 'flagga0':
                temp.innerHTML = flaglist[0];
                break;
            case 'flagga1':
                temp.innerHTML = flaglist[1];
                break;
            case 'flagga2':
                temp.innerHTML = flaglist[2];
                break;
            case 'flagga3':
                temp.innerHTML = flaglist[3];
                break;
            case 'flagga4':
                temp.innerHTML = flaglist[4];
                break;
            case 'flagga5':
                temp.innerHTML = flaglist[5];
                break;
            case 'flagga6':
                temp.innerHTML = flaglist[6];
                break;
            case 'flagga7':
                temp.innerHTML = flaglist[7];
                break;
            case 'flagga8':
                temp.innerHTML = flaglist[8];
                break;
            case 'flagga9':
                temp.innerHTML = flaglist[9];
                break;


            default:

        }

  lista++
  console.log(document.getElementsByClassName('japan'));
  console.log("counter" + lista);
  idlista.push(this.id);
  console.log('idlist' + idlista);
  checkformatches(idlista);
})}

  var flagTarget1 = document.getElementById('flag1');
  var flagTarget2 = document.getElementById('flag2');
  var i;
  var j;
  var timeoutID;
  var idlista = [];
  lista = 0;

  //function that can shuffle the array
  Array.prototype.shuffle = function() {
    var input = this;
    for (var i = input.length - 1; i >= 0; i--) {
      var randomIndex = Math.floor(Math.random() * (i + 1));
      var itemAtIndex = input[randomIndex];
      input[randomIndex] = input[i];
      input[i] = itemAtIndex;
    }
    return input;
}

  var swedishFlag = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
  var japanFlag = '<div class="flag japan"><div class="part2"></div></div>';
  var litauenFlag = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
  var elfenbenskustenFlag = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
  var tysklandFlag = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
  var swedishFlag2 = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
  var japanFlag2 = '<div class="flag japan"><div class="part2"></div></div>';
  var litauenFlag2 = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
  var elfenbenskustenFlag2 = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
  var tysklandFlag2 = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
  //list with classes
  var class1 = ['sweden', 'litauen', 'japan', 'tyskland', 'elfenbenskusten', 'sweden', 'litauen', 'japan', 'tyskland', 'elfenbenskusten']
    // List with flags
  var flaglist = [swedishFlag, japanFlag, litauenFlag, elfenbenskustenFlag, tysklandFlag, swedishFlag2, japanFlag2, litauenFlag2, elfenbenskustenFlag2, tysklandFlag2];
    var flags = document.getElementsByClassName('ruta');
  //shuffles the flaglist
  flaglist.shuffle();
  class1.shuffle();

  //for (var i = 0; i < flaglist.length; i++)
  for ( i = 0; i < 10; i++) {
    //document.body.appendChild(flaglist[i]);
    if (i < 5) {
      //flagTarget1.innerHTML += flaglist[i];
      flagTarget1.innerHTML += '<div class="ruta"></div>';
      //console.log('ritar ' + flaglist[i]);
    } else {
      //flagTarget2.innerHTML += flaglist[i];
      flagTarget2.innerHTML += '<div class="ruta"></div>';
    }
  }



  //loop who adds their own ID to every flag-div.
  for (i = 0; i < flags.length; i++) {
    flags[i].setAttribute('id', 'flagga' + (i));
  }

  //loop who changes style.top on the first row of flags och spreads them out
  for (i = 0, j = 145; i < 5; i++, j += 200) {
    var temp = document.getElementById('flagga' + i);
    temp.style.left = j + 'px';
    temp.style.top = "50px";}

  //loop who changes style.top on the second row of flags och spreads them out
  for (i = 5, j = 145; i <= 9; i++, j += 200) {
    var temp = document.getElementById('flagga' + i);
    //console.log(temp);
    temp.style.left = j + 'px';
    temp.style.top = '210px';}

  var boxes = document.getElementsByClassName('ruta');


      var flags = document.querySelectorAll('.ruta');
      for (i=0; i<flags.length; i++) {
        flags[i].innerHTML = "";
        console.log('händer nåt?')
    }

})();

编辑:对代码进行了一些更改,并认为我已经拥有了所有内容,但我错过了冒号(;,&#34;(&#34;,&#34; { &#34;)或类似的东西。

感谢帮助!

0 个答案:

没有答案