javascript/css中的记忆游戏

我刚开始编程，正在尝试制作记忆游戏。首先，我在CSS中创建了5个不同的标志，我想在游戏中使用它们。然而 我被卡住了，不知道如何继续

我知道我需要某种函数，只允许同时“单击”两个标志，然后另一个函数检查这两个标志是否匹配

有什么想法我可以做到这一点，而且对这一点非常陌生

    (function() {
  'use strict';

  var flagTarget1 = document.getElementById('flag1');
  var flagTarget2 = document.getElementById('flag2');

  var i;
  var j;


  //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 swedishFlag = '<div class="ruta"></div>';

  var japanFlag = '<div class="flag japan"><div class="part2"></div></div>';
  //var japanFlag = '<div class="ruta"></div>';

  var litauenFlag = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
  //var litauenFlag = '<div class="ruta"></div>';

  var elfenbenskustenFlag = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
  //var elfenbenskustenFlag = '<div class="ruta"></div>';

  var tysklandFlag = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
  //var tysklandFlag = '<div class="ruta"></div>';

  var swedishFlag2 = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
  //var swedishFlag2 = '<div class="ruta"></div>';

  var japanFlag2 = '<div class="flag japan"><div class="part2"></div></div>';
  //var japanFlag2 = '<div class="ruta"></div>';

  var litauenFlag2 = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
  //var litauenFlag2 = '<div class="ruta"></div>';

  var elfenbenskustenFlag2 = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
  //var elfenbenskustenFlag2 = '<div class="ruta"></div>';

  var tysklandFlag2 = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
  //var tysklandFlag2 = '<div class="ruta"></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];

  //shuffles the flaglist
  flaglist.shuffle();
  class1.shuffle();


  //for (var i = 0; i < flaglist.length; i++) {
  for (var 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>';


    }

  }

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

  //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');
  //console.log('class name boxes ' + boxes[2]);


  // the array to hold clicked flag
  var flagQueue = [];

  function pickFlag(event) { //the event argument gets passed by default
    // event.target signifies the target of the event fired
    flagQueue.push(event.target.firstChild.className); // push the class string to array
    console.log(flagQueue);
    if (flagQueue.length == 2) { // if it has 2 elements,
      if (flagQueue[0] == flagQueue[1]) { // compare them
        console.log('Grattis, du hittade ett matchande par.');
      } else {
        console.log('Inget matchande par. Försök igen');
      }
      // whatever happens, reset the flagQueue array
      flagQueue.length = 0;
    }
  }

  //loop who adds event for boxes
  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:

      }


      //console.log('flaggnr ' + this.id);
      //console.log(temp);
    })
    boxes[i].addEventListener('click', pickFlag);
  }


})();

（函数（）{
"严格使用",；
var flagTarget1=document.getElementById（'flag1'）；
var flagTarget2=document.getElementById（'flag2'）；
var i；
var j；
//可以洗牌数组的函数
Array.prototype.shuffle=函数（）{
var输入=此；
对于（var i=input.length-1；i>=0；i--）{
var randomIndex=Math.floor（Math.random（）*（i+1））；
var itemAtIndex=输入[randomIndex]；
输入[i]=输入[i]；
输入[i]=项目索引；
}
返回输入；
}
var swedishFlag=''；
//var swedishFlag=''；
var japanFlag=“”；
//var japanFlag=“”；
var-litauenFlag=''；
//var-litauenFlag=''；
var elfenbenskustenFlag=''；
//var elfenbenskustenFlag=''；
var tysklandlag=''；
//var tysklandlag=''；
var swedishFlag2=''；
//var swedishFlag2=''；
var japanFlag2=''；
//var japanFlag2=''；
变量litauneFlag2=''；
//变量litauneFlag2=''；
var elfenbenskustenFlag2=''；
//var elfenbenskustenFlag2=''；
var tysklandlag2=''；
//var tysklandlag2=''；
//用类列出
var class1=[‘瑞典’、‘利塔恩’、‘日本’、‘泰斯克兰’、‘埃尔芬肯库斯滕’、‘瑞典’、‘利塔恩’、‘日本’、‘泰斯克兰’、‘埃尔芬肯库斯滕’]
//用旗帜列出
var flaglist=[swedishFlag、japanFlag、litauenFlag、elfenbenskustenFlag、tysklandFlag、swedishFlag2、japanFlag2、litauenFlag2、elfenbenskustenFlag2、tysklandFlag2]；
//洗牌
flaglist.shuffle（）；
类别1.洗牌（）；
//对于（变量i=0；i对于（i=5，j=145；i欢迎来到Stackoverflow

请考虑你的代码国际化。使用由英语单词构成的变量名，以及使用英语中的注释有助于帮助你的人。

我会创建一个数组来保存单击的标志。
向其添加标志后，请检查它现在是否有2个元素。
如果有，请进行比较。如果没有，请等待下一次单击

// the array to hold clicked flag
var flagQueue = [];
function pickFlag(event){ //the event argument gets passed by default
    // event.target signifies the target of the event fired
    flagQueue.push(event.target.className); // push the class string to array
    if(flagQueue.length==2){                // if it has 2 elements,
        if(flagQueue[0]==flagQueue[1]){     // compare them
            alert('Congratulations');
        }
        else {
            alert('Try again');
        }
        // whatever happens, reset the flagQueue array
        flagQueue.length = 0;
    }
}

// Now we select all HTML elements with class flag
var flags = document.querySelectorAll('.flag');
// And we add an eventListener to each of them.
for(var i=0; i<flags.length; i++){
    flags[i].addEventListener('click',pickFlag);
}

//要保存的数组已单击标志
var flagQueue=[]；
函数pickFlag（event）{//默认情况下传递事件参数
//event.target表示触发事件的目标
flagQueue.push（event.target.className）；//将类字符串推送到数组
如果（flagQueue.length==2）{//如果它有2个元素，
如果（flagQueue[0]==flagQueue[1]）{//比较它们
警惕（“祝贺”）；
}
否则{
警报（“重试”）；
}
//无论发生什么情况，请重置flagQueue数组
flagQueue.length=0；
}
}
//现在我们选择所有带有class标志的HTML元素
var flags=document.querySelectorAll（'.flag'）；
//我们为每个事件添加了一个eventListener。
对于（var i=0；ii）如果您还有其他问题，请创建一个新问题并询问不同的问题。我相信，我在这个线程中的回答是彻底的，不需要改进。至于classList.toggle（），请阅读
// create array to keep the html elements
var flagElements = [];
// put country names into an array
var countries = ['usa','japan','sweden','finland'];
// create new elements for each of the country names
for(var i=0;i<countries.length;i++){
    // first create a div element for the flag
    var flag1 = document.createElement('div');
    // set the class to 'flag <country>'
    flag.className = 'flag '+countries[i];
    //push it to the array
    flagElements.push(flag1);
    //then create a second flag, I will just use the same code
    var flag2 = document.createElement('div');
    flag2.className = 'flag '+countries[i];
    flagElements.push(flag2);
}
// Now you have an array holding all of the divs for you.
// All you need to do is shuffle them and append to DOM.
// You can find info about shuffling on stackoverlow, just implement something
myShufflingAlogirthm(flagElements);
// to append the elements just loop over them and append to body
for(var i=0;i<flagElements.length;i++){
    document.body.appendChild(flagElements[i]);
}