Question

我正在尝试使用Elated中的示例来拖放Jquery游戏。 http://www.elated.com/res/File/articles/development/javascript/jquery/drag-and-drop-with-jquery-your-essential-guide/card-game.html我已经完成了所有工作，但我也希望随机删除项目。有人可以帮我这个吗？

// Create the card slots
var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];

for ( var i=1; i<=10; i++ ) {
    $('<div>' + words[i-1] + '</div>').data('number', i).appendTo('#cardSlots').droppable({
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
     });
}

以下是所有代码：

<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( '' );

  // Create the pile of shuffled cards
  var numbers = [];
    numbers [ 0 ] = {x:1, y:'red'};
    numbers [ 1 ] = {x:2, y:'orange'};
    numbers [ 2 ] = {x:3, y:'yellow'};
    numbers [ 3 ] = {x:4, y:'green'};
    numbers [ 4 ] = {x:5, y:'sky blue'};
    numbers [ 5 ] = {x:6, y:'indigo'};
    numbers [ 6 ] = {x:7, y:'violet'};
    numbers [ 7 ] = {x:8, y:'blue'};
  numbers.sort( function() { return Math.random() - .5 } );

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

  // Create the card slots
  var words = [];
    words [ 0 ] = {x:1, y:'red'};
    words [ 1 ] = {x:2, y:'orange'};
    words [ 2 ] = {x:3, y:'yellow'};
    words [ 3 ] = {x:4, y:'green'};
    words [ 4 ] = {x:5, y:'sky blue'};
    words [ 5 ] = {x:6, y:'indigo'};
    words [ 6 ] = {x:7, y:'violet'};
    words [ 7 ] = {x:8, y:'blue'};
  for ( var i=1; i<=8; i++ ) {
    $('<div>' + words[i-1].y + '</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 == 10 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }

}

</script>

</head>
<body>

<div class="wideBox">
  <h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
  <h2>A Number Cards Game</h2>
</div>

<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>

Answer 1

编辑此部分

for ( var i=1; i<=8; i++ ) {
    $('<div>' + words[i-1].y + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

到这个

for ( var i=1; i<8; i++ ) {
    $('<div>' + words[i].y + '</div>').data( 'number', words[i] ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

兴高采烈的拖放教程

1 个答案: