jQuery卡牌匹配游戏：数字与对应花卉名称匹配问题求助

我看到你遇到的问题了——现在代码里把数字数组和术语数组分开打乱，导致原本应该配对的数字和花卉名称完全错位了。比如你希望1对应Foxglove，但打乱后数字数组的顺序变了，术语还是按原顺序取，自然就对应不上了。下面是具体的修复方案：

问题根源分析 #

• 你单独打乱了numbers数组，但terms数组保持原顺序，然后通过terms[i]和numbers[i]绑定，这直接破坏了数字和花卉的对应关系。
• 数组循环条件错误：i<=5会导致取到数组的第6个元素（数组索引从0开始，你的数组只有5个元素），出现undefined。
• 术语数组里有拼写错误：foglove应该是Foxglove，willow大小写不统一（应该是Willow）。
• 成功条件错误：总共只有5对卡牌，你判断correctCards ==10永远不会触发成功提示。

修复后的完整代码 #

<div id="content"> 
  <div id="cardPile"></div> 
  <div id="cardSlots"></div> 
  <div id="successMessage"> 
    <h2>You did it!</h2> 
    <button onclick="init()">Play Again</button> 
  </div> 
</div> 

<script type="text/javascript">
var correctCards = 0;
$( init );

function init() {
  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( { left: '580px', top: '250px', width: 0, height: 0 } );

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // 创建数字与花卉的配对数组，确保对应关系不被破坏
  var cardPairs = [
    { number: '1', term: 'Foxglove' },
    { number: '2', term: 'Opium poppy' },
    { number: '3', term: 'Sugar pine' },
    { number: '4', term: 'Willow' },
    { number: '5', term: 'Pacific Yew' }
  ];

  // 打乱整个配对数组，保持数字和术语的对应
  cardPairs.sort( function() { return Math.random() - .5 } );

  // 创建可拖拽的卡牌
  for ( var i=0; i<cardPairs.length; i++ ) {
    $('<div>' + cardPairs[i].term + '</div>')
      .data( 'number', cardPairs[i].number )
      .attr( 'id', 'card'+cardPairs[i].number )
      .appendTo( '#cardPile' )
      .draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  }

  // 创建卡牌放置槽（如果你希望槽显示数字而不是英文单词，可以把words数组改成['1','2','3','4','5']）
  var words = [ 'one', 'two', 'three', 'four', 'five' ];
  for ( var i=1; i<=5; i++ ) {
    $('<div>' + words[i-1] + '</div>')
      .data( 'number', i )
      .appendTo( '#cardSlots' )
      .droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  }
}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  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++;
  }

  // 修正成功条件：总共5对卡牌
  if ( correctCards == 5 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }
}
</script>

关键修改点说明 #

1. 使用配对对象数组：把数字和对应的花卉名称放在同一个对象里，这样打乱数组时，每个数字和它对应的术语会一起移动，不会错位。
2. 修正循环条件：用i<cardPairs.length代替i<=5，避免数组越界。
3. 修正拼写和大小写：统一术语的拼写和大小写，确保匹配逻辑准确。
4. 调整成功判断条件：把correctCards ==10改成correctCards ==5，因为总共只有5对卡牌。
5. 可选优化：如果你希望放置槽显示数字（比如1、2、3）而不是英文单词（one、two），只需要把words数组改成['1','2','3','4','5']即可。

这样修改后，每张花卉卡牌都会和对应的数字槽保持正确的匹配关系，打乱后也不会错位啦～

内容的提问来源于stack exchange，提问作者N Morrison