Javascript 拖放循环难度

我正在尝试使用JQuery为物理系学生构建一个基本的拖放游戏，学生可以将一张卡与另一张卡进行匹配

应该有三轮。一旦学生成功地将一组卡片（const=编号）匹配到正确的插槽（const=插槽），将显示下一组卡片

但是，我很难一次只显示一对阵列。
目前这三个数组都将出现，我相信问题出现在下面代码顶部的init函数中

let correctCards = 0;

const numbers2 = ['Proton', 'Neutron', 'Positron', '\u03C0+','\u03C0-', 'K+','K-','\u03C0\u2070'];
const numbers3 =['Gravitational', 'Gravitational1', 'weak', 'weak1', 'EM', 'EM1', 'Strong', 'Strong1'];
const numbers1 = ['Proton', 'Neutron', 'Electron', 'Positron', 'Pion+', 'Kaon+', 'kaon-', 'Pion'];

const slots2= ['uud', 'udd','\u203Eu','u-d', '-ud','-ud', '-du', 'u-u'];
const slots3 = ['affects all particles with mass', 'infinite range', 'affects all particles', 'responsable for beta decay', 'affects all particles with charge', 'infinite range', 'affects hadrons', 'very short range'];
const slots1 = ['p', 'n','e', 'p-','\u03C0+', 'K+','K-','\u03C0\u2070'];

let shuffledNumbers= [];
const numbersDeck = [numbers1, numbers2, numbers3];
const slotDeck = [slots1, slots2, slots3];
let slots =[];
let numbers = [];

$( init );

function init() {
  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );
  //show only one pair of arrays at a time
  for (let j=0; j<numbersDeck.length; j++){
    slots = slotDeck[j];
    numbers = numbersDeck[j];

    shuffledNumbers = shuffleArray(numbers);
    console.log(slots);
    console.log(numbers);
    cardSlotAssign();
    cardAssign();
  }
}

// Reset the game

correctCards = 0;
$('#cardPile').html( '' );


//shuffle the cards so they move for each attempt.
function shuffleArray(array) {
  const newArray = array.slice(0);
  newArray.sort( function() {
    return Math.random() - 0.5;
  });
  return newArray;
}

// Create the card slots
function cardSlotAssign() {
  for ( let i=0; i<slots.length; i++ ) {
    $('<div />', { text: slots[i], 'data-position': i + 1 }).appendTo('#cardSlots')
      .droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }
}


// Create the pile of shuffled cards
function cardAssign(){

  for ( let i=0; i<shuffledNumbers.length; i++ ) {
    $('<div />', { text: shuffledNumbers[i], 'data-position': numbers.indexOf(shuffledNumbers[i]) + 1 }).attr( 'id', 'card'+i ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }
}
//dragging the cards to the right slot.
function handleCardDrop( event, ui ) {

  var slotNumber = $(this).data('position');
  var cardNumber = ui.draggable.data('position');
  console.log(slotNumber, cardNumber);
  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again
  if ( slotNumber === cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  }

  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go
  if ( correctCards === 8 ) {

    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }
}

让校正卡=0；
常数数值2=[‘质子’、‘中子’、‘正电子’、‘u03C0+’、‘u03C0-’、‘K+’、‘K-’、‘u03C0\u2070’]；
常数3=[‘引力’、‘引力1’、‘弱’、‘弱’、‘EM’、‘EM1’、‘强’、‘强1’]；
常数1=[‘质子’、‘中子’、‘电子’、‘正电子’、‘介子+’、‘介子+’、‘介子-’、‘介子’]；
常数slots2=['uud'，'udd'，'u203Eu'，'u-d'，'-ud'，'-ud'，'-du'，'u-u']；
常数slots3=[“影响所有具有质量的粒子”、“无限范围”、“影响所有粒子”、“对β衰变负责”、“影响所有具有电荷的粒子”、“无限范围”、“影响强子”、“极短范围”]；
常数slots1=['p'、'n'、'e'、'p-'、'\u03C0+'、'K+'、'K-'、'\u03C0\u2070']；
设shuffledNumbers=[]；
常量numbersDeck=[numbers1，numbers2，numbers3]；
常量slotDeck=[slots1，slots2，slots3]；
让插槽=[]；
让数字=[]；
美元（初始）；
函数init（）{
//隐藏成功消息
$（'successMessage'）.hide（）；
$（'successMessage'）.css（{
左：‘580px’，
顶部：'250px'，
宽度：0，
身高：0
} );
//一次只显示一对数组
对于（j=0；j）
init（）
中的循环一次全部执行。您应该删除该循环并仅启动第一个数组对。然后在
handleCardDrop
中，当所有卡成功匹配后，启动下一个数组。太棒了！非常感谢您的帮助。