eKiwi

Füge das folgende Script in den body-Bereich deiner HTML-Seite ein:

<Center>
<!--

=================
Anwendung: Puzzle
=================

Copyright (c) 1998 by Dietmar Rabich, Duelmen.
Alle Rechte vorbehalten.

Version: 1.0
Datum: 15.9.1998

Aenderungen:

10.10.1998 Hilfe-Funktion

-->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

// === Versionsermittlung fuer aeltere Browserversionen ===

var version_zu_alt = true

//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--

version_zu_alt = false

// === Hilfsfunktionen (allgemein) ===

// Name fuer IMG-Tags
function puzzle_bild_name(x, y)
{
return "bild_" + String(x) + "_" + String(y)
}

// Pruefung, ob Puzzle noch gemischt (also nicht fertig!) ist
function puzzle_gemischt(puzz)
{
var cnt
var i, j

cnt = 0
puzz.gemischt = true
for(i = 0; i < puzz.hoehe; i++)
{
for(j = 0; j < puzz.breite; j++)
{
if((i == puzz.hoehe - 1) && (j == puzz.breite - 1))
{
if(puzz.feld[i][j] != 0)
return true
}
else
{
if(puzz.feld[i][j] != cnt + 1)
return true
}
cnt++
}
}
puzz.gemischt = false
return false
}

// Zwei Bilder tauschen
function puzzle_tauschen(puzz, x1, y1, x2, y2)
{
var temp

temp = puzz.feld[x1][y1]
puzz.feld[x1][y1] = puzz.feld[x2][y2]
puzz.feld[x2][y2] = temp

if(!puzz.verdeckt)
{
document[puzzle_bild_name(x1, y1)].src = puzz.bilder[puzz.feld[x1][y1]].src
document[puzzle_bild_name(x2, y2)].src = puzz.bilder[puzz.feld[x2][y2]].src
}
}

// Zwei Bilder zufaellig tauschen
function puzzle_zufall_tauschen(puzz)
{
var i, j
var stein_x, stein_y
var bild_x, bild_y
var suchen = true

// Spielstein ermitteln
for(i = 0; i < puzz.hoehe; i++)
{
for(j = 0; j < puzz.breite; j++)
{
if(puzz.feld[i][j] == 0)
{
stein_x = i
stein_y = j
suchen = false
break
}
}
if(!suchen)
break
}

// Nachbarstein zum tauschen zufaellig aussuchen
bild_x = stein_x
bild_y = stein_y
switch(Math.floor(Math.random() * 4))
{
case 0:
bild_x--
break
case 1:
bild_x++
break
case 2:
bild_y--
break
default:
bild_y++
break
}
if(bild_x < 0)
bild_x = 1
if(bild_y < 0)
bild_y = 1
if(bild_x >= puzz.hoehe)
bild_x = puzz.hoehe - 2
if(bild_y >= puzz.breite)
bild_y = puzz.breite - 2

puzzle_tauschen(puzz, stein_x, stein_y, bild_x, bild_y)
}

// === Methoden ===

// Hilfe
function puzzle_hilfe()
{
// Ausgabe der Tabelle mit dem Puzzle
window.status = "Ausgabe der Hilfe..."
this.hilfe_fenster = open("", "PuzzleHilfe", "location=0,toolbar=0,statusbar=0,dependend=1,directories=0,menubar=0,scrollbars=0,height=" + String((this.bildhoehe + 1) * (this.hoehe + 1) + 32) + ",width=" + String((this.bildbreite + 1) * (this.breite) + 32))
with(this.hilfe_fenster.document)
{
var i, j

open("text/html")
writeln("<HTML>")
writeln("<HEAD>")
writeln("<TITLE>Puzzle - Hilfe</TITLE>")
writeln("</HEAD>")
writeln("<BODY BGCOLOR=\"#000000\" TEXT=\"#FFFFFF\" LINK=\"#CCCCFF\" ALINK=\"#FFCCCC\" VLINK=\"#CCCCFF\">")
writeln("<DIV ALIGN=CENTER>")
writeln("<TABLE CELLSPACING=0 CELLPADDING=0 HEIGHT=\"100%\" WIDTH=\"100%\">")
writeln("<TR ALIGN=CENTER VALIGN=CENTER><TD>")
writeln("<TABLE CELLSPACING=1 CELLPADDING=0 BORDER=1 BORDERCOLOR=\"#FFFFFF\">")
for(i = 0; i < this.hoehe; i++)
{
writeln("<TR ALIGN=CENTER VALIGN=CENTER>")
for(j = 0; j < this.breite; j++)
{
write("<TD WIDTH=50 HEIGHT=50>")
write(this.feld[i][j] ? ("<TT>" + String(this.feld[i][j]).fontsize(5).bold() + "</TT>") : "&nbsp;")
writeln("</TD>")
}
writeln("</TR>")
}
writeln("</TABLE>")
writeln("</TD></TR>")
write("<TR ALIGN=CENTER VALIGN=CENTER><TD><STRONG><FONT SIZE=4>")
write("[ <A HREF=\"javascript:self.close()\">Schlie&szlig;en</A> ]")
writeln("</FONT></STRONG></TD></TR>")
writeln("</TABLE>")
writeln("</DIV>")
writeln("</BODY>")
writeln("</HTML>")
close()
}
this.hilfe_fenster.focus()
window.status = "Fertig!"
}

