Javascript - Memoryspiel - Anpassungen - Bitte um Hilfe!
Verfasst: 25.01.2012, 19:23
Hallo Leute,
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.
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: Alles auswählen
<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>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
