TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Ahoj, jsem naprostej amatér v jQuery. Snažím se učit na tvorbě pexesa, chtěl bych se zeptat jestli je v následujícím kódu možnost aby dvojici tvořili dva rozdílné obrázky, tudíž obrázky s podobným názvem. Například autobus.png a autobusA.png.
Děkuji za odpovědi
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>JQuery Memory Game</title>
<script type="text/javascript">
var boxopened = "";
var imgopened = "";
var count = 0;
var found = 0;
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
function shuffle() {
var children = $("#boxcard").children();
var child = $("#boxcard div:first-child");
var array_img = new Array();
for (i=0; i<children.length; i++) {
array_img[i] = $("#"+child.attr("id")+" img").attr("src");
child = child.next();
}
var child = $("#boxcard div:first-child");
for (z=0; z<children.length; z++) {
randIndex = randomFromTo(0, array_img.length - 1);
// set new image
$("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
array_img.splice(randIndex, 1);
child = child.next();
}
}
function resetGame() {
shuffle();
$("img").hide();
$("img").removeClass("opacity");
count = 0;
$("#msg").remove();
$("#count").html("" + count);
boxopened = "";
imgopened = "";
found = 0;
return false;
}
$(document).ready(function() {
$("img").hide();
$("#boxcard div").click(openCard);
shuffle();
function openCard() {
id = $(this).attr("id");
if ($("#"+id+" img").is(":hidden")) {
$("#boxcard div").unbind("click", openCard);
$("#"+id+" img").slideDown('fast');
if (imgopened == "") {
boxopened = id;
imgopened = $("#"+id+" img").attr("src");
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 300);
} else {
currentopened = $("#"+id+" img").attr("src");
if (imgopened != currentopened) {
// close again
setTimeout(function() {
$("#"+id+" img").slideUp('fast');
$("#"+boxopened+" img").slideUp('fast');
boxopened = "";
imgopened = "";
}, 400);
} else {
// found
$("#"+id+" img").addClass("opacity");
$("#"+boxopened+" img").addClass("opacity");
found++;
boxopened = "";
imgopened = "";
}
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 400);
}
count++;
$("#count").html("" + count);
if (found == 10) {
msg = '<span id="msg">Congrats ! You Found All Sushi With </span>';
$("span.link").prepend(msg);
}
}
}
});
</script>
<style type="text/css">
* {
font-family: Arial, "Free Sans";
}
#boxcard {
margin: 0 auto;
width: 1200px;
z-index: 1;
}
#boxcard div {
float: left;
width: 150px;
height: 150px;
background-image: url("ZadniStrana.png");
background-size: 160px 160px;
background-repeat: no-repeat;
margin: 5px;
padding: 5px;
border: 1px solid #999;
cursor: pointer;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
z-index: 2;
}
#boxcard div img {
border: none;
z-index: 3;
}
.opacity {
opacity: .6;
filter: alpha(opacity=60);
}
#boxbutton {
text-align: center;
padding: 20px;
}
.link {
font-size: 18px;
color: #ffffff;
text-decoration: none;
background: #0066cc;
padding: 5px 10px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.link:hover {
background: #999;
}
</style>
</head>
<body>
<div id="boxbutton">
<span class="link">
<span id="count">0</span>
Click
</span>
<a rel="nofollow" href="javascript:" class="link" onclick="resetGame();">Reset</a>
</div>
<div id="boxcard">
<div id="card1"><img src="img/autobus.png"/></div>
<div id="card2"><img src="img/02.jpg" /></div>
<div id="card3"><img src="img/03.jpg" /></div>
<div id="card4"><img src="img/04.jpg" /></div>
<div id="card5"><img src="img/05.jpg"/></div>
<div id="card6"><img src="img/06.jpg"/></div>
<div id="card7"><img src="img/07.jpg" /></div>
<div id="card8"><img src="img/08.jpg" /></div>
<div id="card9"><img src="img/09.jpg" /></div>
<div id="card10"><img src="img/10.jpg"/></div>
<div id="card11"><img src="img/autobusA.png"/></div>
<div id="card12"><img src="img/02.jpg"/></div>
<div id="card13"><img src="img/03.jpg"/></div>
<div id="card14"><img src="img/04.jpg"/></div>
<div id="card15"><img src="img/05.jpg"/></div>
<div id="card16"><img src="img/06.jpg"/></div>
<div id="card17"><img src="img/07.jpg"/></div>
<div id="card18"><img src="img/08.jpg"/></div>
<div id="card19"><img src="img/09.jpg"/></div>
<div id="card20"><img src="img/10.jpg"/></div>
</div>
</body>
</html>
