Schiebepuzzle

t_t_t_tim · 10. November 2019 um 16:03

Hallo Gemeinde,

ich bin absoluter Neuling in Sachen JavaScript und möchte solch ein Schiebepuzzle Programmieren und auf eine Seite übernehmen.

Ich habe eine Tabelle mit 3 Zeilen und 3 Spalten gemacht.
Jedes wird von einem Bild ausgefüllt, welches eine Zahl beinhaltet (1-8), außer dem unten rechts, dies beinhaltet ein weißes Bild (leer).

Die Tabelle ist so aufgebaut:

____________________________________________________________

Somit:

ID1 ID2 ID3
ID4 ID5 ID6
ID7 ID8 ID9

Das klappt auch alles so weit.

Mein Script-Teil sieht momentan noch so aus:

____________________________________________________________

var b = new Array();
b[0] = new Image(); b[0].src = „Bilder/0.png“;
b[1] = new Image(); b[1].src = „Bilder/1.png“;
b[2] = new Image(); b[2].src = „Bilder/2.png“;
b[3] = new Image(); b[3].src = „Bilder/3.png“;
b[4] = new Image(); b[4].src = „Bilder/4.png“;
b[5] = new Image(); b[5].src = „Bilder/5.png“;
b[6] = new Image(); b[6].src = „Bilder/6.png“;
b[7] = new Image(); b[7].src = „Bilder/7.png“;
b[8] = new Image(); b[8].src = „Bilder/8.png“;

function SchiebeHoch() {
}

function SchiebeRunter() {
}

function SchiebeRechts() {
}

function SchiebeLinks() {
}

____________________________________________________________

Nun weiß ich aber auch schon nicht mehr weiter.
Beispiel „SchiebeHoch“:
Ich muss ja irgendwie über die Table-ID herausfinden, welches Bild in dem Feld steckt, welches sich über dem Feld befindet, in dem das leere Bild vorhanden ist.
ID des leeren Bildes: x
ID des darüberliegenden Bildes: x-3
Dafür brauche ich ja dann aber auch noch die ID des leeren Bildes.

Aber ich habe keine Ahnung, wie ich das dann mit JavaScript verwirkliche und ob das überhaupt geht.
Ah, Hilfe.

Würde mich über Denkanstöße genauso freuen wie über ausführliche Hilfe.
Vielen Dank!

Tim.

Sebastian_Moser · 10. November 2019 um 16:05

Hallo.

Ich hab jetzt nicht alles gelesen, was du geschrieben hast, wir gehen das jetzt Schritt für Schritt an und zwar hier mal ein Teil:

function selectHTML(element) {
alert(document.getElementById(element).innerHTML);
}

function initTable() {
if (document.getElementsByTagName)
var x = document.getElementsByTagName(‚TD‘);
else if (document.all)
var x = document.all.tags(‚TD‘);
for (var i=0; i < x.length; i++) {
x[i].onmouseover = over;
x[i].onmouseout = out;
x[i].onclick = click;
}
}

function over() {
this.style.border = ‚2px dotted blue‘;
}

function out() {
this.style.border = ‚2px solid orange‘;
}

function click() {
selectHTML(this.id);
}

Sag bescheid wenns weiter geht.

Gruss Sebastian

Gernot_Back · 10. November 2019 um 16:06

Hallo Tim,

ich bin absoluter Neuling in Sachen JavaScript und möchte
solch ein Schiebepuzzle Programmieren und auf eine Seite
übernehmen.

Ich habe eine Tabelle mit 3 Zeilen und 3 Spalten gemacht.
Jedes wird von einem Bild ausgefüllt, welches eine Zahl
beinhaltet (1-8), außer dem unten rechts, dies beinhaltet ein
weißes Bild (leer).

Die Tabelle ist so aufgebaut:

Mit einer Tabelle wirst du da wohl kaum weiterkommen, wenn die einzelnen Bilder verschiebbar sein sollen.

Du kannst aber mal versuchen, folgendes Script für andere Browser als den IE nachzurüsten, sodass es auch dort funktioniert:

http://www.dynamicdrive.com/dynamicindex12/dhtmlpuzz…
(Demo ist nur im IE sichtbar.)

Ich fürchte aber, das ist nichts für Anfänger. Da habe auch ich mir vor einigen Jahren die Zähne dran ausgebissen, es aber seither auch nicht wieder versucht.