// Ausgabe des Puzzles
function puzzle_ausgabe_feld(name, versteckt)
{
// Ausgabe der Tabelle mit dem Puzzle
window.status = "Ausgabe des Puzzles..."
this.verdeckt = versteckt
with(document)
{
var i, j

open("text/html")
writeln("<DIV ALIGN=CENTER>")
writeln("<TABLE CELLSPACING=1 CELLPADDING=0 BORDER=0>")
for(i = 0; i < this.hoehe; i++)
{
writeln("<TR>")
for(j = 0; j < this.breite; j++)
{
write("<TD>")
write("<A HREF=\"javascript:" + name + ".click(" + String(i) + ", " + String(j) + ")\">")
write("<IMG SRC=\"" + (versteckt ? this.bilder.hintergrund.src : this.bilder[this.feld[i][j]].src) + "\" WIDTH=\"" + this.bildbreite + "\" HEIGHT=\"" + this.bildhoehe + "\" NAME=\"" + puzzle_bild_name(i, j) + "\" BORDER=0 ALT=\"\">")
write("</A>")
writeln("</TD>")
}
writeln("</TR>")
}
writeln("</TABLE>")
writeln("</DIV>")
close()
}
window.status = "Fertig! Nun kann es losgehen."
}

// Puzzle verdecken
function puzzle_verdecken(name)
{
var i, j

this.verdeckt = true
for(i = 0; i < this.hoehe; i++)
for(j = 0; j < this.breite; j++)
document[puzzle_bild_name(i, j)].src = this.bilder.hintergrund.src
}

// Puzzle aufdecken
function puzzle_aufdecken(name)
{
var i, j

this.verdeckt = false
for(i = 0; i < this.hoehe; i++)
for(j = 0; j < this.breite; j++)
document[puzzle_bild_name(i, j)].src = this.bilder[this.feld[i][j]].src
}

// Puzzle mischen
function puzzle_mischen(schritte)
{
var i

window.status = "Mischen..."
this.schritte = 0
this.gemischt = true
for(i = 0; i < schritte; i++)
puzzle_zufall_tauschen(this)
window.status = "Fertig!"
}

// Puzzleteil anklicken
function puzzle_click(x, y)
{
if(this.verdeckt)
{
alert("Die Puzzleteile befinden sich auf der anderen Seite!\nAlso: Erst Spielfeld aufdecken.")
return
}
if(!this.gemischt)
{
alert("Vor dem Spielen mischen nicht vergessen!")
return
}
if(this.feld[x][y] == 0)
{
alert("Der Stein wird durch Klick auf die Nachbarfelder verschoben!")
return
}

// Pruefung, ob Nachbarstein (zum Spielstein) angeklickt wurde
var nachbar_x = null
var nachbar_y = null

if(x > 0)
{
if(this.feld[x - 1][y] == 0)
{
nachbar_x = x - 1
nachbar_y = y
}
}
if(x < this.hoehe - 1)
{
if(this.feld[x + 1][y] == 0)
{
nachbar_x = x + 1
nachbar_y = y
}
}
if(y > 0)
{
if(this.feld[x][y - 1] == 0)
{
nachbar_x = x
nachbar_y = y - 1
}
}
if(y < this.breite - 1)
{
if(this.feld[x][y + 1] == 0)
{
nachbar_x = x
nachbar_y = y + 1
}
}
if((nachbar_x == null) || (nachbar_y == null))
{
alert("Der Stein wird durch Klick auf die Nachbarfelder verschoben!")
return
}

// Puzzleteile tauschen
puzzle_tauschen(this, x, y, nachbar_x, nachbar_y)

// Auswertung
this.schritte++
if(!puzzle_gemischt(this))
{
if(this.schritte == 1)
alert("Fertig!\nGeschafft in einem Schritt!\nDas kann ja nicht schwer gewesen sein...")
else
alert("Fertig!\nGeschafft in " + String(this.schritte) + " Schritten!")
}
}

