Question

我发现了一个jQuery匹配游戏教程，我想将可拖动的部分更改为图片（cat.jpg，dog.png，mouse.jpg），但我不知道该怎么做。< / p>

在.js文件中，在＆＃39;中创建一堆洗牌卡＆＃39;部分，我想我需要更改var text = ['cat.jpg', 'dog.png', 'mouse.jpg'];，但我不知道如何将图像放入变量。

另外，在.css文件中，我应该将#cardPile div更改为#cardPile img吗？

以下是代码：JSFiddle

HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <link rel="stylesheet" type="text/css" href="dragcopy.css">

  <script src="dragcopy.js"></script>
</head>

<body>

<div id="gameContent">

 <!-- DRAGGABLES -->
  <div id="cardPile">  
    <div id="card3" class="ui-draggable ui-draggable-handle" style="position: relative; z-index: 2;">
    </div>

    <div id="card2" class="ui-draggable ui-draggable-handle" style="position: relative; z-index: 4;">
    </div>

    <div id="card1" class="ui-draggable ui-draggable-handle" style="position: relative; z-index: 10;">
    </div>
  </div>

  <!-- DROPPABLES -->
  <div id="cardSlots">  
    <div class="ui-droppable">
      CAT
    </div>

    <div class="ui-droppable">
      DOG
    </div>

    <div class="ui-droppable">
      MOUSE
    </div>
  </div>


 <!-- POP-UP WHEN YOU WIN THE GAME - BUTTON TO RESTART GAME -->
<!--  <div id="message" style="display: none; left: 220px; top: 700px; width: 600px; height: 100px; opacity: 0;"></div>
 -->  <div id="successMessage" style="display: none; left: 580px; top: 750px; width: 0px; height: 0px;">
    <span style="font-weight:bold;font-size:2em;">You did it!</span><br>
    <button onclick="gameInit()">Play Again</button>
  </div>

</div>
</body>
</html>

CSS

    p{font-size:1em;}
    .caption{font-size:.8em;
    font-weight:bold;}
    img{border:solid 1px #000000;}
    td{vertical-align:top;}
    #draggable { width: 24px; height: 24px; background: red; }
#helper { width: 24px; height: 24px; background: yellow; }



/* Main content area */

#gameContent {
 margin: 10px;
  font-family: Georgia, serif;
  line-height: 1.1em;
  color: #333;
  margin: 5px 5px;
  text-align: center;
}

#cardPile {
  margin: 0 auto;
  background: #fff;
}


#cardSlots {
  margin: 10px auto 0 auto;
  background: #99cc33;
}


#cardSlots, #cardPile {
  width: 910px;
  height: 300px;
  padding: 12px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}

/* Individual cards and slots */

#cardSlots div, #cardPile div {      /*   change the #cardPile div to img */
  float: left;
  width: 170px;
  height: 80px;
  padding: 1px;
  padding-bottom: 0;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 10px 5px 0 0px;
  background: #fff;
}

#cardSlots div:first-child, #cardPile div:first-child {
  margin-left: 0;
}

#cardSlots div.hovered {
  background: #aaa;
}

#cardSlots div {
  border-style: dashed;
}

#cardPile div {
  background: #666;
  color: #fff;
  font-size: .8em;
  text-shadow: 0 2px 2px #000;
}

#cardPile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

/* Individually coloured cards */

#card1.correct { background: green; }
#card2.correct { background: green; }
#card3.correct { background: green; }



/* "You did it!" message */
#successMessage {
  position: absolute;
  left: 480px;
  top: 500px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #ccc;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

的JavaScript

var correctCards = 0;

$( gameInit );

function gameInit() {

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

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

 var numOfCards=3;

  // Create the pile of shuffled cards
  var numbers = [ 1, 2, 3];
  var text = ['cat.jpg', 
  'dog.png',
  'mouse.jpg'];
 numbers.sort( function() { return Math.random() - .5 } );


  for ( var i=0; i<text.length; i++ ) {
    $('<div>' + text[numbers[i]-1] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true,
      start:hideMessage     
    } );
  }

  // Create the card slots
  var words = [ 'CAT',  'DOG', 'MOUSE'];
  for ( var i=1; i<=words.length; 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' );


 // MAKES THE CHOICE STICK AND CHANGE COLOR IF CORRECT MATCH 
  if ( slotNumber == cardNumber ) {
 if(slotNumber==1){
  } 
  if(slotNumber==2){
  } 
  if(slotNumber==3){
  } 


  animateMessage();
    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 == 3 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '570px',
      width: '300px',
      height: '60px',
      opacity: 1
    } );
  }

}

function hideMessage(){

}
function animateMessage(){

     }

Answer 1

我更改了您的代码，这里是更新的链接JSFiddle

以下是对变化的解释：

我将var text重命名为var img并制作了一系列图片路径（使用了Google的一些随机图片）

var img = [
    "http://www.readersdigest.ca/wp-content/uploads/2011/01/4-ways-cheer-up-depressed-cat.jpg", // cat.jpg,
    "https://www.petinsurance.com/images/dog-bone.png", // dog.png,
    "http://dreamatico.com/data_images/mouse/mouse-8.jpg" // mouse.jpg
];

在您绘制HTML的部分中，我插入了img标记：

$('<div><img src="' + img[numbers[i]-1] + '" /></div>')
    .data('number', numbers[i] )
    .attr( 'id', 'card'+numbers[i] )
    .appendTo( '#cardPile' ).draggable({ ... });

在CSS我刚补充说：

#cardPile img {
    width: 170px;
    height: 80px;
}

jQuery Match Game

1 个答案: