Hallo!
Wir müssen für die Schule ein sehr simples Memory bauen. Es funktioniert schon soweit, dass über eine Schleife die Kartenrückseite angezeigt wird. Wenn ich ein bestimmtes Bild über toggle dagegen austauschen lasse, funktioniert es auch - also dann kann ich auf jedes der Bilder klicken und sehe dann Bild_12.jpg aus dem Ordner Bilder/. Sobald ich hier aber ein zufälliges Bild aus dem array bilder anzeigen lassen möchte, klappt es nicht mehr... Was mache ich falsch?
Vielen Dank für eure Hilfe!
Mein Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link type="text/css" href="jquery/css/sunny/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.11.custom.min.js"></script>
<title>Memory</title>
<style type="text/css">
#box {
padding: 10px;
height: 640px;
width: 830px;
}
#memory img {
border: 2px outset #009;
height: 113px;
width: 113px;
float: left;
padding: 10px;
}
</style>
<script type="text/javascript">
//Initialisierung
$(document).ready(function(){
var bilder = new Array();
for (var i = 1; i < 13; i++ )
{
bilder[i] = new Image();
bilder[i].src = "Bilder/Bild_"+i+".jpg";
}
shuffle_bilder(bilder);
zeigeBilder(bilder);
dreheBild(bilder);
document.write("Bilder/Bild_"+i+".jpg");
});
function shuffle_bilder(bilder){
for (var i = 1; i < 13; i++ ){
bilder.splice(Math.floor(Math.random() * bilder.length), 1);
}
}
function zeigeBilder(bilder){
for (var i = 1; i < 13; i++ ){
$('#memory').append('<img id="'+i+'" class="imageDrehbar rueckseite" src="Bilder/rueckseite.jpg">');
$('#memory').append('<img id="'+i+'" class="imageDrehbar rueckseite" src="Bilder/rueckseite.jpg">');
}
}
function dreheBild(bilder){
$(".imageDrehbar").toggle(function(){
$(this).attr("src","Bilder/Bild_12.jpg");
//hier müsste das stehen: $(this).attr("src","Bilder/Bild_"+i+".jpg");
},function(){
$(this).attr("src","Bilder/rueckseite.jpg");
}
);
}
</script>
</head>
<body style="background-color:white;color:black;">
<div id="box">
<h1>Das Memory-Spiel</h1>
<div id="memory">
</div>
<div id="button_box">
<form>
<input type="button" value="neu mischen" onClick="location.reload();">
</form>
</div>
</div>
</body>
</html>
Wir müssen für die Schule ein sehr simples Memory bauen. Es funktioniert schon soweit, dass über eine Schleife die Kartenrückseite angezeigt wird. Wenn ich ein bestimmtes Bild über toggle dagegen austauschen lasse, funktioniert es auch - also dann kann ich auf jedes der Bilder klicken und sehe dann Bild_12.jpg aus dem Ordner Bilder/. Sobald ich hier aber ein zufälliges Bild aus dem array bilder anzeigen lassen möchte, klappt es nicht mehr... Was mache ich falsch?
Vielen Dank für eure Hilfe!
Mein Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link type="text/css" href="jquery/css/sunny/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.11.custom.min.js"></script>
<title>Memory</title>
<style type="text/css">
#box {
padding: 10px;
height: 640px;
width: 830px;
}
#memory img {
border: 2px outset #009;
height: 113px;
width: 113px;
float: left;
padding: 10px;
}
</style>
<script type="text/javascript">
//Initialisierung
$(document).ready(function(){
var bilder = new Array();
for (var i = 1; i < 13; i++ )
{
bilder[i] = new Image();
bilder[i].src = "Bilder/Bild_"+i+".jpg";
}
shuffle_bilder(bilder);
zeigeBilder(bilder);
dreheBild(bilder);
document.write("Bilder/Bild_"+i+".jpg");
});
function shuffle_bilder(bilder){
for (var i = 1; i < 13; i++ ){
bilder.splice(Math.floor(Math.random() * bilder.length), 1);
}
}
function zeigeBilder(bilder){
for (var i = 1; i < 13; i++ ){
$('#memory').append('<img id="'+i+'" class="imageDrehbar rueckseite" src="Bilder/rueckseite.jpg">');
$('#memory').append('<img id="'+i+'" class="imageDrehbar rueckseite" src="Bilder/rueckseite.jpg">');
}
}
function dreheBild(bilder){
$(".imageDrehbar").toggle(function(){
$(this).attr("src","Bilder/Bild_12.jpg");
//hier müsste das stehen: $(this).attr("src","Bilder/Bild_"+i+".jpg");
},function(){
$(this).attr("src","Bilder/rueckseite.jpg");
}
);
}
</script>
</head>
<body style="background-color:white;color:black;">
<div id="box">
<h1>Das Memory-Spiel</h1>
<div id="memory">
</div>
<div id="button_box">
<form>
<input type="button" value="neu mischen" onClick="location.reload();">
</form>
</div>
</div>
</body>
</html>
Comment