Vielleicht ist es ja auch gar nicht so schwer, wenn man statt der Uralt-Abfrage „if(document.layers)“ etwas für moderne Browser Passenderes benutzt.

Hier gibt es aber auch ein fertiges Puzzle, das auf Click statt auf MouseOver reagiert und in allen Browsern funktioniert.

http://www.nuff-respec.com/technology/slide-puzzle-j…

Gruß Gernot

aya · 10. November 2019 um 16:19

Hallo.

Ich hab jetzt nicht alles gelesen, was du geschrieben hast,
wir gehen das jetzt Schritt für Schritt an und zwar hier mal
ein Teil:

[…]

Sag bescheid wenns weiter geht.

Gruss Sebastian

Hallo Sebastian

also t-t-tim scheint das Thema ja nicht weiter zu interessieren - leider.

Ich habe - zu Übungszwecken - das Thema mitverfolgt, und wäre jetzt sehr an Teil 2 interessiert

Da aber das Thema für mich nicht wichtig im Sinne von benötigt ist, und du viel Zeit dafür aufwenden musst - muss es nicht unbedingt sein.

Finde aber die Hilfestellung die du geboten hättest - super.

lg
aya

t_t_t_tim · 10. November 2019 um 16:35

Oh, hallo Sebastian.
Erst einmal vielen Dank für die Mühe!!

Tut mir Leid, dass ich deine Hilfe bisher nicht in Anspruch nehmen konnte. Dies werde ich auch in nächster Zeit nicht können.

Aber sobald ich Zeit habe, werde ich es machen und deine Hilfe weiß ich jetzt schon zu schätzen.

Danke!
Tim.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

IST_Mainz · 10. November 2019 um 17:05

