ich möchte auf meiner Homepage ein kleines Memoryspiel einbinden. Ich habe in den Weiten des Netzes auch einen entsprechenden JS-Quellcode gefunden, der ein einfaches Memory-Spiel umsetzt.
Der Code setzt voraus, dass die Bilddateien für die Memorykarten einen fest-definierten Dateinamen haben img1.gif img2.gif img3.gif usw. Da ich aber bei jedem Spiel unterschiedliche Bilder haben möchte, greife ich auf meine Fotodatenbank auf der Homepage zu. In der sind die Dateinamen der Bilder gespeichert, die alle völlig unterschiedlich sind und keiner definierten Syntax folgen.
Das Problem: Das Javascript benutzt nicht die eigentlichen Bilddateinamen, sondern den jeweiligen Index des Bildarrays und baut dann bei Bedarf den Bilddateinamen zusammen. Das klappt natürlich bei meinen Bildern nun nicht. Daher meine Frage an die Spezies hier im Forum, ob den folgenden JS-Code jemand so anpassen kann, dass ich das array mit echten, individuellen Dateinamen befüllen kann und es dann immer noch funktioniert? Das übersteigt nämlich leider meine JS-Kenntnisse und Fähigkeiten.
So sieht der Code aus.
Code:
<HEAD>
<SCRIPT LANGUAGE="JavaScript"> <!-- Original: Brian Gosselin (bgaudiodr@aol.com) --> <!-- Web Site: http://www.bgaudiodr.iwarp.com -->
<!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin var pics = new Array(); for (i = 0; i <= 18; i++) { pics[i] = new Image(); pics[i].src = 'image' + i + '.gif'; } var map=new Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18); var user = new Array(); var temparray = new Array(); var clickarray = new Array(0, 0); var ticker, sec, min, ctr, id, oktoclick, finished; function init() { clearTimeout(id); for (i = 0; i <= 35 ;i++) { user[i] = 0; } ticker = 0; min = 0; sec = 0; ctr = 0; oktoclick = true; finished = 0; document.f.b.value = ""; scramble(); runclk(); for (i = 0; i <= 35; i++) { document.f[('img'+i)].src = "image0.gif"; } } function runclk() { min = Math.floor(ticker/60); sec = (ticker-(min*60))+''; if(sec.length == 1) {sec = "0"+sec}; ticker++; document.f.b.value = min+":"+sec; id = setTimeout('runclk()', 1000); } function scramble() { for (z = 0; z < 5; z++) { for (x = 0; x <= 35; x++) { temparray[0] = Math.floor(Math.random()*36); temparray[1] = map[temparray[0]]; temparray[2] = map[x]; map[x] = temparray[1]; map[temparray[0]] = temparray[2]; } } } function showimage(but) { if (oktoclick) { oktoclick = false; document.f[('img'+but)].src = 'image'+map[but]+'.gif'; if (ctr == 0) { ctr++; clickarray[0] = but; oktoclick = true; } else { clickarray[1] = but; ctr = 0; setTimeout('returntoold()', 600); } } } function returntoold() { if ((clickarray[0] == clickarray[1]) && (!user[clickarray[0]])) { document.f[('img'+clickarray[0])].src = "image0.gif"; oktoclick = true; } else { if (map[clickarray[0]] != map[clickarray[1]]) { if (user[clickarray[0]] == 0) { document.f[('img'+clickarray[0])].src = "image0.gif"; } if (user[clickarray[1]] == 0) { document.f[('img'+clickarray[1])].src = "image0.gif"; } } if (map[clickarray[0]] == map[clickarray[1]]) { if (user[clickarray[0]] == 0&&user[clickarray[1]] == 0) { finished++; } user[clickarray[0]] = 1; user[clickarray[1]] = 1; } if (finished >= 18) { alert('You did it in '+document.f.b.value+' !'); init(); } else { oktoclick = true; } } } // End --> </script> </HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="init()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<center> <h2>Concentration</h2> <form name="f"> <table cellpadding="0" cellspacing="0" border="0"> <script language="javascript"> <!-- Begin for (r = 0; r <= 5; r++) { document.write('<tr>'); for (c = 0; c <= 5; c++) { document.write('<td align="center">'); document.write('<a href="javascript:showimage('+((6*r)+c)+')" onClick="document.f.b.focus()">'); document.write('<img src="image0.gif" name="img'+((6*r)+c)+'" border="0">'); document.write('</a></td>'); } document.write('</tr>'); } // End --> </script> </table> <br><br> <input type="button" value=" " name="b" onClick="init()"> </form> </center>
Wenn ich mich nicht täusche werden an an dieser Stelle Bilder in das Array geladen, sie sollten dann im selben Ordner liegen wie das (Memory)Skript(.html):
Wenn du das Spiel auf der Seite spielen kannst, schau doch mal ob du auf dem Server auch "image0.gif" oder "image1.gif" findest an der Stelle wo das Skript liegt.
Etwas das ich noch nicht gefunden habe ist wie die (gleiche) Rückseite der Bilder angezeigt wird. Das könnte "image0.gif" sein, die Bilder aber von 1-18 nur initalisiert werden.
Ah und du musst den Code noch etwas zurechtschneiden dein body-Tag wird z.B. nicht geschlossen in deiner kopie.
Und bei jedem Spielstart werden andere Bilder verwendet.
Meine Bildnamen dem Array im Javascript zuweisen ist nicht das Problem. Das hab ich hingekriegt, aber das bringt ja nichts, da die JS-Funktion zum aufrufen der Bilder (showimage zum Beispiel) auf den Index des arrays zugreift und über die indexnummer den Dateinamen zusammenbaut. Das funktioniert also nur, wenn die Bilddateien durchnummeriert sind. Sind sie aber bei mir nicht.
Nur nochmal kurz zur Verdeutlichung. Das Spiel läuft an sich auch bei mir. Aber halt nur, wenn die Dateinamen immer die gleichen sind. Sind sie aber halt bei mir nicht.
[Edit]Gerade aufgefallen, die Sache mit dem Indexfehler stimmt nicht, da pics 19 Felder enthält, der bestehende Code verwendet trotzdem aber immer fest, image0.gif. Das müsstest Du dann auch entsprechend anpassen, also die Zeilen mit
Was ich von dem Code halte, sage ich besser nicht. Nur so viel. Ich finde es toll, dass Du Dich von anderen inspirieren läßt. Geh den Code durch, lerne und verstehe ihn, und mach es dann neu und ordentlich(er).
Vielen Dank. Ich habs jetzt so weit lauffähig bekommen. Allerdings steh ich momentan irgendwie auf dem Schlauch, was die Darstellung der Bilder angeht. Diese liegen in unterschiedlichen Abmessungen vor und sollen aber jeweils mindestens das komplette Kartenfeld ausfüllen. Die Kartenfelder selber stelle ich mit Divs dar (100px x 100px). Beim img-Tag würd ich jetzt gerne entweder height oder width mit 100% mitgeben. Je nachdem, was kürzer ist, um so auf alle Fälle ine komplette Füllung des Kartenfeldes zu bewirken. Aber wie bau ich das mit Javascript? Das müsste ja dann irgendwie mit in die Showimage-Funktion, oder? Hat da jemand noch ne Idee?
Keine Idee, weil ich eigentlich unter anderem richtiges Java programmiere und mit Script nicht so viel am Hut habe, aber mal ne Frage zu deinem <img>-Tag. Wieso beendest Du das nicht? Also mir fehlt da eindeutig ein <img .... /> oder <img .. ></img>. Vermutlich wird das deinem Browser egal sein, weil die meist eh versuchen aus jedem bisschen HTML etwas vernünftiges zu machen. Fällt mir nur auf, weil ich eigentlich aus der XML-Welt komme, wo so etwas natürlich ganz böse ist.
Was bekommst Du denn für eine Fehlermeldung (WebDebugging)?
Das IMG-Tag ist ein Standalone-Tag und wird ohne abschließendes Tag verwendet.
Mein Problem ist irgendwie, dass der HTML-Quelltext, der während der Laufzeit durch dsa Javascript zusammengebaut wird, irgendwie den Rückgabewert der Größenfunktion nicht berücksichtigt. Warum auch immer. Vielleicht geht das auch so gar nicht und man kann sich einen HTML-String gar nicht so einfach über JS zusammenbauen. Ich hab keine Ahnung.
Ich würde tippen dass schon, aber für die Details bin ich wirklich der falsche Ansprechpartner. prinzipielle Dinge zu Programmierung und Algotihmen könnte ich Dir erklären, aber für die JavaScript-Details und insbesondere Unterschiede zu Java müsste ich mich erst selber einlesen und einarbeiten, da käme also keine schnelle Antwort von mir.
Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste
Du darfst keine neuen Themen in diesem Forum erstellen. Du darfst keine Antworten zu Themen in diesem Forum erstellen. Du darfst deine Beiträge in diesem Forum nicht ändern. Du darfst deine Beiträge in diesem Forum nicht löschen. Du darfst keine Dateianhänge in diesem Forum erstellen.
FAQ
Suche
Registrieren
Anmelden
