多个(但不是所有)卡插槽

Question

尝试重新创建一个游戏，在该游戏中，卡片被分类到卡槽中。我可以使卡'a‘进入第一个卡槽'Even'，但我想让'a’卡也可以进入第二个‘Even’卡槽。同样，我希望卡'b‘能够进入任何一个’偶数‘插槽。同样的卡片'c‘和'd’代表‘奇数’插槽，'e‘和'f’代表‘偶数’和‘奇数’插槽。有什么想法吗？

// Create the pile of shuffled cards
    var equations = [];
    equations [ 0 ] = {x:1, y:'a'};
    equations [ 1 ] = {x:2, y:'b'};
    equations [ 2 ] = {x:3, y:'c'};
    equations [ 3 ] = {x:4, y:'d'};
    equations [ 4 ] = {x:5, y:'e'};
    equations [ 5 ] = {x:6, y:'f'};

  equations.sort( function() { return Math.random() - .4 } );

  for ( var i=0; i<6; i++ ) {
    $('<div>' + equations[i].y + '</div>').data( 'number', equations[i].x ).attr( 'id', 'card'+equations[i].x ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }

  // Create the card slots
  var words = [ 'Even', 'Even', 'Odd)', 'Odd', 'Even + Odd', 'Even + Odd' ];
  for ( var i=1; i<=6; 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 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 == 6) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '430px',
      top: '150px',
      width: '400px',
      height: '180px',
      opacity: 1
    } );
  }

}
});

Answer 1

现在，您在卡片和插槽之间有一对一的关系，但听起来您想要一对多的关系。

因此，您需要做的第一件事是通过添加第三个值来定义每个方程的正确答案。

equations [ 0 ] = {x:1, y:'a', correct: 'Even'};

(如果您想要多个正确答案，可以将其设置为数组。)

接下来，您需要将此答案添加到卡的数据中。

.data( 'correct', equations[i].correct )

最后，在处理drop时检查答案

var slotAnswer = $(this).text();
var cardAnswer = ui.draggable.data( 'correct' );
if ( slotAnswer == cardAnswer) {

将槽答案存储在数据中可能更好，而不仅仅是文本。

此外，您在Odd)的插槽名称中有一个拼写错误