Hallo,
ich möchte ein einfaches Vokabel-Memory erstellen. Jeweils eine englische und eine deutsche Vokabel gehören zusammen. Ich habe meine Quelltext auch soweit fertig (bis auf Kleinigkeiten wie Umlaute etc.) Nur leider weiß ich nicht, wie ich meinem Programm klar mache, dass die Werte der einzelnen Karten (Elemente) für ein Paar nicht gleich sein müssen. Ich habe öfter Hashmap als Lösung gefunden, weiß aber nicht so recht, wie und wo ich diese einsetzen muss.
Bin über jeden Tipp dankbar! Und auch, wenn ihr mich dafür wahrscheinlich hasst, aber bitte nicht zu schwer erklären, bin kein Informatiker sondern einfacher Medienstudent ;)
Vielen dank im Voraus
Hier mein quelltext:
ich möchte ein einfaches Vokabel-Memory erstellen. Jeweils eine englische und eine deutsche Vokabel gehören zusammen. Ich habe meine Quelltext auch soweit fertig (bis auf Kleinigkeiten wie Umlaute etc.) Nur leider weiß ich nicht, wie ich meinem Programm klar mache, dass die Werte der einzelnen Karten (Elemente) für ein Paar nicht gleich sein müssen. Ich habe öfter Hashmap als Lösung gefunden, weiß aber nicht so recht, wie und wo ich diese einsetzen muss.
Bin über jeden Tipp dankbar! Und auch, wenn ihr mich dafür wahrscheinlich hasst, aber bitte nicht zu schwer erklären, bin kein Informatiker sondern einfacher Medienstudent ;)
Vielen dank im Voraus
Hier mein quelltext:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
div#memory_board{
background:#CCC;
border:#999 1px solid;
width:800px;
height:800px;
padding:24px;
margin:0px auto;
}
div#memory_board > div{
background: url(tile_bg.jpg) no-repeat;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:20px;
cursor:pointer;
text-align:middle;
}
</style>
<script>
var memory_array = ['traffic','traffic','units','Einheiten','query','Anfrage/Abfrage','request','Zugriff','compile','übersetzen','enable','aktivieren','random','zufällig','result','Ergebnis','drive','Laufwerk','amount','Betrag','alter','verändern','equal','gleich','valid','gültig','value','Wert','array','Anordnung/Feld','successor','Nachfolger','carrier','Träger','assign','zuweisen'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[I];
this[I] = temp;
}
}[/I][/I]
function newBoard(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array+'\')"></div>';
}
document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "" && memory_values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = val;
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
// Check to see if the whole board is cleared
if(tiles_flipped == memory_array.length){
alert("Super! Du hast das Memory gelöst! %0A%0ANeues Spiel?");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
} else {
function flip2Back(){
// Flip the 2 tiles back over
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
tile_2.innerHTML = "";
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
</script>
</head>
<body>
<div id="memory_board"></div>
<script>newBoard();</script>
</body>
</html>
Zuletzt bearbeitet von einem Moderator:
