• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Scriptfehler Java Script für Webseite

M

mhoer

New member
Hallo,

bin neu hier und hoffe das ich im richtigen Forum poste. Habe ein Problem mit meine JS. Ich habe das Script aus dem Internet (js-games.de) und möchte dieses sogenannte "Schiebepuzzle" in meine Webseite einfügen. Dabei sollen 3x3 Bilder so hin- und hergeschoben werden bis das Bild passt. ich habe es bereits von ursprünglich 4x4 (16) Bildteile auf 3x3 (9) Bildteile reduziert. Ich hoffe ihr könnt mir helfen. Danke, Philipp

HTML: 
<head>
<STYLE type="text/css"> div { width:100px; height:100px; } </STYLE>
<SCRIPT type="text/javascript">

var Spielfeld = new Array();
var i,j;
var O,L;
var blah,Funktion;
var Zaehler;
var fertig = 1;
var Feld = [3,3];
var gewonnen;
var Bilder = new Array();

for (i = 0; i < 5; i++)
{ 
if ((i == 3) || (i == 4)) blah = '.gif'; 
else blah = '.jpg'; Bilder[i] = new Array(); 
for (Zaehler = 0; Zaehler < 10; Zaehler++)
{ 
Bilder[i][Zaehler] = new Image;
Bilder[i][Zaehler].src = '' + i + '/' + (Zaehler + 1) + blah;
}
}

function mischen() 
{ 
var dasselbe;
for (i = 0; i < 3; i++) 
{ 
for (j = 0; j < 3; j++) 
{ 
if (Spielfeld[i][j] == 'T08') { Feld[0] = i; Feld[1] = j; 
} 
}
}

for (Zaehler = 0; Zaehler < 30; Zaehler++)
{
blah = Math.random(); if ((dasselbe != 1) && (blah < 1/4) && (Feld[0] < 3)) 
{ 
Spielfeld[(Feld[0])][(Feld[1])] = Spielfeld[(Feld[0] + 1)][(Feld[1])]; 
Spielfeld[(Feld[0] + 1)][(Feld[1])] = 'T08'; Feld[0]++; dasselbe = 0; 
} 
else if ((dasselbe != 0) && (blah < 1/2) && (Feld[0] > 0)) 
{ 
Spielfeld[(Feld[0])][(Feld[1])] = Spielfeld[(Feld[0] - 1)][(Feld[1])]; 
Spielfeld[(Feld[0] - 1)][(Feld[1])] = 'T08'; Feld[0]--; dasselbe = 1; 
} 
else if ((dasselbe != 3) && (blah < 3/4) && (Feld[1] < 3)) 
{ 
Spielfeld[(Feld[0])][(Feld[1])] = Spielfeld[(Feld[0])][(Feld[1] + 1)]; 
Spielfeld[(Feld[0])][(Feld[1] + 1)] = 'T08'; Feld[1]++; dasselbe = 2; 
} 
else if ((dasselbe != 2) && (Feld[1] > 0)) 
{ 
Spielfeld[(Feld[0])][(Feld[1])] = Spielfeld[(Feld[0])][(Feld[1] - 1)]; 
Spielfeld[(Feld[0])][(Feld[1] - 1)] = 'T08'; 
Feld[1]--; dasselbe = 3; 
} 
else continue; 
}

for (i = 0; i <3; i++) { for (j = 0; j < 3; j++)
{ 
window.document.getElementById(Spielfeld[i][j]).style.top = eval(i * 100) + 'px'; 
window.document.getElementById(Spielfeld[i][j]).style.left = eval(j * 100) + 'px'; 
} 
} document.getElementById('T09').style.visibility = 'hidden'; 
}

function ChangeTheme(Theme) 
{ 
for (Zaehler = 0; Zaehler < 10; Zaehler++) 
{ 
window.document.images[Zaehler].src = Bilder[Theme][Zaehler].src; 
} 
}

function init() { for (i = 0; i < 3; i++) { Spielfeld[i] = new Array(); 
for (j = 0; j < 3; j++) { Spielfeld[i][j] = 'T' + i.toString() + j.toString(); 
} 
} mischen(); 
}

function horizontal(ID,Richtung) 
{ 
if (Zaehler < 10) { if (Richtung == 'l') document.getElementById(ID).style.left = parseInt(document.getElementById(ID).style.left) - 10 + 'px'; 
else document.getElementById(ID).style.left = parseInt(document.getElementById(ID).style.left) + 10 + 'px'; Zaehler++;

Funktion = "horizontal('" + ID + "','" + Richtung +"')"; blah = setTimeout(Funktion,40); } else fertig = 1; 
}
function vertikal(ID,Richtung) { if (Zaehler < 10) 
{ 
if (Richtung == 'u') document.getElementById(ID).style.top = parseInt(document.getElementById(ID).style.top) - 10 + 'px'; 
else document.getElementById(ID).style.top = parseInt(document.getElementById(ID).style.top) + 10 + 'px'; Zaehler++; 
Funktion = "vertikal('" + ID + "','" + Richtung +"')"; 
blah = setTimeout(Funktion,40); } else fertig = 1; 
}

