-4
Ich fand ein jQuery Match Spiel Tutorial, und ich möchte die ziehbaren Teile zu Bildern (cat.jpg, dog.png, mouse.jpg) ändern, aber ich weiß nicht, wie das geht.jQuery Spiel Spiel
In der .js-Datei, in der "den Stapel der gemischten Karten erstellen" Abschnitt, ich denke, ich muss die var text = ['cat.jpg', 'dog.png', 'mouse.jpg']; ändern, aber ich weiß nicht, wie Sie ein Bild in eine Variable setzen.
Auch in der .css-Datei, sollte ich die #cardPile div zu #cardPile img ändern? Hier
ist der Code: 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(){
}