Hi,
bitte beachte, dass du zu Beginn des Puzzles nicht einfach per Zufallsgenerator austauschen kannst. Denn es gibt „Zusammenstellungen“ die nicht per schieben wieder lösbar sind. Du musst also zunächst „verschieben per Zufall“ statt irgendwelche Felder wild auszutauschen.
Anbei eine Basicroutine eines komplett lauffähigen Programmes (sehr alt, habe ich damals unter DOS geschrieben:

10 REM H.-J. Schulz, Dr.-Georg-Durst-Str. 16, 55232 Alzey
20 :
30 KEY OFF: SCREEN 0, 0, 0
40 : COLOR 15, 0, 0: CLS
50 LOCATE 3, 27: PRINT „S C H I E B E S P I E L 2.0“
60 LOCATE 4, 27: PRINT „=======================“
70 LOCATE 6, 34: PRINT „ein Pr„sent“
80 LOCATE 7, 36: PRINT „von der“
90 LOCATE 10, 18: PRINT „ÉÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ»“
100 FOR F = 11 TO 19
110 LOCATE F, 18: PRINT „º“: LOCATE F, 62: PRINT „º“
120 NEXT
130 LOCATE 20, 18: PRINT „ÈÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ¼“
140 LOCATE 12, 23: PRINT „…Dieser Platz…“
150 LOCATE 14, 23: PRINT „…ist f?r Ihr…“
160 LOCATE 16, 23: PRINT „…Firmensymbol…“
170 LOCATE 18, 23: PRINT „…reserviert!..“
180 LOCATE 23, 23: PRINT „W?nschen Sie eine Anleitung (J/N)?“;
190 TASTE$ = „“
200 WHILE TASTE$ = „“
210 TASTE$ = INKEY$
220 IF INSTR("*jJnN", TASTE$) ."
360 LOCATE 14, 20: PRINT „Die Zeit, die Sie brauchten, wird vom Computer“
370 LOCATE 15, 20: PRINT „gemessen.“
380 TASTE$ = „“
390 WEND
400 CLEAR
410 DIM A$(16)
420 DIM B$(16)
430 RESTORE
440 LOCATE 21, 19: PRINT „Bitte w„hlen Sie: 1 = Zahlen“
450 LOCATE 22, 19: PRINT " 2 = Buchstaben"
460 LOCATE 23, 19: PRINT " 3 = das i s t - Symbol"
470 :
480 WHILE INKEY$ „“: WEND’Tastaturpuffer leeren
490 TASTE$ = „“
500 WHILE TASTE$ = „“
510 TASTE$ = INKEY$
520 IF (TASTE$ „1“) AND (TASTE$ „2“) AND (TASTE$ „3“) THEN TASTE$ = „“
530 WEND
540 WHILE TASTE$ = „1“
550 REM Zahlen
560 A$(1) = „ÚÄÄÄÄÄÄÄ¿³ 1 ³ÀÄÄÄÄÄÄÄÙ“
570 A$(2) = „ÚÄÄÄÄÄÄÄ¿³ 2 ³ÀÄÄÄÄÄÄÄÙ“
580 A$(3) = „ÚÄÄÄÄÄÄÄ¿³ 3 ³ÀÄÄÄÄÄÄÄÙ“
590 A$(4) = „ÚÄÄÄÄÄÄÄ¿³ 4 ³ÀÄÄÄÄÄÄÄÙ“
600 A$(5) = „ÚÄÄÄÄÄÄÄ¿³ 5 ³ÀÄÄÄÄÄÄÄÙ“
610 A$(6) = „ÚÄÄÄÄÄÄÄ¿³ 6 ³ÀÄÄÄÄÄÄÄÙ“
620 A$(7) = „ÚÄÄÄÄÄÄÄ¿³ 7 ³ÀÄÄÄÄÄÄÄÙ“
630 A$(8) = „ÚÄÄÄÄÄÄÄ¿³ 8 ³ÀÄÄÄÄÄÄÄÙ“
640 A$(9) = „ÚÄÄÄÄÄÄÄ¿³ 9 ³ÀÄÄÄÄÄÄÄÙ“
650 A$(10) = „ÚÄÄÄÄÄÄÄ¿³ 10 ³ÀÄÄÄÄÄÄÄÙ“
660 A$(11) = „ÚÄÄÄÄÄÄÄ¿³ 11 ³ÀÄÄÄÄÄÄÄÙ“
670 A$(12) = „ÚÄÄÄÄÄÄÄ¿³ 12 ³ÀÄÄÄÄÄÄÄÙ“
680 A$(13) = „ÚÄÄÄÄÄÄÄ¿³ 13 ³ÀÄÄÄÄÄÄÄÙ“
690 A$(14) = „ÚÄÄÄÄÄÄÄ¿³ 14 ³ÀÄÄÄÄÄÄÄÙ“
700 A$(15) = „ÚÄÄÄÄÄÄÄ¿³ 15 ³ÀÄÄÄÄÄÄÄÙ“
710 A$(16) = " "
720 LEER = 16
730 TASTE$ = „“
740 WEND
750 WHILE TASTE$ = „2“
760 REM Buchstaben
770 A$(1) = " ÉÍÍ» ÌÍÍ¹ Ê Ê "
780 A$(2) = " ËÍ» ÌÍÊ» ÊÍÍ¼ "
790 A$(3) = " ÉÍÍ» º ÈÍÍ¼ "
800 A$(4) = " ÍËÍÍ» º º ÍÊÍÍ¼ "
810 A$(5) = " ËÍÍ» ÌÍ ÊÍÍ¼ "
820 A$(6) = " ËÍÍ» ÌÍ Ê "
830 A$(7) = " ÉÍÍÍ º É» ÈÍÍ¼ "
840 A$(8) = " Ë Ë ÌÍÍ¹ Ê Ê "
850 A$(9) = " ÍËÍ º ÍÊÍ "
860 A$(10) = " ÍËÍ º ÈÍ¼ "
870 A$(11) = " Ë ÉÍ ÌÍÊ» Ê Ê "
880 A$(12) = " ËÍ º ÊÍÍ¼ "
890 A$(13) = " ÉÍËÍ» º º º Ê Ê Ê "
900 A$(14) = " ÉÍ» Ë º º º Ê ÈÍ¼ "
910 A$(15) = " ÉÍÍ» º º ÈÍÍ¼ "
920 A$(16) = " "
930 TASTE$ = „“
940 LEER = 16
950 WEND
960 WHILE TASTE$ = „3“
970 REM Variabelndefinition
980 FOR F = 1 TO 16
990 FOR G = 1 TO 27
1000 READ C: D$ = D$ + CHR$©
1010 NEXT G
1020 A$(F) = D$: D$ = „“
1030 NEXT F
1040 LEER = 2
1050 TASTE$ = „“
1060 WEND
1070 DATA 32, 32, 32, 32, 32, 32, 32, 32, 32,201,205,205,187, 32, 32, 32, 32, 32,200,205,205,188, 32, 32, 32, 32, 32
1080 DATA 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32
1090 DATA 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,201,205,205, 32, 32, 32, 32, 32, 32,186, 32, 32
1100 DATA 32, 32, 32, 32, 32, 32, 32, 32, 32,205,187, 32, 32, 32, 32, 32, 32, 32, 32,186, 32, 32, 32, 32, 32, 32, 32
1110 DATA 201,205,205,187,32, 32, 32, 32,201,186, 32, 32,186, 32, 32, 32, 32,186,186, 32, 32,186, 32, 32, 32, 32,186
1120 DATA 205,205,205,205,205,205,205,205,205,32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,201
1130 DATA 205,205,205,205,205,205,188,32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,205,205,205,205,205,205,187, 32, 32
1140 DATA 32,200,205,205,205,205,205,187, 32, 32, 32, 32, 32, 32, 32, 32,186, 32, 32,201,205,205,205,205,205,188, 32
1150 DATA 186,32, 32,186, 32, 32, 32, 32,200,186, 32, 32,186, 32, 32,201,205,205,186, 32, 32,186, 32, 32,186, 32, 32
1160 DATA 205,205,205,205,187,32, 32, 32,200,205,205,205,205,188, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32
1170 DATA 205,205,187,32, 32, 32,186, 32, 32, 32, 32,186, 32, 32, 32,186, 32, 32, 32, 32,186, 32, 32, 32,186, 32, 32
1180 DATA 32,186, 32, 32, 32, 32, 32, 32, 32, 32,186, 32, 32, 32, 32, 32, 32, 32, 32,200,205,205,205,205,187, 32, 32
1190 DATA 186,32, 32,186, 32, 32,186, 32, 32,200,205,205,188, 32, 32,200,205,205, 32, 32, 32, 32, 32, 32, 32, 32, 32
1200 DATA 32, 32, 32, 32, 32, 32, 32, 32, 32,205,205,205,205,205,205,205,205,205, 32, 32, 32, 32, 32, 32, 32, 32, 32
1210 DATA 32, 32,186, 32, 32, 32,186, 32, 32,205,205,188, 32, 32, 32,200,205,205, 32, 32, 32, 32, 32, 32, 32, 32, 32
1220 DATA 32, 32, 32, 32, 32, 32,186, 32, 32,205,205,205,205,205,205,188, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32
1230 FOR F = 1 TO 16
1240 B$(F) = A$(F)
1250 NEXT F
1260 :
1270 REM Spielaufbau
1280 COLOR 15: CLS
1290 N = 0
1300 COLOR 15, 2
1310 FOR Z = 1 TO 10 STEP 3
1320 FOR S = 41 TO 68 STEP 9
1330 N = N + 1
1340 WHILE S > 4: S = S - 4: WEND
1350 S = S * 9 + 32
1360 LOCATE Z, S: PRINT LEFT$(A$(N), 9)
1370 LOCATE Z + 1, S: PRINT MID$(A$(N), 10, 9)
1380 LOCATE Z + 2, S: PRINT RIGHT$(A$(N), 9)
1390 NEXT S
1400 NEXT Z
1410 COLOR 15, 0
1420 LOCATE 2, 10: PRINT " * * * * * * * * * * * "
1430 FOR F = 3 TO 9
1440 LOCATE F, 10: PRINT " * * "
1450 NEXT
1460 LOCATE 10, 10: PRINT " * * * * * * * * * * * "
1470 LOCATE 4, 12: PRINT „…Dieser…“
1480 LOCATE 5, 12: PRINT „…Platz ist…“
1490 LOCATE 6, 12: PRINT „…f?r Ihre…“
1500 LOCATE 7, 12: PRINT „…Werbung…“
1510 LOCATE 8, 12: PRINT „…reserviert…“
1520 LOCATE 18, 55: PRINT "Taste "
1530 LOCATE 20, 57: PRINT „= ENDE“
1540 :
1550 COLOR 15,2
1560 REM verschieben
1570 N = 0
1580 FOR Z = 13 TO 22 STEP 3
1590 FOR S = 1 TO 28 STEP 9
1600 N = N + 1
1610 WHILE S > 4: S = S - 4: WEND
1620 S = S * 9 - 8
1630 IF (Z MOD 2) = (S MOD 2) THEN COLOR 0, 7
1640 LOCATE Z, S: PRINT LEFT$(B$(N), 9)
1650 LOCATE Z + 1, S: PRINT MID$(B$(N), 10, 9)
1660 LOCATE Z + 2, S: PRINT RIGHT$(B$(N), 9);
1670 COLOR 14, 1
1680 NEXT S
1690 NEXT Z
1700 FOR F = 1 TO 30
1710 RANDOMIZE TIMER
1720 X = (INT(RND * (3 + 1)) + 1)
1730 ON X GOSUB 2350, 2420, 2490, 2560
1740 NEXT F
1750 LOCATE ZMARK, SMARK: PRINT " „;
1760 TIME$ = „00:00:00“
1770 :
1780 REM hauptprogramm
1790 TASTE$ = „“
1800 WHILE TASTE$ CHR$(27)'solange nicht ESC gedr?ckt wurde…
1810 TASTE$ = INKEY$
1820 TASTE$ = RIGHT$(TASTE$, 1)
1830 IF (TASTE$ = „K“) OR (TASTE$ = „4“) THEN GOSUB 2350
1840 IF (TASTE$ = „H“) OR (TASTE$ = „8“) THEN GOSUB 2420
1850 IF (TASTE$ = „M“) OR (TASTE$ = „6“) THEN GOSUB 2490
1860 IF (TASTE$ = „P“) OR (TASET$ = „2“) THEN GOSUB 2560
1870 WEND
1880 :
1890 REM ende
1900 COLOR 15,0: CLS
1910 ERGEBNIS$ = „“
1920 FOR F = 1 TO 16
1930 IF A$(F) B$(F) THEN ERGEBNIS$ = „leider nicht“
1940 NEXT F
1950 LOCATE 8, 10: PRINT „Sie haben es „; ERGEBNIS$; " geschafft!“
1960 LOCATE 12, 10: PRINT „Ihre Zeit (Stunden - Minuten - Sekunden)“
1970 LOCATE 14, 40: PRINT TIME$
1980 LOCATE 18, 10: PRINT „Wollen Sie noch einmal spielen (J/N)?“;
1990 TASTE$ = „“
2000 WHILE TASTE$ = „“
2010 TASTE$ = INKEY$
2020 IF INSTR(“*jJnN“, TASTE$) INT(Z / 4): Z = Z + 1: WEND
2140 Z = (Z / 4 + 2) * 3 + 4
2150 S = LEER
2160 WHILE S > 4: S = S - 4: WEND
2170 S = S * 9 - 8
2180 LOCATE Z, S: PRINT „ÛßßßßßßßÛ“
2190 LOCATE Z + 1, S: PRINT „Û Û“
2200 LOCATE Z + 2, S: PRINT „ÛÜÜÜÜÜÜÜÛ“;
2210 ZMARK = Z + 1: SMARK = S + 3
2220 Z = VOLL
2230 WHILE Z / 4 INT(Z / 4): Z = Z + 1: WEND
2240 Z = (Z / 4 + 2) * 3 + 4
2250 S = VOLL
2260 WHILE S > 4: S = S - 4: WEND
2270 S = S * 9 - 8
2280 IF (Z MOD 2) = (S MOD 2) THEN COLOR 0, 7
2290 LOCATE Z, S: PRINT LEFT$(B$(VOLL), 9)
2300 LOCATE Z + 1, S: PRINT MID$(B$(VOLL), 10, 9)
2310 LOCATE Z + 2, S: PRINT RIGHT$(B$(VOLL), 9);
2320 COLOR 14, 1
2330 RETURN
2340 :
2350 REM links
2360 IF LEER / 4 = INT(LEER / 4) THEN PLAY „f 16“: RETURN
2370 VOLL = LEER
2380 LEER = LEER + 1
2390 GOSUB 2100
2400 RETURN
2410 :
2420 REM hoch
2430 IF LEER > 12 THEN PLAY „f 16“: RETURN
2440 VOLL = LEER
2450 LEER = LEER + 4
2460 GOSUB 2100
2470 RETURN
2480 :
2490 REM rechts
2500 IF (LEER + 3) / 4 = INT((LEER + 3) / 4) THEN PLAY „f 16“: RETURN
2510 VOLL = LEER
2520 LEER = LEER - 1
2530 GOSUB 2100
2540 RETURN
2550 :
2560 REM tief
2570 IF LEER