// === Konstruktor ===

function Puzzle(breite, hoehe, bildname, bildtyp, bildbreite, bildhoehe)
{
var i, j
var cnt = 0

window.status = "Lade Puzzle..."

// Statusinformationen und Parameter setzen
this.gemischt = false
this.bildbreite = bildbreite
this.bildhoehe = bildhoehe
this.breite = breite
this.hoehe = hoehe
this.anzahl_bilder = breite * hoehe - 1
this.schritte = 0
this.verdeckt = true
this.hilfe_fenster = null

// Bilder einlesen
this.bilder = new Array()
for(i = 1; i <= this.anzahl_bilder; i++)
{
this.bilder[i] = new Image()
this.bilder[i].src = bildname + "_" + String(i) + "." + bildtyp
}
this.bilder["0"] = new Image()
this.bilder["0"].src = bildname + "_stein." + bildtyp
this.bilder["hintergrund"] = new Image()
this.bilder["hintergrund"].src = bildname + "_hintergrund." + bildtyp

// Spielfeld aufbauen
this.feld = new Array()
cnt = 0
for(i = 0; i < this.hoehe; i++)
{
this.feld[i] = new Array()
for(j = 0; j < this.breite; j++)
{
this.feld[i][j] = cnt + 1
cnt++
}
}
this.feld[this.hoehe - 1][this.breite - 1] = 0

// Methoden setzen
this.ausgabe_feld = puzzle_ausgabe_feld
this.hilfe = puzzle_hilfe
this.click = puzzle_click
this.verdecken = puzzle_verdecken
this.aufdecken = puzzle_aufdecken
this.mischen = puzzle_mischen

window.status = "Fertig! Nun kann es losgehen."

return this
}

//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

// Versionspruefung
if(version_zu_alt)
with(document)
{
open("text/html")
writeln("<P ALIGN=CENTER><FONT SIZE=4>F&uuml;r dieses Spiel wird eine aktuellere JavaScript-Version ben&ouml;tigt.</FONT></P>")
close()
}
else

// Puzzle anlegen und ausgeben
{
// Puzzle anlegen
// Groesse: 4 Zeilen zu 4 Spalten
// Bilddateien: bild*.jpg
// Bildgroesse: 50 x 50 Pixel
MyPuzzle = new Puzzle(4, 4, "bild", "jpg", 50, 50)

// Puzzle ausgeben
MyPuzzle.ausgabe_feld("MyPuzzle", true)

// Spielsteuerung
with(document)
{
open("text/html")
writeln("<P ALIGN=CENTER><STRONG><FONT SIZE=4>[ <A HREF=\"javascript:MyPuzzle.aufdecken()\">Puzzle aufdecken</A> ]")
writeln("[ <A HREF=\"javascript:MyPuzzle.verdecken()\">Puzzle verdecken</A> ]<BR><BR>")
writeln("Mischen: [ <A HREF=\"javascript:MyPuzzle.mischen(5)\">5</A> oder")
writeln("<A HREF=\"javascript:MyPuzzle.mischen(10)\">10</A> oder")
writeln("<A HREF=\"javascript:MyPuzzle.mischen(25)\">25</A> oder")
writeln("<A HREF=\"javascript:MyPuzzle.mischen(50)\">50</A> oder")
writeln("<A HREF=\"javascript:MyPuzzle.mischen(100)\">100</A> Schritte ]<BR><BR>")
writeln("[ <A HREF=\"javascript:location.reload()\">Startaufstellung</A> ]")
writeln("[ <A HREF=\"javascript:MyPuzzle.hilfe()\">Hilfe</A> ]")
writeln("</FONT></STRONG></P>")
close()
}
}

//-->
</SCRIPT>

Der folgende Quelltext dient zur Erstellung des Formulars:


<FORM><INPUT TYPE='button' VALUE='Schließe Fenster' onClick='window.close()'></FORM>

 

Speichere außerdem noch die folgenden Bilder im selben Verzeichnis wie deine HTML-Seite (nicht den Dateinamen ändern) :


 

 

Hinweis: Wenn du dir hier die Quelltexte kopierst, dann füge sie am besten mit einen Texteditor in dein HTML-Dokument ein, da die meisten Webeditoren es als normalen Text interpretieren.
 



Copyright Dunkel & Iwer GbR - Alle Rechte vorbehalten