jQuery比赛游戏

我找到了一个jQuery match游戏教程，我想把可拖动的部分改成图片（cat.jpg、dog.png、mouse.jpg），但我不知道怎么做

在.js文件中的“创建一堆洗牌牌”部分，我想我需要更改

var text=['cat.jpg'、'dog.png'、'mouse.jpg']，但我不知道如何将图像放入变量中

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

代码如下：

HTML

JavaScript

var=0；
$（gameInit）；
函数gameInit（）{
//隐藏成功消息
$（'successMessage'）.hide（）；
$（'successMessage'）.css（{
左：‘580px’，
顶部：'750px'，
宽度：0，
身高：0
} );
//重新设置游戏
校正卡=0；
$（'#cardPile'）.html（''）；
$（'#cardSlots'）.html（''）；
var-numocards=3；
//创建一堆洗牌牌
变量数=[1,2,3]；
var text=['cat.jpg'，
“dog.png”，
'mouse.jpg']；
sort（函数（）{return Math.random（）-.5}）；
对于（var i=0；i我已经更改了您的代码，这里是更新的链接

以下是对变化的解释：

我将
var text
重命名为
var img
，并创建了一个图像路径数组（使用了一些来自谷歌的随机图像）

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

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

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

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(){

     }

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

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

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