function move(ID)
{
O = parseInt(document.getElementById(ID).style.top) / 100;
L = parseInt(document.getElementById(ID).style.left) / 100;
Zaehler = 0;
if ((O < 3) && (Spielfeld[O+1][L] == 'T08'))
{
vertikal(ID,'d');
Spielfeld[O+1][L] = Spielfeld[O][L];
}
else if ((O > 0) && (Spielfeld[O-1][L] == 'T08'))
{
vertikal(ID,'u');
Spielfeld[O-1][L] = Spielfeld[O][L];
}
else if ((L < 3) && (Spielfeld[O][L+1] == 'T08'))
{
horizontal(ID,'r');
Spielfeld[O][L+1] = Spielfeld[O][L];
}
else if ((L > 0) && (Spielfeld[O][L-1] == 'T08'))
{
horizontal(ID,'l');
Spielfeld[O][L-1] = Spielfeld[O][L];
}
else
{
fertig = 1;
return true;
}
gewonnen = 0;
for (i = 0; i < 3; i++)
for (j = 0; j < 3; j++)
if (Spielfeld[i][j] == ('T' + i + j)) gewonnen++;
if (gewonnen == 8)
{
document.getElementById('T08').style.top = 300;
document.getElementById('T08').style.left = 300;
document.getElementById('T08').style.visibility = 'visible';
}
else Spielfeld[O][L] = 'T08';
return true;
}
</SCRIPT>
</head>

<body>
<DIV id="T00" style="position:absolute;left:0px;top:0px;" onMouseUp="if (fertig) {fertig = 0; move('T00')}"> <IMG src="" alt="" height="100" width="100"></DIV>
<DIV id="T01" style="position:absolute;left:0px;top:100px;" onMouseUp="if (fertig) {fertig = 0; move('T01')}"> <IMG src="" alt="" height="100" width="100"></DIV>
<DIV id="T02" style="position:absolute;left:0px;top:200px;" onMouseUp="if (fertig) {fertig = 0; move('T02')}"> <IMG src="" alt="" height="100" width="100"></DIV>
<DIV id="T03" style="position:absolute;left:100px;top:0px;" onMouseUp="if (fertig) {fertig = 0; move('T03')}"> <IMG src="" alt="" height="100" width="100"></DIV>
<DIV id="T04" style="position:absolute;left:100px;top:100px;" onMouseUp="if (fertig) {fertig = 0; move('T04')}"> <IMG src="" alt="" height="100" width="100"></DIV>
<DIV id="T05" style="position:absolute;left:100px;top:200px;" onMouseUp="if (fertig) {fertig = 0; move('T05')}"> <IMG src="" alt="" height="100" width="100"></DIV>
<DIV id="T06" style="position:absolute;left:200px;top:0px;" onMouseUp="if (fertig) {fertig = 0; move('T06')}"> <IMG src="" alt="" height="100" width="100"></DIV>
<DIV id="T07" style="position:absolute;left:200px;top:100px;" onMouseUp="if (fertig) {fertig = 0; move('T07')}"> <IMG src="" alt="" height="100" width="100"></DIV>
<DIV id="T08" style="position:absolute;left:200px;top:200px; visibility:hidden;"><IMG src="" alt="" height="100" width="100"></DIV>

<SCRIPT type="text/javascript"> 
ChangeTheme(4); init(); 
</SCRIPT>

<SELECT onChange="ChangeTheme(this.value)" style="position:absolute;top:400px;" > 
<OPTION value="3">Basic</OPTION> 
<OPTION value="2">DaVinci</OPTION> 
<OPTION value="0">Dopefish</OPTION> 
<OPTION value="4" selected>JS-Games</OPTION> 
<OPTION value="1">Tower</OPTION> 
</SELECT>
</body>
 
Zuletzt bearbeitet:
mhoer schrieb:
ich habe es bereits von ursprünglich 4x4 (16) Bildteile auf 3x3 (9) Bildteile reduziert. Ich hoffe ihr könnt mir helfen.
Zum Vergrößern anklicken....
Irgendwie hast Du beim Kopieren des Skriptes die Formatierung total verhunzt, im Original ist das nicht so unleserlich.
Außerdem hat Du bei Deiner Problembeschreibung vergessen das eigentliche Problem zu beschreiben.
 
Also das Problem ist das ich die Bilder jetzt nicht mehr verschieben kann. Also denke ich, das sich in der Schleife der Funktion Move() ein Fehler eingeschlichen hat.
 
mhoer schrieb:
Also das Problem ist das ich die Bilder jetzt nicht mehr verschieben kann. Also denke ich, das sich in der Schleife der Funktion Move() ein Fehler eingeschlichen hat.
Zum Vergrößern anklicken....
In der Move Funktion ist nur eine Gewinn-Überprüfungs-Schleife drin. Von Bewegung ist da nichts zu sehen, der Rest vom Skript ist unleserlich.

mhoer schrieb:
siehe: http://www.js-games.de/eng/games/slider/lx/play
Zum Vergrößern anklicken....
Dort funktioniert das Verschieben und auch der Quellcode ist a) formatiert und b) kommentiert.
 
Welche Funktionen müsste ich in dem kommentierten Script ändern um nicht 4x4 Bilderreihen sondern 3x3 Bilderreihen zu erhalten. Vielen Dank für deine schnelle Antwort.
 
mhoer schrieb:
Welche Funktionen müsste ich in dem kommentierten Script ändern um nicht 4x4 Bilderreihen sondern 3x3 Bilderreihen zu erhalten.
Zum Vergrößern anklicken....
Eine solche Funktion gibt es nicht, es ist nicht vorgesehen, dass man die Dimension mal schnell abändert.
Es bleibt also nichts anderes übrig, als das, was Du schon versucht hast. Warum Du dabei aber die komplette Formatierung zerstört hast, ist mir rätselhaft (Dein neuerliches Edit hat da eher mehr kaputt gemacht, als es die Lage verbessert hätte).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben