-4
我發現了一個jQuery比賽遊戲教程，我想將可拖動部分更改爲圖片（cat.jpg，dog.png，mouse.jpg），但我不知道該怎麼做。jQuery Match Game
在.js文件中，在'創建一堆洗牌'部分，我想我需要更改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(){
}